medos-sdk 1.0.2 → 1.1.0

package/dist/vanilla/AppointmentCalendarWidget.js

@@ -1,40 +1,13 @@
-import { AppointmentService } from "../services/AppointmentService";
+import { AppointmentService, } from "../services/AppointmentService";
 import { PatientService } from "../services/PatientService";
 import { MedosClient } from "../client/MedosClient";
+import { INITIAL_STATE, } from "../components/types";
+import { validatePhoneNumber, validateCountryCode, } from "../components/validation";
+import { formatDateToISO, parsePatientName } from "../components/utils";
 class AppointmentCalendarWidget {
     constructor(container, options) {
         this.mounted = true;
-        this.step = 0;
-        this.addresses = [];
-        this.addressDoctorsMap = {};
-        this.selectedAddress = null;
-        this.workspaceId = null;
         this.doctors = [];
-        this.selectedDoctor = null;
-        this.date = "";
-        this.slots = [];
-        this.selectedSlot = null;
-        this.loading = false;
-        this.error = null;
-        this.patientName = "";
-        this.patientAge = "";
-        this.patientAddress = "";
-        this.patientCity = "";
-        this.patientState = "";
-        this.patientCountry = "";
-        this.patientZipcode = "";
-        this.patientLandmark = "";
-        this.patientEmail = "";
-        this.patientGender = "";
-        this.problemFacing = "";
-        this.consultationCharge = "";
-        this.countryCode = "+91";
-        this.patientPhone = "";
-        this.otpCode = "";
-        this.otpSent = false;
-        this.otpVerified = false;
-        this.otpSending = false;
-        this.otpVerifying = false;
         if (typeof container === "string") {
             const el = document.getElementById(container);
             if (!el) {
@@ -46,19 +19,18 @@ class AppointmentCalendarWidget {
             this.container = container;
         }
         this.options = options;
+        this.state = { ...INITIAL_STATE };
         this.init();
     }
     async init() {
         if (this.options.apiKey) {
             await MedosClient.init({
                 apiKey: this.options.apiKey,
-                baseURL: this.options.baseURL,
             });
         }
         else if (this.options.sessionToken) {
             await MedosClient.initWithSession({
                 sessionToken: this.options.sessionToken,
-                baseURL: this.options.baseURL,
             });
         }
         else {
@@ -68,19 +40,18 @@ class AppointmentCalendarWidget {
         this.render();
     }
     async loadAddresses() {
-        this.setLoading(true);
-        this.setError(null);
+        this.setState({ loading: true, error: null });
         try {
             const addrResp = await AppointmentService.getAddresses();
             if (addrResp && Array.isArray(addrResp.addresses)) {
                 const fetchedAddresses = addrResp.addresses;
                 if (addrResp.workspaceId) {
-                    this.workspaceId = addrResp.workspaceId;
+                    this.state.workspaceId = addrResp.workspaceId;
                 }
                 if (fetchedAddresses.length > 0) {
                     const addrMap = {};
                     const mappedAddrs = fetchedAddresses.map((a, idx) => {
-                        const id = String(a.id ?? idx);
+                        const id = Number(a.id ?? idx);
                         const label = a.completeAddress ?? a.label ?? a.address ?? `Address ${idx + 1}`;
                         const docs = Array.isArray(a.doctors)
                             ? a.doctors
@@ -88,233 +59,242 @@ class AppointmentCalendarWidget {
                         addrMap[id] = docs || [];
                         return { id, label };
                     });
-                    this.addresses = mappedAddrs;
-                    this.addressDoctorsMap = addrMap;
+                    this.state.addresses = mappedAddrs;
+                    this.state.addressDoctorsMap = addrMap;
                     const anyDoctorsExist = Object.values(addrMap).some((arr) => Array.isArray(arr) && arr.length > 0);
                     if (mappedAddrs.length === 1) {
                         const only = mappedAddrs[0];
-                        this.selectedAddress = only.id;
+                        this.state.selectedAddress = only.id;
                         const docsForAddr = addrMap[only.id] || [];
                         if (docsForAddr.length > 0) {
                             this.doctors = docsForAddr;
                             if (docsForAddr.length === 1) {
-                                this.selectedDoctor = docsForAddr[0].id;
-                                this.step = 1;
+                                this.state.selectedDoctor = docsForAddr[0].id;
+                                this.state.step = 1;
                             }
                             else {
-                                this.step = 0;
+                                this.state.step = 0;
                             }
                         }
                         else {
                             if (anyDoctorsExist) {
-                                this.setError("No doctors at this address. Please choose a different address.");
+                                this.setState({
+                                    error: "No doctors at this address. Please choose a different address.",
+                                });
                                 this.doctors = [];
-                                this.step = 0;
+                                this.state.step = 0;
                             }
                             else {
-                                this.setError("No doctors available for the selected location(s).");
+                                this.setState({
+                                    error: "No doctors available for the selected location(s).",
+                                });
                                 this.doctors = [];
-                                this.step = 0;
+                                this.state.step = 0;
                             }
                         }
                     }
                     else {
-                        this.step = 0;
+                        this.state.step = 0;
                     }
                 }
                 else {
-                    this.setError("No addresses or doctors available.");
-                    this.addresses = [];
-                    this.addressDoctorsMap = {};
+                    this.setState({ error: "No addresses or doctors available." });
+                    this.state.addresses = [];
+                    this.state.addressDoctorsMap = {};
                     this.doctors = [];
-                    this.step = 0;
+                    this.state.step = 0;
                 }
             }
         }
         catch (e) {
             const msg = e.message || "Failed to load addresses";
-            this.setError(msg);
+            this.setState({ error: msg });
             this.options.onError?.(e);
         }
         finally {
-            this.setLoading(false);
+            this.setState({ loading: false });
         }
     }
     async handleAddressChange(addressId) {
-        this.selectedAddress = addressId;
+        this.state.selectedAddress = addressId;
         if (!addressId) {
             this.doctors = [];
-            this.selectedDoctor = null;
+            this.state.selectedDoctor = null;
             this.render();
             return;
         }
-        this.setLoading(true);
-        this.setError(null);
+        this.setState({ loading: true, error: null });
         try {
-            const docsForAddr = this.addressDoctorsMap[addressId] ?? [];
+            const docsForAddr = this.state.addressDoctorsMap[addressId] ?? [];
             if (docsForAddr.length > 0) {
                 this.doctors = docsForAddr;
                 if (docsForAddr.length === 1) {
-                    this.selectedDoctor = docsForAddr[0].id;
-                    this.step = 1;
+                    this.state.selectedDoctor = docsForAddr[0].id;
+                    this.state.step = 1;
                 }
                 else {
-                    this.selectedDoctor = null;
+                    this.state.selectedDoctor = null;
                 }
             }
             else {
-                const otherHasDoctors = Object.entries(this.addressDoctorsMap).some(([key, docs]) => key !== addressId && Array.isArray(docs) && docs.length > 0);
+                const otherHasDoctors = Object.entries(this.state.addressDoctorsMap).some(([key, docs]) => Number(key) !== addressId && Array.isArray(docs) && docs.length > 0);
                 this.doctors = [];
-                this.selectedDoctor = null;
+                this.state.selectedDoctor = null;
                 if (otherHasDoctors) {
-                    this.setError("No doctors at this address. Please select a different address.");
+                    this.setState({
+                        error: "No doctors at this address. Please select a different address.",
+                    });
                 }
                 else {
-                    this.setError("No doctors available for the selected location(s).");
+                    this.setState({
+                        error: "No doctors available for the selected location(s).",
+                    });
                 }
             }
         }
         catch (e) {
-            this.setError(e.message || "Failed to load doctors for address");
+            this.setState({
+                error: e.message || "Failed to load doctors for address",
+            });
         }
         finally {
-            this.setLoading(false);
+            this.setState({ loading: false });
             this.render();
         }
     }
     async loadSlots() {
-        if (!this.workspaceId || !this.selectedAddress || !this.selectedDoctor || !this.date) {
-            this.slots = [];
-            this.selectedSlot = null;
+        const dateStr = formatDateToISO(this.state.selectedDate);
+        if (!this.state.workspaceId ||
+            !this.state.selectedAddress ||
+            !this.state.selectedDoctor ||
+            !dateStr) {
+            this.state.slots = [];
+            this.state.selectedSlot = null;
             this.render();
             return;
         }
-        this.setLoading(true);
-        this.setError(null);
+        this.setState({ loading: true, error: null });
         try {
-            const s = await AppointmentService.fetchSlots(this.workspaceId, this.selectedAddress, this.selectedDoctor, this.date);
-            this.slots = s || [];
+            const s = await AppointmentService.fetchSlots(this.state.workspaceId, this.state.selectedAddress, this.state.selectedDoctor, dateStr);
+            this.state.slots = s || [];
         }
         catch (e) {
-            this.setError(e.message || "Failed to load slots");
+            this.setState({ error: e.message || "Failed to load slots" });
         }
         finally {
-            this.setLoading(false);
+            this.setState({ loading: false });
             this.render();
         }
     }
-    validatePhoneNumber(phone) {
-        const cleaned = phone.replace(/\D/g, "");
-        return cleaned.length >= 7 && cleaned.length <= 15;
-    }
-    validateCountryCode(code) {
-        return /^\+[1-9]\d{0,3}$/.test(code);
-    }
     canProceedFromMergedStep() {
-        if (this.addresses.length === 0 || this.doctors.length === 0)
+        if (this.state.addresses.length === 0 || this.doctors.length === 0)
             return false;
-        if (this.addresses.length > 1 && !this.selectedAddress)
+        if (this.state.addresses.length > 1 && !this.state.selectedAddress)
             return false;
-        if (this.doctors.length > 1 && !this.selectedDoctor)
+        if (this.doctors.length > 1 && !this.state.selectedDoctor)
             return false;
         return true;
     }
     async sendOtp() {
-        this.setError(null);
-        if (!this.countryCode) {
-            this.setError("Please enter country code.");
+        this.setState({ error: null });
+        if (!this.state.countryCode) {
+            this.setState({ error: "Please enter country code." });
             return;
         }
-        if (!this.validateCountryCode(this.countryCode)) {
-            this.setError("Please enter a valid country code (e.g., +91, +1).");
+        if (!validateCountryCode(this.state.countryCode)) {
+            this.setState({
+                error: "Please enter a valid country code (e.g., +91, +1).",
+            });
             return;
         }
-        if (!this.patientPhone) {
-            this.setError("Please enter phone number.");
+        if (!this.state.patientPhone) {
+            this.setState({ error: "Please enter phone number." });
             return;
         }
-        if (!this.validatePhoneNumber(this.patientPhone)) {
-            this.setError("Please enter a valid phone number (7-15 digits).");
+        if (!validatePhoneNumber(this.state.patientPhone)) {
+            this.setState({
+                error: "Please enter a valid phone number (7-15 digits).",
+            });
             return;
         }
-        this.otpSending = true;
+        this.setState({ otpSending: true });
         this.render();
         try {
             await PatientService.sendPhoneVerificationOtp({
-                countryCode: this.countryCode,
-                phoneNumber: this.patientPhone,
+                countryCode: this.state.countryCode,
+                phoneNumber: this.state.patientPhone,
             });
-            this.otpSent = true;
-            this.setError(null);
+            this.setState({ otpSent: true, error: null });
         }
         catch (e) {
             const msg = e.message || "Failed to send OTP";
-            this.setError(msg);
+            this.setState({ error: msg });
             this.options.onError?.(e);
         }
         finally {
-            this.otpSending = false;
+            this.setState({ otpSending: false });
             this.render();
         }
     }
     async verifyOtp() {
-        this.setError(null);
-        if (!this.countryCode || !this.patientPhone || !this.otpCode) {
-            this.setError("Please enter all required fields.");
+        this.setState({ error: null });
+        if (!this.state.countryCode ||
+            !this.state.patientPhone ||
+            !this.state.otpCode) {
+            this.setState({ error: "Please enter all required fields." });
             return;
         }
-        if (this.otpCode.length !== 6) {
-            this.setError("Please enter a 6-digit OTP code.");
+        if (this.state.otpCode.length !== 6) {
+            this.setState({ error: "Please enter a 6-digit OTP code." });
             return;
         }
-        this.otpVerifying = true;
+        this.setState({ otpVerifying: true });
         this.render();
         try {
             await PatientService.verifyPhoneVerificationOtp({
-                countryCode: this.countryCode,
-                phoneNumber: this.patientPhone,
-                otpCode: this.otpCode,
+                countryCode: this.state.countryCode,
+                phoneNumber: this.state.patientPhone,
+                otpCode: this.state.otpCode,
             });
-            this.otpVerified = true;
-            this.setError(null);
+            this.setState({ otpVerified: true, error: null });
         }
         catch (e) {
             const msg = e.message || "Invalid OTP code";
-            this.setError(msg);
+            this.setState({ error: msg });
             this.options.onError?.(e);
         }
         finally {
-            this.otpVerifying = false;
+            this.setState({ otpVerifying: false });
             this.render();
         }
     }
     async submitAppointment() {
-        this.setError(null);
-        if (!this.selectedDoctor ||
-            !this.selectedSlot ||
-            !this.workspaceId ||
-            !this.selectedAddress ||
-            !this.patientAddress ||
-            !this.patientCity ||
-            !this.patientState ||
-            !this.patientCountry ||
-            !this.patientZipcode) {
-            this.setError("Please ensure all required fields are complete.");
+        this.setState({ error: null });
+        if (!this.state.selectedDoctor ||
+            !this.state.selectedSlot ||
+            !this.state.workspaceId ||
+            !this.state.selectedAddress ||
+            !this.state.patientAddress ||
+            !this.state.patientCity ||
+            !this.state.patientState ||
+            !this.state.patientCountry ||
+            !this.state.patientZipcode) {
+            this.setState({
+                error: "Please ensure all required fields are complete.",
+            });
             return;
         }
-        if (!this.otpVerified) {
-            this.setError("Please verify your phone number first.");
+        if (!this.state.otpVerified) {
+            this.setState({ error: "Please verify your phone number first." });
             return;
         }
-        this.setLoading(true);
+        this.setState({ loading: true });
         this.render();
         try {
-            const nameParts = (this.patientName || "Patient").trim().split(/\s+/);
-            const firstName = nameParts[0] || "Patient";
-            const lastName = nameParts.slice(1).join(" ") || "";
-            const startDate = new Date(this.selectedSlot.start);
-            const endDate = new Date(this.selectedSlot.end);
-            const appointmentDate = startDate.toISOString().split("T")[0];
+            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");
@@ -323,112 +303,92 @@ class AppointmentCalendarWidget {
             const fromDateTimeTs = formatTime(startDate);
             const toDateTimeTs = formatTime(endDate);
             const patientAddressPayload = {
-                addressLine1: this.patientAddress,
-                city: this.patientCity,
-                state: this.patientState,
-                country: this.patientCountry,
-                zipcode: this.patientZipcode,
-                landmark: this.patientLandmark || undefined,
+                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,
             };
             await AppointmentService.createAppointment({
-                workspaceId: this.workspaceId,
-                workspaceAddressId: this.selectedAddress,
-                doctorId: this.selectedDoctor,
+                workspaceId: this.state.workspaceId,
+                workspaceAddressId: this.state.selectedAddress,
+                doctorId: this.state.selectedDoctor,
                 mode: "OFFLINE",
                 appointmentDate,
                 fromDateTimeTs,
                 toDateTimeTs,
-                consultationCharge: this.consultationCharge || "0",
+                consultationCharge: this.state.consultationCharge || "0",
                 type: "CONSULTATION",
                 source: "SDK_POWERED_WEBSITE",
                 patientPayload: {
                     firstName,
                     lastName,
-                    email: this.patientEmail || undefined,
-                    countryCode: this.countryCode,
-                    phoneNumber: this.patientPhone,
-                    age: this.patientAge ? parseInt(this.patientAge, 10) : undefined,
-                    gender: this.patientGender
-                        ? this.patientGender.toUpperCase()
+                    email: this.state.patientEmail || 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,
                 },
                 patientAddress: patientAddressPayload,
             });
-            this.step = 5;
+            this.state.step = 5;
             this.options.onSuccess?.();
         }
         catch (e) {
             const msg = e.message || "Failed to create appointment";
-            this.setError(msg);
+            this.setState({ error: msg });
             this.options.onError?.(e);
         }
         finally {
-            this.setLoading(false);
+            this.setState({ loading: false });
             this.render();
         }
     }
     goToNext() {
-        if (this.step === 0) {
-            if (this.addresses.length > 1 && !this.selectedAddress)
+        if (this.state.step === 0) {
+            if (this.state.addresses.length > 1 && !this.state.selectedAddress)
                 return;
-            if (this.doctors.length > 1 && !this.selectedDoctor)
+            if (this.doctors.length > 1 && !this.state.selectedDoctor)
                 return;
-            this.step = 1;
+            this.state.step = 1;
             this.render();
             return;
         }
-        if (this.step === 1 && this.date) {
-            this.step = 2;
+        const dateStr = formatDateToISO(this.state.selectedDate);
+        if (this.state.step === 1 && dateStr) {
+            this.state.step = 2;
             this.loadSlots();
             return;
         }
-        if (this.step === 2 && this.selectedSlot) {
-            this.step = 3;
+        if (this.state.step === 2 && this.state.selectedSlot) {
+            this.state.step = 3;
             this.render();
             return;
         }
-        if (this.step === 3 && this.otpVerified) {
-            this.step = 4;
+        if (this.state.step === 3 && this.state.otpVerified) {
+            this.state.step = 4;
             this.render();
             return;
         }
-        this.step = Math.min(5, this.step + 1);
+        this.state.step = Math.min(5, this.state.step + 1);
         this.render();
     }
     goBack() {
-        this.step = Math.max(0, this.step - 1);
+        this.state.step = Math.max(0, this.state.step - 1);
         this.render();
     }
     reset() {
-        this.step = 0;
-        this.selectedSlot = null;
-        this.selectedDoctor = null;
-        this.date = "";
-        this.patientName = "";
-        this.patientAge = "";
-        this.patientAddress = "";
-        this.patientCity = "";
-        this.patientState = "";
-        this.patientCountry = "";
-        this.patientZipcode = "";
-        this.patientLandmark = "";
-        this.patientEmail = "";
-        this.patientGender = "";
-        this.problemFacing = "";
-        this.consultationCharge = "";
-        this.countryCode = "+91";
-        this.patientPhone = "";
-        this.otpCode = "";
-        this.otpSent = false;
-        this.otpVerified = false;
-        this.slots = [];
+        this.state = { ...INITIAL_STATE };
+        this.doctors = [];
         this.render();
     }
-    setLoading(loading) {
-        this.loading = loading;
-    }
-    setError(error) {
-        this.error = error;
+    setState(updates) {
+        this.state = { ...this.state, ...updates };
     }
     render() {
         if (!this.mounted)
@@ -439,16 +399,20 @@ class AppointmentCalendarWidget {
           <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.step === 0 ? "active" : ""}">1 Address</div>
-              <div class="medos-appointment-step-pill ${this.step === 1 ? "active" : ""}">2 Date</div>
-              <div class="medos-appointment-step-pill ${this.step === 2 ? "active" : ""}">3 Slot</div>
-              <div class="medos-appointment-step-pill ${this.step === 3 ? "active" : ""}">4 Phone</div>
-              <div class="medos-appointment-step-pill ${this.step === 4 ? "active" : ""}">5 Details</div>
+              <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.loading ? '<div class="medos-appointment-loading">Loading...</div>' : ""}
-          ${this.error ? `<div class="medos-appointment-error">${this.escapeHtml(this.error)}</div>` : ""}
+          ${this.state.loading
+            ? '<div class="medos-appointment-loading">Loading...</div>'
+            : ""}
+          ${this.state.error
+            ? `<div class="medos-appointment-error">${this.escapeHtml(this.state.error)}</div>`
+            : ""}
 
           ${this.renderStep()}
         </div>
@@ -457,7 +421,7 @@ class AppointmentCalendarWidget {
         this.attachEventListeners();
     }
     renderStep() {
-        switch (this.step) {
+        switch (this.state.step) {
             case 0:
                 return this.renderStep0();
             case 1:
@@ -481,14 +445,16 @@ class AppointmentCalendarWidget {
         <div class="medos-appointment-form-grid-2col">
           <div>
             <label class="medos-appointment-label">Address</label>
-            ${this.addresses.length === 0
+            ${this.state.addresses.length === 0
             ? '<div class="medos-appointment-small-muted">No addresses available</div>'
-            : this.addresses.length === 1
-                ? `<div class="medos-appointment-small-muted" style="font-weight: 600">${this.escapeHtml(this.addresses[0].label)}</div>`
+            : this.state.addresses.length === 1
+                ? `<div class="medos-appointment-small-muted" style="font-weight: 600">${this.escapeHtml(this.state.addresses[0].label || "")}</div>`
                 : `
                 <select class="medos-appointment-select" id="medos-address-select">
                   <option value="">-- choose address --</option>
-                  ${this.addresses.map(a => `<option value="${this.escapeHtml(a.id)}" ${this.selectedAddress === a.id ? "selected" : ""}>${this.escapeHtml(a.label)}</option>`).join("")}
+                  ${this.state.addresses
+                    .map((a) => `<option value="${this.escapeHtml(a.id.toString())}" ${this.state.selectedAddress === a.id ? "selected" : ""}>${this.escapeHtml(a.label || "")}</option>`)
+                    .join("")}
                 </select>
               `}
           </div>
@@ -497,11 +463,17 @@ class AppointmentCalendarWidget {
             ${this.doctors.length === 0
             ? '<div class="medos-appointment-small-muted">No doctors available</div>'
             : this.doctors.length === 1
-                ? `<div class="medos-appointment-small-muted" style="font-weight: 600">${this.escapeHtml(this.doctors[0].name)}${this.doctors[0].specialty ? ` • ${this.escapeHtml(this.doctors[0].specialty)}` : ""}</div>`
+                ? `<div class="medos-appointment-small-muted" style="font-weight: 600">${this.escapeHtml(this.doctors[0].name)}${this.doctors[0].specialty
+                    ? ` • ${this.escapeHtml(this.doctors[0].specialty)}`
+                    : ""}</div>`
                 : `
                 <select class="medos-appointment-select" id="medos-doctor-select">
                   <option value="">-- choose doctor --</option>
-                  ${this.doctors.map(d => `<option value="${this.escapeHtml(d.id)}" ${this.selectedDoctor === d.id ? "selected" : ""}>${this.escapeHtml(d.name)}${d.specialty ? ` (${this.escapeHtml(d.specialty)})` : ""}</option>`).join("")}
+                  ${this.doctors
+                    .map((d) => `<option value="${this.escapeHtml(d.id.toString())}" ${this.state.selectedDoctor === d.id ? "selected" : ""}>${this.escapeHtml(d.name)}${d.specialty
+                    ? ` (${this.escapeHtml(d.specialty)})`
+                    : ""}</option>`)
+                    .join("")}
                 </select>
               `}
           </div>
@@ -514,13 +486,14 @@ class AppointmentCalendarWidget {
     `;
     }
     renderStep1() {
+        const dateStr = formatDateToISO(this.state.selectedDate);
         return `
       <div class="medos-appointment-section">
         <label class="medos-appointment-label">Select Date</label>
-        <input type="date" class="medos-appointment-input" id="medos-date-input" value="${this.escapeHtml(this.date)}" />
+        <input type="date" class="medos-appointment-input" id="medos-date-input" value="${this.escapeHtml(dateStr)}" />
         <div class="medos-appointment-actions">
           <button class="medos-appointment-btn medos-appointment-btn-secondary" id="medos-btn-back">Back</button>
-          <button class="medos-appointment-btn medos-appointment-btn-primary" id="medos-btn-next" ${!this.date ? "disabled" : ""} style="opacity: ${this.date ? 1 : 0.6}">Next</button>
+          <button class="medos-appointment-btn medos-appointment-btn-primary" id="medos-btn-next" ${!dateStr ? "disabled" : ""} style="opacity: ${dateStr ? 1 : 0.6}">Next</button>
         </div>
       </div>
     `;
@@ -529,50 +502,63 @@ class AppointmentCalendarWidget {
         return `
       <div class="medos-appointment-section">
         <label class="medos-appointment-label">Choose Time Slot</label>
-        ${this.slots.length === 0
+        ${this.state.slots.length === 0
             ? '<div class="medos-appointment-small-muted">No slots available for selected date</div>'
             : `
             <div class="medos-appointment-slot-grid">
-              ${this.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.selectedSlot?.start === s.start && this.selectedSlot?.end === s.end;
+              ${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-appointment-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)}">
                     <div class="medos-appointment-slot-time">${start} — ${end}</div>
                   </div>
                 `;
-            }).join("")}
+            })
+                .join("")}
             </div>
           `}
         <div class="medos-appointment-actions">
           <button class="medos-appointment-btn medos-appointment-btn-secondary" id="medos-btn-back">Back</button>
-          <button class="medos-appointment-btn medos-appointment-btn-primary" id="medos-btn-next" ${!this.selectedSlot ? "disabled" : ""} style="opacity: ${this.selectedSlot ? 1 : 0.6}">Next</button>
+          <button class="medos-appointment-btn medos-appointment-btn-primary" id="medos-btn-next" ${!this.state.selectedSlot ? "disabled" : ""} style="opacity: ${this.state.selectedSlot ? 1 : 0.6}">Next</button>
         </div>
       </div>
     `;
     }
     renderStep3() {
-        const countryCodeValid = this.countryCode && this.validateCountryCode(this.countryCode);
-        const phoneValid = this.patientPhone && this.validatePhoneNumber(this.patientPhone);
-        const canSendOtp = countryCodeValid && phoneValid && !this.otpSending;
-        if (!this.otpSent) {
+        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-appointment-section">
           <label class="medos-appointment-label">Country Code</label>
-          <input type="text" class="medos-appointment-input" id="medos-country-code" placeholder="+91" value="${this.escapeHtml(this.countryCode)}" />
-          ${this.countryCode && !countryCodeValid ? '<div class="medos-appointment-validation-error">Please enter a valid country code (e.g., +91, +1)</div>' : ""}
+          <input type="text" class="medos-appointment-input" id="medos-country-code" placeholder="+91" value="${this.escapeHtml(this.state.countryCode)}" />
+          ${this.state.countryCode && !countryCodeValid
+                ? '<div class="medos-appointment-validation-error">Please enter a valid country code (e.g., +91, +1)</div>'
+                : ""}
           <label class="medos-appointment-label" style="margin-top: 12px">Phone Number</label>
-          <input type="tel" class="medos-appointment-input" id="medos-phone" placeholder="9311840587" value="${this.escapeHtml(this.patientPhone)}" maxlength="15" />
-          ${this.patientPhone && !phoneValid ? '<div class="medos-appointment-validation-error">Phone number should be 7-15 digits</div>' : ""}
+          <input type="tel" class="medos-appointment-input" id="medos-phone" placeholder="9311840587" value="${this.escapeHtml(this.state.patientPhone)}" maxlength="15" />
+          ${this.state.patientPhone && !phoneValid
+                ? '<div class="medos-appointment-validation-error">Phone number should be 7-15 digits</div>'
+                : ""}
           <div class="medos-appointment-actions">
             <button class="medos-appointment-btn medos-appointment-btn-secondary" id="medos-btn-back">Back</button>
-            <button class="medos-appointment-btn medos-appointment-btn-primary" id="medos-btn-send-otp" ${!canSendOtp ? "disabled" : ""} style="opacity: ${canSendOtp ? 1 : 0.6}">${this.otpSending ? "Sending..." : "Send OTP"}</button>
+            <button class="medos-appointment-btn medos-appointment-btn-primary" id="medos-btn-send-otp" ${!canSendOtp ? "disabled" : ""} style="opacity: ${canSendOtp ? 1 : 0.6}">${this.state.otpSending ? "Sending..." : "Send OTP"}</button>
           </div>
         </div>
       `;
         }
-        if (this.otpVerified) {
+        if (this.state.otpVerified) {
             return `
         <div class="medos-appointment-section">
           <div class="medos-appointment-verified">✓ Phone verified successfully</div>
@@ -586,61 +572,69 @@ class AppointmentCalendarWidget {
         return `
       <div class="medos-appointment-section">
         <label class="medos-appointment-label">Enter OTP</label>
-        <input type="text" class="medos-appointment-input" id="medos-otp" placeholder="Enter 6-digit OTP" value="${this.escapeHtml(this.otpCode)}" maxlength="6" />
-        <div class="medos-appointment-otp-info">OTP sent to ${this.escapeHtml(this.countryCode)} ${this.escapeHtml(this.patientPhone)}</div>
+        <input type="text" class="medos-appointment-input" id="medos-otp" placeholder="Enter 6-digit OTP" value="${this.escapeHtml(this.state.otpCode)}" maxlength="6" />
+        <div class="medos-appointment-otp-info">OTP sent to ${this.escapeHtml(this.state.countryCode)} ${this.escapeHtml(this.state.patientPhone)}</div>
         <div class="medos-appointment-actions">
           <button class="medos-appointment-btn medos-appointment-btn-secondary" id="medos-btn-change-number">Change Number</button>
-          <button class="medos-appointment-btn medos-appointment-btn-primary" id="medos-btn-verify-otp" ${this.otpCode.length !== 6 || this.otpVerifying ? "disabled" : ""} style="opacity: ${this.otpCode.length === 6 && !this.otpVerifying ? 1 : 0.6}">${this.otpVerifying ? "Verifying..." : "Verify OTP"}</button>
+          <button class="medos-appointment-btn medos-appointment-btn-primary" id="medos-btn-verify-otp" ${this.state.otpCode.length !== 6 || this.state.otpVerifying
+            ? "disabled"
+            : ""} style="opacity: ${this.state.otpCode.length === 6 && !this.state.otpVerifying ? 1 : 0.6}">${this.state.otpVerifying ? "Verifying..." : "Verify OTP"}</button>
         </div>
       </div>
     `;
     }
     renderStep4() {
-        const canSubmit = this.patientName && this.patientAddress && this.patientCity && this.patientState && this.patientCountry && this.patientZipcode && this.otpVerified;
+        const canSubmit = this.state.patientName &&
+            this.state.patientAddress &&
+            this.state.patientCity &&
+            this.state.patientState &&
+            this.state.patientCountry &&
+            this.state.patientZipcode &&
+            this.state.otpVerified;
         return `
       <div class="medos-appointment-section">
         <label class="medos-appointment-label">Patient Name</label>
-        <input type="text" class="medos-appointment-input" id="medos-patient-name" placeholder="Full name" value="${this.escapeHtml(this.patientName)}" />
+        <input type="text" class="medos-appointment-input" id="medos-patient-name" placeholder="Full name" value="${this.escapeHtml(this.state.patientName)}" />
         <label class="medos-appointment-label" style="margin-top: 12px">Age</label>
-        <input type="number" class="medos-appointment-input" id="medos-patient-age" placeholder="Age" value="${this.escapeHtml(this.patientAge)}" />
+        <input type="number" class="medos-appointment-input" id="medos-patient-age" placeholder="Age" value="${this.escapeHtml(this.state.patientAge)}" />
         <label class="medos-appointment-label" style="margin-top: 12px">Email (Optional)</label>
-        <input type="email" class="medos-appointment-input" id="medos-patient-email" placeholder="patient@example.com" value="${this.escapeHtml(this.patientEmail)}" />
+        <input type="email" class="medos-appointment-input" id="medos-patient-email" placeholder="patient@example.com" value="${this.escapeHtml(this.state.patientEmail)}" />
         <label class="medos-appointment-label" style="margin-top: 12px">Gender (Optional)</label>
         <select class="medos-appointment-select" id="medos-patient-gender">
           <option value="">-- Select Gender --</option>
-          <option value="MALE" ${this.patientGender === "MALE" ? "selected" : ""}>Male</option>
-          <option value="FEMALE" ${this.patientGender === "FEMALE" ? "selected" : ""}>Female</option>
-          <option value="OTHER" ${this.patientGender === "OTHER" ? "selected" : ""}>Other</option>
+          <option value="MALE" ${this.state.patientGender === "MALE" ? "selected" : ""}>Male</option>
+          <option value="FEMALE" ${this.state.patientGender === "FEMALE" ? "selected" : ""}>Female</option>
+          <option value="OTHER" ${this.state.patientGender === "OTHER" ? "selected" : ""}>Other</option>
         </select>
         <label class="medos-appointment-label" style="margin-top: 12px">Address Line 1 *</label>
-        <input type="text" class="medos-appointment-input" id="medos-patient-address" placeholder="Street address, building name, etc." value="${this.escapeHtml(this.patientAddress)}" />
+        <input type="text" class="medos-appointment-input" id="medos-patient-address" placeholder="Street address, building name, etc." value="${this.escapeHtml(this.state.patientAddress)}" />
         <div class="medos-appointment-form-grid">
           <div>
             <label class="medos-appointment-label">City *</label>
-            <input type="text" class="medos-appointment-input" id="medos-patient-city" placeholder="City" value="${this.escapeHtml(this.patientCity)}" />
+            <input type="text" class="medos-appointment-input" id="medos-patient-city" placeholder="City" value="${this.escapeHtml(this.state.patientCity)}" />
           </div>
           <div>
             <label class="medos-appointment-label">State *</label>
-            <input type="text" class="medos-appointment-input" id="medos-patient-state" placeholder="State" value="${this.escapeHtml(this.patientState)}" />
+            <input type="text" class="medos-appointment-input" id="medos-patient-state" placeholder="State" value="${this.escapeHtml(this.state.patientState)}" />
           </div>
         </div>
         <div class="medos-appointment-form-grid">
           <div>
             <label class="medos-appointment-label">Country *</label>
-            <input type="text" class="medos-appointment-input" id="medos-patient-country" placeholder="Country" value="${this.escapeHtml(this.patientCountry)}" />
+            <input type="text" class="medos-appointment-input" id="medos-patient-country" placeholder="Country" value="${this.escapeHtml(this.state.patientCountry)}" />
           </div>
           <div>
             <label class="medos-appointment-label">Zipcode *</label>
-            <input type="text" class="medos-appointment-input" id="medos-patient-zipcode" placeholder="Zipcode" value="${this.escapeHtml(this.patientZipcode)}" />
+            <input type="text" class="medos-appointment-input" id="medos-patient-zipcode" placeholder="Zipcode" value="${this.escapeHtml(this.state.patientZipcode)}" />
           </div>
         </div>
         <label class="medos-appointment-label" style="margin-top: 12px">Landmark (Optional)</label>
-        <input type="text" class="medos-appointment-input" id="medos-patient-landmark" placeholder="Nearby landmark" value="${this.escapeHtml(this.patientLandmark)}" />
+        <input type="text" class="medos-appointment-input" id="medos-patient-landmark" placeholder="Nearby landmark" value="${this.escapeHtml(this.state.patientLandmark)}" />
         <label class="medos-appointment-label" style="margin-top: 12px">Problem Facing</label>
-        <textarea class="medos-appointment-textarea" id="medos-problem-facing" placeholder="Describe the problem you're facing">${this.escapeHtml(this.problemFacing)}</textarea>
+        <textarea class="medos-appointment-textarea" id="medos-problem-facing" placeholder="Describe the problem you're facing">${this.escapeHtml(this.state.patientName)}</textarea>
         <div class="medos-appointment-actions">
           <button class="medos-appointment-btn medos-appointment-btn-secondary" id="medos-btn-back">Back</button>
-          <button class="medos-appointment-btn medos-appointment-btn-primary" id="medos-btn-submit" ${!canSubmit || this.loading ? "disabled" : ""} style="opacity: ${canSubmit && !this.loading ? 1 : 0.6}">${this.loading ? "Booking..." : "Book Appointment"}</button>
+          <button class="medos-appointment-btn medos-appointment-btn-primary" id="medos-btn-submit" ${!canSubmit || this.state.loading ? "disabled" : ""} style="opacity: ${canSubmit && !this.state.loading ? 1 : 0.6}">${this.state.loading ? "Booking..." : "Book Appointment"}</button>
         </div>
       </div>
     `;
@@ -651,7 +645,7 @@ class AppointmentCalendarWidget {
         <div class="medos-appointment-success-card">
           <div class="medos-appointment-success-icon">✓</div>
           <div class="medos-appointment-success-title">Appointment Confirmed</div>
-          <div class="medos-appointment-small-muted">Thank you, ${this.escapeHtml(this.patientName || "Patient")}. Your appointment is confirmed.</div>
+          <div class="medos-appointment-small-muted">Thank you, ${this.escapeHtml(this.state.patientName || "Patient")}. Your appointment is confirmed.</div>
         </div>
         <div style="margin-top: 14px; display: flex; justify-content: center">
           <button class="medos-appointment-btn medos-appointment-btn-primary" id="medos-btn-book-another" style="width: 160px">Book Another</button>
@@ -664,14 +658,14 @@ class AppointmentCalendarWidget {
         if (addressSelect) {
             addressSelect.addEventListener("change", (e) => {
                 const target = e.target;
-                this.handleAddressChange(target.value || null);
+                this.handleAddressChange(Number(target.value) || null);
             });
         }
         const doctorSelect = this.container.querySelector("#medos-doctor-select");
         if (doctorSelect) {
             doctorSelect.addEventListener("change", (e) => {
                 const target = e.target;
-                this.selectedDoctor = target.value || null;
+                this.state.selectedDoctor = Number(target.value) || null;
                 this.render();
             });
         }
@@ -679,18 +673,22 @@ class AppointmentCalendarWidget {
         if (dateInput) {
             dateInput.addEventListener("change", (e) => {
                 const target = e.target;
-                this.date = target.value;
+                this.state.selectedDate = new Date(target.value);
                 this.render();
             });
         }
         const slotCards = this.container.querySelectorAll(".medos-appointment-slot-card");
-        slotCards.forEach(card => {
+        slotCards.forEach((card) => {
             card.addEventListener("click", () => {
                 const slotId = card.getAttribute("data-slot-id");
                 const slotStart = card.getAttribute("data-slot-start");
                 const slotEnd = card.getAttribute("data-slot-end");
                 if (slotStart && slotEnd) {
-                    this.selectedSlot = { start: slotStart, end: slotEnd, id: slotId || undefined };
+                    this.state.selectedSlot = {
+                        start: slotStart,
+                        end: slotEnd,
+                        id: slotId || undefined,
+                    };
                     this.render();
                 }
             });
@@ -704,7 +702,7 @@ class AppointmentCalendarWidget {
                     value = "+" + value;
                 }
                 value = value.replace(/[^\d+]/g, "");
-                this.countryCode = value;
+                this.state.countryCode = value;
                 target.value = value;
                 this.render();
             });
@@ -713,8 +711,8 @@ class AppointmentCalendarWidget {
         if (phoneInput) {
             phoneInput.addEventListener("input", (e) => {
                 const target = e.target;
-                this.patientPhone = target.value.replace(/\D/g, "");
-                target.value = this.patientPhone;
+                this.state.patientPhone = target.value.replace(/\D/g, "");
+                target.value = this.state.patientPhone;
                 this.render();
             });
         }
@@ -722,7 +720,7 @@ class AppointmentCalendarWidget {
         if (otpInput) {
             otpInput.addEventListener("input", (e) => {
                 const target = e.target;
-                this.otpCode = target.value;
+                this.state.otpCode = target.value;
                 this.render();
             });
         }
@@ -730,77 +728,70 @@ class AppointmentCalendarWidget {
         if (patientNameInput) {
             patientNameInput.addEventListener("input", (e) => {
                 const target = e.target;
-                this.patientName = target.value;
+                this.state.patientName = target.value;
             });
         }
         const patientAgeInput = this.container.querySelector("#medos-patient-age");
         if (patientAgeInput) {
             patientAgeInput.addEventListener("input", (e) => {
                 const target = e.target;
-                this.patientAge = target.value;
+                this.state.patientAge = target.value;
             });
         }
         const patientEmailInput = this.container.querySelector("#medos-patient-email");
         if (patientEmailInput) {
             patientEmailInput.addEventListener("input", (e) => {
                 const target = e.target;
-                this.patientEmail = target.value;
+                this.state.patientEmail = target.value;
             });
         }
         const patientGenderSelect = this.container.querySelector("#medos-patient-gender");
         if (patientGenderSelect) {
             patientGenderSelect.addEventListener("change", (e) => {
                 const target = e.target;
-                this.patientGender = target.value;
+                this.state.patientGender = target.value;
             });
         }
         const patientAddressInput = this.container.querySelector("#medos-patient-address");
         if (patientAddressInput) {
             patientAddressInput.addEventListener("input", (e) => {
                 const target = e.target;
-                this.patientAddress = target.value;
+                this.state.patientAddress = target.value;
             });
         }
         const patientCityInput = this.container.querySelector("#medos-patient-city");
         if (patientCityInput) {
             patientCityInput.addEventListener("input", (e) => {
                 const target = e.target;
-                this.patientCity = target.value;
+                this.state.patientCity = target.value;
             });
         }
         const patientStateInput = this.container.querySelector("#medos-patient-state");
         if (patientStateInput) {
             patientStateInput.addEventListener("input", (e) => {
                 const target = e.target;
-                this.patientState = target.value;
+                this.state.patientState = target.value;
             });
         }
         const patientCountryInput = this.container.querySelector("#medos-patient-country");
         if (patientCountryInput) {
             patientCountryInput.addEventListener("input", (e) => {
                 const target = e.target;
-                this.patientCountry = target.value;
+                this.state.patientCountry = target.value;
             });
         }
         const patientZipcodeInput = this.container.querySelector("#medos-patient-zipcode");
         if (patientZipcodeInput) {
             patientZipcodeInput.addEventListener("input", (e) => {
                 const target = e.target;
-                this.patientZipcode = target.value;
+                this.state.patientZipcode = target.value;
             });
         }
         const patientLandmarkInput = this.container.querySelector("#medos-patient-landmark");
         if (patientLandmarkInput) {
             patientLandmarkInput.addEventListener("input", (e) => {
                 const target = e.target;
-                this.patientLandmark = target.value;
-            });
-        }
-        const problemFacingInput = this.container.querySelector("#medos-problem-facing");
-        if (problemFacingInput) {
-            problemFacingInput.addEventListener("input", (e) => {
-                const target = e.target;
-                this.problemFacing = target.value;
+                this.state.patientLandmark = target.value;
             });
         }
         const nextBtn = this.container.querySelector("#medos-btn-next");
@@ -822,9 +813,7 @@ class AppointmentCalendarWidget {
         const changeNumberBtn = this.container.querySelector("#medos-btn-change-number");
         if (changeNumberBtn) {
             changeNumberBtn.addEventListener("click", () => {
-                this.otpSent = false;
-                this.otpCode = "";
-                this.otpVerified = false;
+                this.setState({ otpSent: false, otpCode: "", otpVerified: false });
                 this.render();
             });
         }