medos-sdk 1.1.13 → 1.1.14

package/dist/vanilla/AppointmentCalendarWidget.js

@@ -1,10 +1,12 @@
 import { AppointmentService, } from "../services/AppointmentService";
 import { PatientService } from "../services/PatientService";
+import { WorkspaceService } from "../services/WorkspaceService";
 import { MedosClient } from "../client/MedosClient";
 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 { formatDate, formatTime, calculateDuration, } from "../components/utils/date";
 import { VanillaIcons } from "./components/VanillaIcons";
 import { VanillaSelect } from "./components/VanillaSelect";
 import { VanillaCalendar } from "./components/VanillaCalendar";
@@ -48,9 +50,25 @@ class AppointmentCalendarWidget {
         else {
             throw new Error("Either apiKey or sessionToken must be provided");
         }
+        await this.loadWorkspaceConfiguration();
         await this.loadAddresses();
         this.render();
     }
+    async loadWorkspaceConfiguration() {
+        this.setState({ loading: true, error: null });
+        try {
+            const workspaceResponse = await WorkspaceService.fetchWorkspace();
+            console.log("Workspace configuration loaded:", {
+                workspaceId: workspaceResponse.workspaceId,
+            });
+        }
+        catch (e) {
+            console.error("Failed to load workspace configuration:", e);
+        }
+        finally {
+            this.setState({ loading: false });
+        }
+    }
     async loadAddresses() {
         this.setState({ loading: true, error: null });
         try {
@@ -82,10 +100,6 @@ class AppointmentCalendarWidget {
                             this.doctors = docsForAddr;
                             if (docsForAddr.length === 1) {
                                 this.state.selectedDoctor = docsForAddr[0].id;
-                                this.state.step = 1;
-                            }
-                            else {
-                                this.state.step = 0;
                             }
                         }
                         else {
@@ -94,20 +108,16 @@ class AppointmentCalendarWidget {
                                     error: "No doctors at this address. Please choose a different address.",
                                 });
                                 this.doctors = [];
-                                this.state.step = 0;
                             }
                             else {
                                 this.setState({
                                     error: "No doctors available for the selected location(s).",
                                 });
                                 this.doctors = [];
-                                this.state.step = 0;
                             }
                         }
                     }
