medos-sdk 1.0.2 → 1.0.3

package/dist/vanilla/widget.js

@@ -3885,7 +3885,7 @@
   };
 
   class MedosClient {
-      static async init({ apiKey, baseURL = "https://api-dev.medapi.in/v1", }) {
+      static async init({ apiKey, baseURL = "https://api.medos.one", }) {
           if (!apiKey) {
               throw new Error("MedosClient.init() requires 'apiKey'");
           }
@@ -4072,18 +4072,19 @@
                   .map((ad) => {
                   const addr = ad.address;
                   const doctors = (ad.doctors || []).map((d) => ({
-                      id: String(d.id ?? ""),
-                      name: `${d.firstName || ""} ${d.lastName || ""}`.trim() || "Doctor",
-                      email: d.email,
-                      gender: d.gender,
-                      countryCode: d.countryCode,
-                      phoneNumber: d.phoneNumber,
-                      dob: d.dob,
-                      platform: d.platform,
-                      isKycCompleted: d.isKycCompleted,
+                      id: Number(d.user.id),
+                      name: `${d.user.firstName || ""} ${d.user.lastName || ""}`.trim() ||
+                          "Doctor",
+                      email: d.user.email,
+                      gender: d.user.gender,
+                      countryCode: d.user.countryCode,
+                      phoneNumber: d.user.phoneNumber,
+                      dob: d.user.dob,
+                      platform: d.user.platform,
+                      isKycCompleted: d.user.isKycCompleted,
                   }));
                   return {
-                      id: String(addr.id ?? ""),
+                      id: Number(addr.id),
                       completeAddress: addr.completeAddress,
                       addressLine1: addr.addressLine1,
                       addressLine2: addr.addressLine2,
@@ -4109,6 +4110,7 @@
       },
       async fetchSlots(workspaceId, addressId, doctorId, appointmentDate) {
           const client = await MedosClient.ensureInitialized();
+          console.log("fetching slots", workspaceId, addressId, doctorId, appointmentDate);
           const res = await client.get(`/appointments/available-slots`, {
               params: {
                   workspaceId,
@@ -4169,40 +4171,68 @@
       },
   };
 
+  const INITIAL_STATE = {
+      step: 0,
+      loading: false,
+      error: null,
+      workspaceId: null,
+      addresses: [],
+      addressDoctorsMap: {},
+      selectedAddress: null,
+      selectedDoctor: null,
+      selectedDate: new Date(),
+      slots: [],
+      selectedSlot: null,
+      consultationMode: "OFFLINE",
+      consultationCharge: "",
+      patientName: "",
+      patientAge: "",
+      patientEmail: "",
+      patientGender: "",
+      bloodGroup: "",
+      patientAddress: "",
+      patientCity: "",
+      patientState: "",
+      patientCountry: "",
+      patientZipcode: "",
+      patientLandmark: "",
+      countryCode: "+91",
+      patientPhone: "",
+      otpCode: "",
+      otpSent: false,
+      otpVerified: false,
+      otpSending: false,
+      otpVerifying: false,
+  };
+
+  const validatePhoneNumber = (phone) => {
+      const cleaned = phone.replace(/\D/g, "");
+      return cleaned.length >= 7 && cleaned.length <= 15;
+  };
+  const validateCountryCode = (code) => {
+      return /^\+[1-9]\d{0,3}$/.test(code);
+  };
+
+  const formatDateToISO = (date) => {
+      const year = String(date.getFullYear()).padStart(4, "0");
+      const month = String(date.getMonth() + 1).padStart(2, "0");
+      const day = String(date.getDate()).padStart(2, "0");
+      return `${year}-${month}-${day}`;
+  };
+  const parsePatientName = (fullName) => {
+      const nameParts = fullName.trim().split(/\s+/);
+      const firstName = nameParts[0] || "Patient";
+      const lastName = nameParts.slice(1).join(" ") || "";
+      return {
+          firstName,
+          lastName,
+      };
+  };
+
   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) {
@@ -4214,6 +4244,7 @@
               this.container = container;
           }
           this.options = options;
+          this.state = { ...INITIAL_STATE };
           this.init();
       }
       async init() {
@@ -4236,19 +4267,18 @@
           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
@@ -4256,233 +4286,242 @@
                           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");
@@ -4491,112 +4530,92 @@
               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)
@@ -4607,16 +4626,20 @@
           <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>
@@ -4625,7 +4648,7 @@
           this.attachEventListeners();
       }
       renderStep() {
-          switch (this.step) {
+          switch (this.state.step) {
               case 0:
                   return this.renderStep0();
               case 1:
@@ -4649,14 +4672,16 @@
         <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>
@@ -4665,11 +4690,17 @@
             ${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>
@@ -4682,13 +4713,14 @@
     `;
       }
       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>
     `;
@@ -4697,50 +4729,63 @@
           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>
@@ -4754,61 +4799,69 @@
           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>
     `;
@@ -4819,7 +4872,7 @@
         <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>
@@ -4832,14 +4885,14 @@
           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();
               });
           }
@@ -4847,18 +4900,22 @@
           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();
                   }
               });
@@ -4872,7 +4929,7 @@
                       value = "+" + value;
                   }
                   value = value.replace(/[^\d+]/g, "");
-                  this.countryCode = value;
+                  this.state.countryCode = value;
                   target.value = value;
                   this.render();
               });
@@ -4881,8 +4938,8 @@
           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();
               });
           }
@@ -4890,7 +4947,7 @@
           if (otpInput) {
               otpInput.addEventListener("input", (e) => {
                   const target = e.target;
-                  this.otpCode = target.value;
+                  this.state.otpCode = target.value;
                   this.render();
               });
           }
@@ -4898,77 +4955,70 @@
           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");
@@ -4990,9 +5040,7 @@
           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();
               });
           }