-                    else {
-                        this.state.step = 0;
-                    }
+                    this.state.step = 0;
                 }
                 else {
                     this.setState({ error: "No addresses or doctors available." });
@@ -142,7 +152,6 @@ class AppointmentCalendarWidget {
                 this.doctors = docsForAddr;
                 if (docsForAddr.length === 1) {
                     this.state.selectedDoctor = docsForAddr[0].id;
-                    this.state.step = 1;
                 }
                 else {
                     this.state.selectedDoctor = null;
@@ -189,6 +198,13 @@ class AppointmentCalendarWidget {
         try {
             const s = await AppointmentService.fetchSlots(this.state.workspaceId, this.state.selectedAddress, this.state.selectedDoctor, dateStr);
             this.state.slots = s || [];
+            if (this.state.selectedSlot) {
+                const isSlotStillValid = this.state.slots.some((slot) => slot.start === this.state.selectedSlot?.start &&
+                    slot.end === this.state.selectedSlot?.end);
+                if (!isSlotStillValid) {
+                    this.state.selectedSlot = null;
+                }
+            }
         }
         catch (e) {
             this.setState({ error: e.message || "Failed to load slots" });
@@ -220,8 +236,6 @@ class AppointmentCalendarWidget {
                     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);
@@ -247,8 +261,6 @@ class AppointmentCalendarWidget {
                     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;
@@ -334,12 +346,14 @@ class AppointmentCalendarWidget {
                 phoneNumber: this.state.patientPhone,
                 otpCode: this.state.otpCode,
             });
-            await PatientService.verifyPhoneVerificationOtp({
+            const response = await PatientService.verifyPhoneVerificationOtp({
                 countryCode: this.state.countryCode,
                 phoneNumber: this.state.patientPhone,
                 otpCode: this.state.otpCode,
             });
+            this.processOtpVerificationResponse(response);
             this.setState({ otpVerified: true, error: null });
+            this.goToNext();
         }
         catch (e) {
             console.error("OTP verification error:", e);
@@ -354,6 +368,77 @@ class AppointmentCalendarWidget {
             this.render();
         }
     }
+    processOtpVerificationResponse(response) {
+        try {
+            this.state.userSessionPacks = [];
+            this.state.availablePackages = [];
+            this.state.verifiedPatients = [];
+            const sessionPacksDetails = response?.sessionPacksDetails;
+            if (sessionPacksDetails?.associatedPatients &&
+                Array.isArray(sessionPacksDetails.associatedPatients) &&
+                sessionPacksDetails.associatedPatients.length > 0) {
+                this.state.verifiedPatients = sessionPacksDetails.associatedPatients;
+            }
+            else if (response.associatedPatients &&
+                Array.isArray(response.associatedPatients)) {
+                this.state.verifiedPatients = response.associatedPatients;
+            }
+            else if (response.patients && Array.isArray(response.patients)) {
+                this.state.verifiedPatients = response.patients;
+            }
+            if (sessionPacksDetails?.activeSessionPackResponses &&
+                Array.isArray(sessionPacksDetails.activeSessionPackResponses) &&
+                sessionPacksDetails.activeSessionPackResponses.length > 0) {
+                this.state.userSessionPacks =
+                    sessionPacksDetails.activeSessionPackResponses.map((pack) => ({
+                        id: pack.id || 0,
+                        name: pack.packageName || pack.name || "Unknown Package",
+                        description: pack.description,
+                        totalSessions: pack.totalSessions || 0,
+                        remainingSessions: pack.remainingSessions || 0,
+                        expiryDate: pack.expiryDate || "",
+                        purchaseDate: pack.purchaseDate,
+                        doctorId: pack.doctorId,
+                        doctorName: pack.doctorName,
+                        allowedConsultationModes: pack.allowedConsultationModes || [],
+                    }));
+            }
+            if (sessionPacksDetails?.allSessionPackResponses &&
+                Array.isArray(sessionPacksDetails.allSessionPackResponses) &&
+                sessionPacksDetails.allSessionPackResponses.length > 0) {
+                this.state.availablePackages =
+                    sessionPacksDetails.allSessionPackResponses.map((pack) => ({
+                        id: pack.id || 0,
+                        name: pack.packageName || pack.name || "Unknown Package",
+                        description: pack.description,
+                        totalSessions: pack.totalSessions || 0,
+                        price: pack.packagePrice || pack.price || 0,
+                        discountedPrice: pack.discountedPrice,
+                        discount: pack.discount,
+                        discountType: pack.discountType,
+                        validityDays: pack.validityDays || 0,
+                        allowedConsultationModes: pack.allowedConsultationModes || [],
+                        allowedDoctors: pack.allowedDoctors || [],
+                        doctorIds: pack.doctorIds || [],
+                        applicableOnline: pack.allowedConsultationModes?.includes("ONLINE") || false,
+                        applicableOffline: pack.allowedConsultationModes?.includes("OFFLINE") || false,
+                    }));
+            }
+            console.log("Processed OTP verification response:", {
+                verifiedPatients: this.state.verifiedPatients.length,
+                userSessionPacks: this.state.userSessionPacks.length,
+                availablePackages: this.state.availablePackages.length,
+                allSessionPackResponsesExists: sessionPacksDetails?.allSessionPackResponses?.length > 0,
+                sessionPacksDetailsExists: !!sessionPacksDetails,
+            });
+        }
+        catch (error) {
+            console.error("Error processing OTP verification response:", error);
+            this.state.verifiedPatients = [];
+            this.state.userSessionPacks = [];
+            this.state.availablePackages = [];
+        }
+    }
     async submitAppointment() {
         this.setState({ error: null });
         if (!this.state.selectedDoctor ||
@@ -377,23 +462,6 @@ 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");
@@ -415,53 +483,64 @@ class AppointmentCalendarWidget {
         this.render();
         try {
             const { firstName, lastName } = parsePatientName(this.state.patientName || "Patient");
-            const startDate = new Date(this.state.selectedSlot.start);
-            const endDate = new Date(this.state.selectedSlot.end);
-            const appointmentDate = formatDateToISO(startDate);
-            const formatTime = (date) => {
-                const hours = String(date.getHours()).padStart(2, "0");
-                const minutes = String(date.getMinutes()).padStart(2, "0");
-                return `${hours}:${minutes}`;
-            };
-            const fromDateTimeTs = formatTime(startDate);
-            const toDateTimeTs = formatTime(endDate);
-            const patientAddressPayload = {
-                addressLine1: this.state.patientAddress,
-                city: this.state.patientCity,
-                state: this.state.patientState,
-                country: this.state.patientCountry,
-                zipcode: this.state.patientZipcode,
-                landmark: this.state.patientLandmark || undefined,
+            const appointmentDate = formatDateToISO(this.state.selectedDate);
+            const fromDateTimeTs = this.state.selectedSlot.start;
+            const toDateTimeTs = this.state.selectedSlot.end;
+            const patientPayload = {
+                firstName,
+                lastName,
+                countryCode: this.state.countryCode,
+                phoneNumber: this.state.patientPhone,
+                age: parseInt(this.state.patientAge, 10),
+                gender: this.state.patientGender.toUpperCase(),
             };
-            await AppointmentService.createAppointment({
+            if (this.state.patientEmail) {
+                patientPayload.email = this.state.patientEmail;
+            }
+            if (this.state.bloodGroup) {
+                patientPayload.bloodGroup = this.safeMapBloodGroupToApi(this.state.bloodGroup);
+            }
+            if (this.state.useExistingPatient && this.state.selectedPatient) {
+                patientPayload.id = this.state.selectedPatient.id;
+            }
+            const appointmentPayload = {
                 workspaceId: this.state.workspaceId,
                 workspaceAddressId: this.state.selectedAddress,
                 doctorId: this.state.selectedDoctor,
                 mode: this.state.consultationMode || "OFFLINE",
-                appointmentDate,
-                fromDateTimeTs,
-                toDateTimeTs,
-                consultationCharge: this.state.consultationMode === "ONLINE" ? "500" : "300",
+                appointmentDate: appointmentDate,
+                fromDateTimeTs: fromDateTimeTs,
+                toDateTimeTs: toDateTimeTs,
+                consultationCharge: this.state.consultationCharge || "0",
                 type: "CONSULTATION",
                 source: "SDK_POWERED_WEBSITE",
-                patientPayload: {
-                    firstName,
-                    lastName,
-                    email: this.state.patientEmail || undefined,
+                bookingType: this.state.bookingType || "ONE_TIME_APPOINTMENT",
+                paymentMode: this.state.paymentMode || "CASH",
+                patientPayload,
+                patientAddress: {
+                    addressLine1: this.state.patientAddress,
+                    addressLine2: "",
+                    city: this.state.patientCity,
+                    state: this.state.patientState,
+                    country: this.state.patientCountry,
+                    zipcode: this.state.patientZipcode,
+                    landmark: this.state.patientLandmark || undefined,
                     countryCode: this.state.countryCode,
                     phoneNumber: this.state.patientPhone,
-                    age: this.state.patientAge
-                        ? parseInt(this.state.patientAge, 10)
-                        : undefined,
-                    gender: this.state.patientGender
-                        ? this.state.patientGender.toUpperCase()
-                        : undefined,
-                    dob: this.safeFormatDateOfBirth(this.state.patientDob),
-                    bloodGroup: this.safeMapBloodGroupToApi(this.state.bloodGroup),
+                    patientId: this.state.selectedPatient?.id || 0,
                 },
-                patientAddress: patientAddressPayload,
-            });
-            this.state.step = 7;
+            };
+            if (this.state.packageConfigId) {
+                appointmentPayload.packageConfigId = this.state.packageConfigId;
+            }
+            if (this.state.patientPackageId) {
+                appointmentPayload.patientPackageId = this.state.patientPackageId;
+            }
+            if (this.state.packageAmount) {
+                appointmentPayload.packageAmount = this.state.packageAmount;
+            }
+            await AppointmentService.createAppointment(appointmentPayload);
+            this.setState({ step: 7 });
             this.options.onSuccess?.();
         }
         catch (e) {
@@ -478,19 +557,34 @@ class AppointmentCalendarWidget {
         if (this.state.step === 0) {
             if (!this.state.otpVerified)
                 return;
-            this.state.step = 1;
-            this.render();
-            return;
+            console.log("Step 0 transition - Debug info:", {
+                allSessionPackResponses: this.state.availablePackages?.length || 0,
+                userSessionPacks: this.state.userSessionPacks?.length || 0,
+                availablePackages: this.state.availablePackages?.length || 0,
+            });
+            if (this.state.availablePackages &&
+                Array.isArray(this.state.availablePackages) &&
+                this.state.availablePackages.length > 0) {
+                this.state.step = 1;
+                console.log("Showing Booking Option Step - allSessionPackResponses is not empty");
+                this.render();
+                return;
+            }
+            else {
+                this.state.bookingOptionType = "new-appointment";
+                this.state.step = 2;
+                console.log("Auto-skipping Booking Option Step - allSessionPackResponses is empty");
+                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();
-                }
+            if (this.state.bookingOptionType === "explore-packages") {
+                this.state.showPackageExplorer = true;
+                this.state.step = 2;
+                this.render();
                 return;
             }
             this.state.step = 2;
@@ -498,6 +592,13 @@ class AppointmentCalendarWidget {
             return;
         }
         if (this.state.step === 2) {
+            if (this.state.showPackageExplorer) {
+                if (this.state.selectedNewPackage) {
+                    this.state.showPackageExplorer = false;
+                    this.render();
+                }
+                return;
+            }
             if (this.state.addresses.length > 1 && !this.state.selectedAddress)
                 return;
             if (this.doctors.length > 1 && !this.state.selectedDoctor)
@@ -521,10 +622,16 @@ class AppointmentCalendarWidget {
             return;
         }
         if (this.state.step === 4) {
-            if (!this.state.selectedPatient)
+            if (this.state.selectedPatient && this.state.useExistingPatient) {
+                this.state.step = 6;
+                this.render();
                 return;
-            this.state.step = 5;
-            this.render();
+            }
+            if (!this.state.useExistingPatient) {
+                this.state.step = 5;
+                this.render();
+                return;
+            }
             return;
         }
         if (this.state.step === 5) {
@@ -546,44 +653,40 @@ class AppointmentCalendarWidget {
         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) {
+        if (this.state.showPackageExplorer) {
+            this.state.showPackageExplorer = false;
+            this.state.selectedNewPackage = null;
+            this.state.bookingOptionType = null;
             this.state.step = 1;
             this.render();
             return;
         }
-        if (this.state.step === 3) {
-            this.state.step = 2;
-            this.render();
-            return;
-        }
-        if (this.state.step === 4) {
-            this.state.step = 3;
-            this.render();
-            return;
-        }
-        if (this.state.step === 5) {
-            this.state.step = 4;
-            this.render();
-            return;
-        }
-        if (this.state.step === 6) {
-            this.state.step = 5;
+        const currentStep = this.state.step;
+        if (currentStep > 0) {
+            if (currentStep === 6 && this.state.useExistingPatient) {
+                this.state.selectedPatient = null;
+                this.state.useExistingPatient = false;
+                this.state.step = 4;
+                this.render();
+                return;
+            }
+            if (currentStep === 2) {
+                if (this.state.availablePackages &&
+                    Array.isArray(this.state.availablePackages) &&
+                    this.state.availablePackages.length > 0) {
+                    this.state.step = 1;
+                    console.log("Going back to Booking Option Step - allSessionPackResponses is not empty");
+                }
+                else {
+                    this.state.step = 0;
+                    console.log("Auto-skipping Booking Option Step on back - allSessionPackResponses is empty");
+                }
+                this.render();
+                return;
+            }
+            this.state.step = currentStep - 1;
             this.render();
-            return;
         }
-        this.state.step = Math.max(0, this.state.step - 1);
-        this.render();
     }
     async reset() {
         this.state = { ...INITIAL_STATE };
@@ -597,12 +700,8 @@ class AppointmentCalendarWidget {
             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) {
+            if (safeUpdates.bloodGroup !== undefined) {
                 this.updatePatientDetailsButtonState();
                 this.updateSubmitButtonState();
             }
@@ -827,30 +926,8 @@ class AppointmentCalendarWidget {
           </div>
         </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 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 `
@@ -885,65 +962,98 @@ class AppointmentCalendarWidget {
     renderBookingOptionStep() {
         const hasActivePacks = this.state.userSessionPacks.length > 0;
         const activePack = this.state.userSessionPacks.find((p) => p.remainingSessions > 0);
+        const hasAvailablePackages = this.state.availablePackages.length > 0;
+        const multipleActivePacks = this.state.userSessionPacks.filter((p) => p.remainingSessions > 0)
+            .length > 1;
         return `
       <div class="medos-section-card">
         <div class="medos-section-header">
-          ${VanillaIcons.calendar(14)}
-          <span class="medos-section-title">Choose Booking Option</span>
+          <h3 class="medos-section-title" style="font-size: var(--medos-typography-font-size-xl, 20px);">Choose Booking Option</h3>
         </div>
         <div class="medos-section-body">
-          <p class="medos-section-description">Select a package to explore on offer</p>
+          <p class="medos-section-description">
+            How would you like to book your appointment?
+          </p>
           
-          ${hasActivePacks && activePack
+          ${multipleActivePacks
             ? `
-            <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"
+            <div class="medos-session-packs-section">
+              <h4 class="medos-session-packs-title">Your Active Session Packs</h4>
+              <div class="medos-session-packs-list">
+                ${this.state.userSessionPacks
+                .filter((pack) => pack.remainingSessions > 0)
+                .map((pack) => `
+                  <div class="medos-session-pack-card ${this.state.bookingOptionType === "session-pack" &&
+                this.state.selectedSessionPack?.id === pack.id
                 ? "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>
+                : ""}" data-pack-id="${pack.id}">
+                    <div class="medos-session-pack-info">
+                      <span class="medos-session-pack-name">${this.escapeHtml(pack.name)}</span>
+                      <span class="medos-session-pack-remaining">${pack.remainingSessions}/${pack.totalSessions} sessions</span>
+                      ${pack.doctorName
+                ? `<span class="medos-session-pack-doctor">${this.escapeHtml(pack.doctorName)}</span>`
+                : ""}
+                    </div>
+                    <div class="medos-session-pack-expiry">
+                      Expires: ${new Date(pack.expiryDate).toLocaleDateString()}
+                    </div>
+                  </div>
+                `)
+                .join("")}
               </div>
             </div>
+            ${hasActivePacks ? '<hr style="margin: 6px 0;" />' : ""}
           `
             : ""}
           
-          <div class="medos-other-options">
-            <label class="medos-form-label">OTHER OPTIONS</label>
+          <div class="medos-options-grid">
+            ${activePack && !multipleActivePacks
+            ? `
+              <div class="medos-option-card ${this.state.bookingOptionType === "session-pack" &&
+                this.state.selectedSessionPack?.id === activePack.id
+                ? "selected"
+                : ""}" data-option="session-pack" data-pack-id="${activePack.id}">
+                <div class="medos-option-icon">📋</div>
+                <h4 class="medos-option-title">Use Session Pack</h4>
+                <p class="medos-option-description">
+                  You have ${activePack.remainingSessions} session${activePack.remainingSessions > 1 ? "s" : ""} remaining
+                </p>
+                <div class="medos-session-pack-badge">
+                  ${this.escapeHtml(activePack.name)}
+                </div>
+              </div>
+            `
+            : ""}
             
-            <div class="medos-option-cards">
-              <div class="medos-option-card ${this.state.bookingOptionType === "new-appointment"
+            <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-icon">📅</div>
+              <h4 class="medos-option-title">Book New Appointment</h4>
+              <p class="medos-option-description">
+                Schedule a single consultation visit
+              </p>
+            </div>
+            
+            ${hasAvailablePackages
+            ? `
               <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>
+                ? "selected"
+                : ""}" data-option="explore-packages">
+                <div class="medos-option-icon">🎁</div>
+                <h4 class="medos-option-title">Explore Packages</h4>
+                <p class="medos-option-description">
+                  View and purchase consultation packages
+                </p>
               </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>
+        <button class="medos-btn medos-btn-secondary" id="medos-btn-back">${VanillaIcons.arrowLeft(14)} Back</button>
+        <button class="medos-btn medos-btn-primary" id="medos-btn-continue" ${this.state.bookingOptionType ? "" : "disabled"}>Next</button>
       </div>
     `;
     }
@@ -975,70 +1085,137 @@ class AppointmentCalendarWidget {
         return `
       <div class="medos-section-card">
         <div class="medos-section-header">
-          ${VanillaIcons.giftBox(14)}
-          <span class="medos-section-title">Explore Session Packs</span>
+          <h3 class="medos-section-title" style="font-size: var(--medos-typography-font-size-xl, 20px);">Explore Packages</h3>
         </div>
         <div class="medos-section-body">
-          <p class="medos-section-description">Select a package to explore on offer</p>
+          <p class="medos-section-description">
+            Choose a package that suits your needs
+          </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>
+          ${packages.length > 0
+            ? `
+            <div class="medos-packages-grid">
+              ${packages
+                .map((pkg) => `
+                <div class="medos-package-card ${this.state.selectedNewPackage?.id === pkg.id ? "selected" : ""}" data-package-id="${pkg.id}">
+                  <h4 class="medos-package-name">${this.escapeHtml(pkg.name)}</h4>
+                  <p class="medos-package-description">
+                    ${this.escapeHtml(pkg.description || "").replace(/\n/g, "<br>")}
+                  </p>
+                  
+                  ${pkg.allowedDoctors && pkg.allowedDoctors.length > 0
+                ? `
+                    <div class="medos-package-doctors">
+                      ${pkg.allowedDoctors
+                    .map((doc) => `
+                        <span class="medos-doctor-badge">
+                          ${this.escapeHtml(doc.fullName)}
+                        </span>
+                      `)
+                    .join("")}
+                    </div>
+                  `
+                : ""}
+                  
+                  ${pkg.allowedConsultationModes &&
+                pkg.allowedConsultationModes.length > 0
+                ? `
+                    <div class="medos-consultation-modes">
+                      ${pkg.allowedConsultationModes
+                    .map((mode) => `
+                        <span class="medos-mode-badge">
+                          ${mode === "ONLINE" ? "🌐 Online" : "🏥 In-Person"}
+                        </span>
+                      `)
+                    .join("")}
+                    </div>
+                  `
+                : ""}
+                  
+                  <div class="medos-package-details">
+                    <span class="medos-package-sessions">
+                      ${pkg.totalSessions || pkg.sessions} session${(pkg.totalSessions || pkg.sessions || 1) > 1 ? "s" : ""}
+                    </span>
+                    <div class="medos-package-price-container">
+                      ${pkg.discountedPrice && pkg.discountedPrice < pkg.price
+                ? `
+                        <span class="medos-original-price">
+                          ₹${pkg.price.toLocaleString()}
+                        </span>
+                        <span class="medos-package-price">
+                          ₹${pkg.discountedPrice.toLocaleString()}
+                        </span>
+                        <span class="medos-per-session-price">
+                          ₹${Math.round(pkg.discountedPrice /
+                    (pkg.totalSessions || pkg.sessions || 1)).toLocaleString()}/session
+                        </span>
+                        ${pkg.discount
+                    ? `
+                          <span class="medos-discount-badge">
+                            ${pkg.discountType === "PERCENTAGE"
+                        ? `${pkg.discount}% OFF`
+                        : `₹${pkg.discount} OFF`}
+                          </span>
+                        `
+                    : ""}
+                      `
+                : `
+                        <span class="medos-package-price">
+                          ₹${pkg.price.toLocaleString()}
+                        </span>
+                        <span class="medos-per-session-price">
+                          ₹${Math.round(pkg.price / (pkg.totalSessions || pkg.sessions || 1)).toLocaleString()}/session
+                        </span>
+                      `}
+                    </div>
+                  </div>
+                  <div class="medos-package-validity">
+                    Valid for ${pkg.validityDays} days
+                  </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>
+              `)
+                .join("")}
+            </div>
+          `
+            : `
+            <div style="text-align: center; padding: 40px 20px; color: var(--medos-color-text-secondary, #6b7280); font-size: var(--medos-typography-font-size-sm, 14px);">
+              <p>No packages available at the moment.</p>
+            </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" ${this.state.selectedNewPackage ? "" : "disabled"}>Continue</button>
+        <button class="medos-btn medos-btn-secondary" id="medos-btn-back">Back</button>
+        <button class="medos-btn medos-btn-primary" id="medos-btn-continue" ${this.state.selectedNewPackage ? "" : "disabled"}>Next</button>
       </div>
     `;
     }
     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;">
+      <div class="medos-section-card">
+        <div class="medos-section-header">
           ${VanillaIcons.mapPin(18)}
-          <h3 style="font-size:18px;font-weight:600;margin:0;">Location & Doctor</h3>
+          <h3 class="medos-section-title">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>
+        <div class="medos-section-body">
+          <div class="medos-form-group">
+            <label class="medos-label">
+              Preferred Location <span class="medos-required">*</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>
+          <div class="medos-form-group">
+            <label class="medos-label">
+              Preferred Doctor <span class="medos-required">*</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>
+          <div class="medos-form-group">
+            <label class="medos-label">
+              Chief Complaint <span class="medos-optional">(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"
@@ -1046,9 +1223,9 @@ class AppointmentCalendarWidget {
           </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 class="medos-actions">
+        <button class="medos-btn medos-btn-secondary" id="medos-btn-back">${VanillaIcons.arrowLeft(14)} Back</button>
+        <button class="medos-btn medos-btn-primary" id="medos-btn-next" ${canProceed ? "" : "disabled"}>Continue</button>
       </div>
     `;
     }
@@ -1072,6 +1249,7 @@ class AppointmentCalendarWidget {
       </div>
     `
             : "";
+        const slotsByPeriod = this.groupSlotsByPeriod(this.state.slots);
         return `
       <div class="medos-section-card">
         <div class="medos-section-header">
@@ -1089,7 +1267,7 @@ class AppointmentCalendarWidget {
                 ${this.state.consultationMode === "OFFLINE" ? "checked" : ""}
                 class="medos-radio-input"
               />
-              <span class="medos-radio-label">Online</span>
+              <span class="medos-radio-label">Offline</span>
             </label>
             <label class="medos-radio-option ${this.state.consultationMode === "ONLINE" ? "selected" : ""}">
               <input 
@@ -1099,7 +1277,7 @@ class AppointmentCalendarWidget {
                 ${this.state.consultationMode === "ONLINE" ? "checked" : ""}
                 class="medos-radio-input"
               />
-              <span class="medos-radio-label">Offline</span>
+              <span class="medos-radio-label">Online</span>
             </label>
           </div>
         </div>
@@ -1120,129 +1298,93 @@ class AppointmentCalendarWidget {
             <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-compact">
-                  ${this.state.slots
-                .map((s) => {
-                const start = new Date(s.start).toLocaleTimeString([], {
-                    hour: "2-digit",
-                    minute: "2-digit",
-                });
-                const end = new Date(s.end).toLocaleTimeString([], {
-                    hour: "2-digit",
-                    minute: "2-digit",
-                });
-                const selected = this.state.selectedSlot?.start === s.start &&
-                    this.state.selectedSlot?.end === s.end;
-                return `
-                      <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>
-              `}
+            : this.renderGroupedSlots(slotsByPeriod)}
           </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-secondary" id="medos-btn-back">${VanillaIcons.arrowLeft(14)} Back</button>
         <button class="medos-btn medos-btn-primary" id="medos-btn-continue" ${this.state.selectedSlot ? "" : "disabled"}>Continue</button>
       </div>
     `;
     }
+    groupSlotsByPeriod(slots) {
+        const groups = {
+            Morning: [],
+            Afternoon: [],
+            Evening: [],
+        };
+        slots.forEach((slot) => {
+            const startTime = new Date(slot.start);
+            const hours = startTime.getHours();
+            let period = "Morning";
+            if (hours >= 12 && hours < 17) {
+                period = "Afternoon";
+            }
+            else if (hours >= 17) {
+                period = "Evening";
+            }
+            groups[period].push(slot);
+        });
+        return groups;
+    }
+    renderGroupedSlots(slotsByPeriod) {
+        const periods = ["Morning", "Afternoon", "Evening"];
+        return `
+      <div class="medos-slots-container-grouped">
+        ${periods
+            .filter((period) => slotsByPeriod[period].length > 0)
+            .map((period) => `
+            <div class="medos-slot-period">
+              <div class="medos-slot-period-header">
+                <span class="medos-slot-period-title">${period.toUpperCase()}</span>
+                <span class="medos-slot-period-count">${slotsByPeriod[period].length} ${slotsByPeriod[period].length === 1 ? "slot" : "slots"}</span>
+              </div>
+              <div class="medos-slot-period-grid">
+                ${slotsByPeriod[period]
+            .map((slot) => {
+            const startDate = new Date(slot.start);
+            const endDate = new Date(slot.end);
+            const startTime = startDate.toLocaleTimeString([], {
+                hour: "2-digit",
+                minute: "2-digit",
+            });
+            const endTime = endDate.toLocaleTimeString([], {
+                hour: "2-digit",
+                minute: "2-digit",
+            });
+            const durationMinutes = Math.round((endDate.getTime() - startDate.getTime()) / (1000 * 60));
+            const selected = this.state.selectedSlot?.start === slot.start &&
+                this.state.selectedSlot?.end === slot.end;
+            return `
+                      <button type="button" class="medos-slot-btn ${selected ? "selected" : ""}" 
+                           data-slot-id="${this.escapeHtml(slot.id || `${slot.start}-${slot.end}`)}" 
+                           data-slot-start="${this.escapeHtml(slot.start)}" 
+                           data-slot-end="${this.escapeHtml(slot.end)}"
+                           ${selected
+                ? 'aria-pressed="true"'
+                : 'aria-pressed="false"'}
+                           aria-label="Select ${startTime} to ${endTime} time slot">
+                        <span class="medos-slot-time-range">
+                          <span class="medos-slot-start-time">${startTime}</span>
+                          <span class="medos-slot-separator">–</span>
+                          <span class="medos-slot-end-time">${endTime}</span>
+                        </span>
+                        <span class="medos-slot-duration">${durationMinutes}m</span>
+                      </button>
+                    `;
+        })
+            .join("")}
+              </div>
+            </div>
+          `)
+            .join("")}
+      </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,
-                    },
-                },
-            ];
+        const hasVerifiedPatients = this.state.verifiedPatients.length > 0;
         return `
       <div class="medos-section-card">
         <div class="medos-section-header">
@@ -1250,25 +1392,40 @@ class AppointmentCalendarWidget {
           <span class="medos-section-title">Select Patient</span>
         </div>
         <div class="medos-section-body">
-          <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>
+          ${hasVerifiedPatients
+            ? `
+            <div class="medos-patient-list">
+              ${this.state.verifiedPatients
+                .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>
+                    ${patient.age
+                ? `<div class="medos-patient-age">Age: ${patient.age}</div>`
+                : ""}
+                  </div>
+                  <div class="medos-patient-select">select</div>
                 </div>
-                <div class="medos-patient-select">select</div>
-              </div>
-            `)
-            .join("")}
-          </div>
+              `)
+                .join("")}
+            </div>
+          `
+            : `
+            <div class="medos-no-patients">
+              <p>No existing patients found for this phone number.</p>
+            </div>
+          `}
           
           <button class="medos-add-patient-btn" id="medos-btn-add-patient">
             ${VanillaIcons.plus(16)} New Patient
@@ -1276,8 +1433,7 @@ class AppointmentCalendarWidget {
         </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-secondary" id="medos-btn-back">${VanillaIcons.arrowLeft(14)} Back</button>
         <button class="medos-btn medos-btn-primary" id="medos-btn-continue" ${this.state.selectedPatient ? "" : "disabled"}>Continue</button>
       </div>
     `;
@@ -1302,7 +1458,7 @@ class AppointmentCalendarWidget {
           <div class="medos-form-row">
             <div class="medos-form-field">
               <label class="medos-form-label">
-                First Name <span style="color: #EF4444;">*</span>
+                First Name <span class="medos-required">*</span>
               </label>
               <input
                 type="text"
@@ -1314,7 +1470,7 @@ class AppointmentCalendarWidget {
             </div>
             <div class="medos-form-field">
               <label class="medos-form-label">
-                Last Name <span style="color: #EF4444;">*</span>
+                Last Name <span class="medos-required">*</span>
               </label>
               <input
                 type="text"
@@ -1329,7 +1485,7 @@ class AppointmentCalendarWidget {
           <div class="medos-form-row">
             <div class="medos-form-field">
               <label class="medos-form-label">
-                Age <span style="color: #EF4444;">*</span>
+                Age <span class="medos-required">*</span>
               </label>
               <input
                 type="number"
@@ -1356,7 +1512,7 @@ class AppointmentCalendarWidget {
           <div class="medos-form-row">
             <div class="medos-form-field">
               <label class="medos-form-label">
-                Gender <span style="color: #EF4444;">*</span>
+                Gender <span class="medos-required">*</span>
               </label>
               <div id="medos-gender-select-container"></div>
             </div>
@@ -1366,22 +1522,6 @@ class AppointmentCalendarWidget {
             </div>
           </div>
 
-          <div class="medos-form-row">
-            <div class="medos-form-field">
-              <label class="medos-form-label">Date of Birth</label>
-              <input
-                type="date"
-                class="medos-appointment-input"
-                id="medos-patient-dob"
-                value="${this.escapeHtml(this.state.patientDob)}"
-              />
-              ${this.state.patientDob &&
-            this.state.patientDob.trim() !== "" &&
-            !this.isValidDateOfBirth(this.state.patientDob)
-            ? this.getDateOfBirthErrorMessage(this.state.patientDob)
-            : ""}
-            </div>
-          </div>
         </div>
       </div>
 
@@ -1394,7 +1534,7 @@ class AppointmentCalendarWidget {
         <div class="medos-section-body">
           <div class="medos-form-field">
             <label class="medos-form-label">
-              Address <span style="color: #EF4444;">*</span>
+              Address <span class="medos-required">*</span>
             </label>
             <input
               type="text"
@@ -1408,7 +1548,7 @@ class AppointmentCalendarWidget {
           <div class="medos-form-row">
             <div class="medos-form-field">
               <label class="medos-form-label">
-                City <span style="color: #EF4444;">*</span>
+                City <span class="medos-required">*</span>
               </label>
               <input
                 type="text"
@@ -1420,7 +1560,7 @@ class AppointmentCalendarWidget {
             </div>
             <div class="medos-form-field">
               <label class="medos-form-label">
-                State <span style="color: #EF4444;">*</span>
+                State <span class="medos-required">*</span>
               </label>
               <input
                 type="text"
@@ -1435,7 +1575,7 @@ class AppointmentCalendarWidget {
           <div class="medos-form-row">
             <div class="medos-form-field">
               <label class="medos-form-label">
-                Country <span style="color: #EF4444;">*</span>
+                Country <span class="medos-required">*</span>
               </label>
               <input
                 type="text"
@@ -1447,7 +1587,7 @@ class AppointmentCalendarWidget {
             </div>
             <div class="medos-form-field">
               <label class="medos-form-label">
-                Zipcode <span style="color: #EF4444;">*</span>
+                Zipcode <span class="medos-required">*</span>
               </label>
               <input
                 type="text"
@@ -1473,8 +1613,7 @@ class AppointmentCalendarWidget {
       </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-secondary" id="medos-btn-back">${VanillaIcons.arrowLeft(14)} Back</button>
         <button class="medos-btn medos-btn-primary" id="medos-btn-continue" ${isFormValid ? "" : "disabled"}>Continue</button>
       </div>
     `;
@@ -1482,139 +1621,223 @@ class AppointmentCalendarWidget {
     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" &&
+        const usingSessionPack = this.state.bookingType === "USE_ACTIVE_PACKAGE" &&
             this.state.selectedSessionPack;
-        const usingNewPackage = this.state.bookingOptionType === "explore-packages" &&
+        const usingNewPackage = this.state.bookingType === "PACKAGE_PURCHASE" &&
             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";
+        const isPackageBooking = this.state.bookingType === "PACKAGE_PURCHASE" ||
+            this.state.bookingType === "USE_ACTIVE_PACKAGE";
+        const getDuration = () => {
+            if (this.state.selectedSlot) {
+                return calculateDuration(this.state.selectedSlot.start, this.state.selectedSlot.end);
+            }
+            return 60;
+        };
+        const getPaymentInfo = () => {
+            if (usingSessionPack) {
+                return {
+                    type: "Session Pack",
+                    name: this.state.selectedSessionPack?.name || "Session Pack",
+                    amount: "Prepaid",
+                    remaining: `${(this.state.selectedSessionPack?.remainingSessions || 1) - 1} sessions remaining after this appointment`,
+                };
+            }
+            else if (usingNewPackage) {
+                return {
+                    type: "New Package",
+                    name: this.state.selectedNewPackage?.name || "Package",
+                    amount: `₹${this.state.selectedNewPackage?.price?.toLocaleString() || 0}`,
+                    remaining: `${this.state.selectedNewPackage?.totalSessions ||
+                        this.state.selectedNewPackage?.sessions ||
+                        1} sessions included`,
+                };
+            }
+            else {
+                return {
+                    type: "Single Appointment",
+                    name: this.state.consultationMode === "ONLINE"
+                        ? "Online Consultation"
+                        : "In-Person Visit",
+                    amount: this.state.consultationCharge
+                        ? `₹${this.state.consultationCharge}`
+                        : "Pay at clinic",
+                };
+            }
+        };
+        const paymentInfo = getPaymentInfo();
+        const patient = this.state.selectedPatient;
+        const patientName = patient
+            ? `${patient.firstName} ${patient.lastName}`
+            : this.state.patientName || "New 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-container">
+        <h3 class="medos-summary-title">Appointment Summary</h3>
+        <p class="medos-summary-subtitle">
+          Please review your appointment details before confirming
+        </p>
+
+        <!-- Patient Information -->
         <div class="medos-summary-section">
-          <label class="medos-form-label">REVIEW APPOINTMENT DETAILS</label>
-          
-          <div class="medos-summary-grid">
+          <h4 class="medos-summary-section-title">👤 Patient Information</h4>
+          <div class="medos-summary-card">
             <div class="medos-summary-row">
-              <span class="medos-summary-label">Patient:</span>
+              <span class="medos-summary-label">Name</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>`
+            ${patient?.email || this.state.patientEmail
+            ? `
+              <div class="medos-summary-row">
+                <span class="medos-summary-label">Email</span>
+                <span class="medos-summary-value">${this.escapeHtml(patient?.email || this.state.patientEmail || "")}</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>
+              <span class="medos-summary-label">Phone</span>
+              <span class="medos-summary-value">${this.escapeHtml(this.state.countryCode)} ${this.escapeHtml(this.state.patientPhone)}</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>`
+            ${patient?.age || this.state.patientAge
+            ? `
+              <div class="medos-summary-row">
+                <span class="medos-summary-label">Age</span>
+                <span class="medos-summary-value">${patient?.age || this.state.patientAge} years</span>
+              </div>
+            `
+            : ""}
+            ${patient?.bloodGroup || this.state.bloodGroup
+            ? `
+              <div class="medos-summary-row">
+                <span class="medos-summary-label">Blood Group</span>
+                <span class="medos-summary-value">${this.escapeHtml(patient?.bloodGroup || this.state.bloodGroup || "")}</span>
+              </div>
+            `
             : ""}
+          </div>
+        </div>
+
+        <!-- Appointment Details -->
+        <div class="medos-summary-section">
+          <h4 class="medos-summary-section-title">📅 Appointment Details</h4>
+          <div class="medos-summary-card">
             <div class="medos-summary-row">
-              <span class="medos-summary-label">Date & Time:</span>
-              <span class="medos-summary-value">${appointmentDate}${startTime ? `, ${startTime}` : ""}</span>
+              <span class="medos-summary-label">Date</span>
+              <span class="medos-summary-value">${formatDate(this.state.selectedDate)}</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>
+              <span class="medos-summary-label">Time</span>
+              <span class="medos-summary-value">${this.state.selectedSlot
+            ? `${formatTime(this.state.selectedSlot.start)} - ${formatTime(this.state.selectedSlot.end)}`
+            : "Not selected"}</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>
+              <span class="medos-summary-label">Duration</span>
+              <span class="medos-summary-value">~${getDuration()} minutes</span>
             </div>
             <div class="medos-summary-row">
-              <span class="medos-summary-label">Sessions:</span>
-              <span class="medos-summary-value">${sessionInfo || "1 consultation"}</span>
+              <span class="medos-summary-label">Type</span>
+              <span class="medos-summary-value">${this.state.consultationMode === "ONLINE"
+            ? "Online Consultation"
+            : "In-Person Visit"}</span>
             </div>
-            ${usingSessionPack || usingNewPackage
+          </div>
+        </div>
+
+        <!-- Doctor & Location -->
+        <div class="medos-summary-section">
+          <h4 class="medos-summary-section-title">🏥 Doctor & Location</h4>
+          <div class="medos-summary-card">
+            ${selectedDoctor
             ? `
               <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>
+                <span class="medos-summary-label">Doctor</span>
+                <span class="medos-summary-value">${this.escapeHtml(selectedDoctor.name)}${selectedDoctor.specialty
+                ? ` • ${this.escapeHtml(selectedDoctor.specialty)}`
+                : ""}</span>
               </div>
+            `
+            : ""}
+            ${selectedAddress
+            ? `
               <div class="medos-summary-row">
-                <span class="medos-summary-label">Date of Expiry:</span>
-                <span class="medos-summary-value medos-expiry">${dateOfExpiry}</span>
+                <span class="medos-summary-label">Location</span>
+                <span class="medos-summary-value">${this.escapeHtml(selectedAddress.label || "Unknown Location")}</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>
+
+        <!-- Payment Information -->
+        <div class="medos-summary-section">
+          <h4 class="medos-summary-section-title">💳 Payment</h4>
+          <div class="medos-summary-card">
+            <div class="medos-summary-row">
+              <span class="medos-summary-label">Booking Type</span>
+              <span class="medos-summary-value">${paymentInfo.type}</span>
+            </div>
+            <div class="medos-summary-row">
+              <span class="medos-summary-label">${usingSessionPack ? "Pack" : "Service"}</span>
+              <span class="medos-summary-value">${paymentInfo.name}</span>
+            </div>
+            ${isPackageBooking && this.state.selectedNewPackage
+            ? `
+              <div class="medos-summary-row medos-summary-total-row">
+                <span class="medos-summary-total-label">Amount</span>
+                <div class="medos-summary-price-container">
+                  ${this.state.selectedNewPackage.discountedPrice &&
+                this.state.selectedNewPackage.discountedPrice <
+                    this.state.selectedNewPackage.price
+                ? `
+                    <span class="medos-summary-strikethrough-price">
+                      ₹${this.state.selectedNewPackage.price.toLocaleString()}
+                    </span>
+                    <span class="medos-summary-total-value">
+                      ₹${this.state.selectedNewPackage.discountedPrice.toLocaleString()}
+                    </span>
+                    ${this.state.selectedNewPackage.discount
+                    ? `
+                      <span class="medos-summary-discount-badge">
+                        ${this.state.selectedNewPackage.discountType ===
+                        "PERCENTAGE"
+                        ? `${this.state.selectedNewPackage.discount}% OFF`
+                        : `₹${this.state.selectedNewPackage.discount} OFF`}
+                      </span>
+                    `
+                    : ""}
+                  `
+                : `
+                    <span class="medos-summary-total-value">
+                      ₹${this.state.selectedNewPackage.price.toLocaleString()}
+                    </span>
+                  `}
+                </div>
+              </div>
+            `
+            : !usingSessionPack
+                ? `
+              <div class="medos-summary-row medos-summary-total-row">
+                <span class="medos-summary-total-label">Amount</span>
+                <span class="medos-summary-total-value">${paymentInfo.amount}</span>
+              </div>
+            `
+                : `
+              <div class="medos-summary-row medos-summary-total-row">
+                <span class="medos-summary-total-label">Amount</span>
+                <span class="medos-summary-total-value">${paymentInfo.amount}</span>
+              </div>
+            `}
+            ${paymentInfo.remaining
+            ? `
+              <div class="medos-summary-remaining-info">${paymentInfo.remaining}</div>
+            `
+            : ""}
           </div>
-          <div class="medos-total-amount">₹${totalAmount.toLocaleString()}</div>
         </div>
-        
+
+        <!-- Actions -->
         <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>
+          <button class="medos-btn medos-btn-secondary" id="medos-btn-back">Back</button>
+          <button class="medos-btn medos-btn-primary" id="medos-btn-confirm" ${this.state.loading ? "disabled" : ""}>${this.state.loading ? "Confirming..." : "Confirm Appointment"}</button>
         </div>
       </div>
     `;
@@ -1726,7 +1949,8 @@ class AppointmentCalendarWidget {
         });
         const slotCards = this.container.querySelectorAll(".medos-slot-card, .medos-slot-btn");
         slotCards.forEach((card) => {
-            card.addEventListener("click", () => {
+            card.addEventListener("click", (e) => {
+                e.preventDefault();
                 const slotId = card.dataset.slotId;
                 const slotStart = card.dataset.slotStart;
                 const slotEnd = card.dataset.slotEnd;
@@ -1877,82 +2101,23 @@ class AppointmentCalendarWidget {
                 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;
+                const packId = card.dataset.packId
+                    ? Number.parseInt(card.dataset.packId, 10)
+                    : null;
                 if (option === "new-appointment" ||
                     option === "session-pack" ||
                     option === "explore-packages") {
                     this.state.bookingOptionType = option;
+                    if (option === "session-pack" && packId) {
+                        const pack = this.state.userSessionPacks.find((p) => p.id === packId);
+                        if (pack) {
+                            this.state.selectedSessionPack = pack;
+                        }
+                    }
                     this.render();
                 }
             });
@@ -1999,8 +2164,7 @@ class AppointmentCalendarWidget {
                     : this.getPlaceholderPatients();
                 const patient = patients.find((p) => p.id === patientId);
                 if (patient) {
-                    this.state.selectedPatient = patient;
-                    this.render();
+                    this.handleSelectExistingPatient(patient);
                 }
             });
         });
@@ -2024,10 +2188,6 @@ class AppointmentCalendarWidget {
         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", () => {
@@ -2080,12 +2240,46 @@ class AppointmentCalendarWidget {
         const addPatientBtn = this.container.querySelector("#medos-btn-add-patient");
         if (addPatientBtn) {
             addPatientBtn.addEventListener("click", () => {
-                this.state.selectedPatient = null;
-                this.state.useExistingPatient = false;
-                this.goToNext();
+                this.handleProceedAsNewPatient();
             });
         }
     }
+    handleSelectExistingPatient(patient) {
+        this.state.selectedPatient = patient;
+        this.state.useExistingPatient = true;
+        this.state.patientName = `${patient.firstName} ${patient.lastName}`;
+        this.state.patientEmail = patient.email;
+        this.state.patientAge = patient.age.toString();
+        this.state.patientGender = patient.gender;
+        this.state.bloodGroup = patient.bloodGroup;
+        if (patient.address) {
+            this.state.patientAddress = patient.address.addressLine1;
+            this.state.patientCity = patient.address.city;
+            this.state.patientState = patient.address.state;
+            this.state.patientCountry = patient.address.country;
+            this.state.patientZipcode = patient.address.zipcode;
+            this.state.patientLandmark = patient.address.landmark || "";
+        }
+        this.state.step = 6;
+        this.render();
+    }
+    handleProceedAsNewPatient() {
+        this.state.selectedPatient = null;
+        this.state.useExistingPatient = false;
+        this.state.patientName = "";
+        this.state.patientEmail = "";
+        this.state.patientAge = "";
+        this.state.patientGender = "";
+        this.state.bloodGroup = "";
+        this.state.patientAddress = "";
+        this.state.patientCity = "";
+        this.state.patientState = "";
+        this.state.patientCountry = "";
+        this.state.patientZipcode = "";
+        this.state.patientLandmark = "";
+        this.state.step = 5;
+        this.render();
+    }
     getPlaceholderPatients() {
         return [
             {
@@ -2265,6 +2459,68 @@ class AppointmentCalendarWidget {
         }
         this.setState({ error: errorMessage });
     }
+    async handleSubmitAppointment() {
+        await this.submitAppointment();
+    }
+    async handleOtpVerification(otpCode) {
+        this.state.otpCode = otpCode;
+        await this.verifyOtp();
+        if (this.state.otpVerified) {
+            this.goToNext();
+        }
+    }
+    handleAddressSelect(addressId) {
+        return this.handleAddressChange(addressId);
+    }
+    handleDoctorSelect(doctorId) {
+        this.state.selectedDoctor = doctorId;
+        const selectedDoc = this.doctors.find((d) => d.id === doctorId);
+        if (selectedDoc?.consultationCharge) {
+            this.state.consultationCharge = selectedDoc.consultationCharge;
+        }
+        this.render();
+    }
+    handleDateSelect(date) {
+        this.state.selectedDate = date;
+        this.loadSlots();
+    }
+    handleSlotSelect(slot) {
+        this.state.selectedSlot = slot;
+        this.render();
+    }
+    handleSessionPackSelect(sessionPack) {
+        this.state.selectedSessionPack = sessionPack;
+        this.state.bookingOptionType = "session-pack";
+        this.render();
+    }
+    handleExplorePackages() {
+        this.state.bookingOptionType = "explore-packages";
+        this.state.showPackageExplorer = true;
+        this.render();
+    }
+    handlePackageSelect(packageItem) {
+        this.state.selectedNewPackage = packageItem;
+        this.render();
+    }
+    handleNewAppointmentSelect() {
+        this.state.bookingOptionType = "new-appointment";
+        this.render();
+    }
+    handlePatientSelect(patient) {
+        this.handleSelectExistingPatient(patient);
+    }
+    handleNewPatient() {
+        this.handleProceedAsNewPatient();
+    }
+    goToNextStep() {
+        this.goToNext();
+    }
+    goBackStep() {
+        this.goBack();
+    }
+    getState() {
+        return { ...this.state };
+    }
     destroy() {
         this.mounted = false;
         this.container.innerHTML = "";