medos-sdk 1.0.2 → 1.1.0

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 }) {
           if (!apiKey) {
               throw new Error("MedosClient.init() requires 'apiKey'");
           }
@@ -3895,7 +3895,7 @@
           this.initPromise = (async () => {
               try {
                   const sessionToken = await AuthService.init(apiKey);
-                  this.initializeAxiosInstance(sessionToken, baseURL);
+                  this.initializeAxiosInstance(sessionToken, "https://api.medos.one");
               }
               catch (e) {
                   this.initPromise = null;
@@ -3904,7 +3904,7 @@
           })();
           return this.initPromise;
       }
-      static async initWithSession({ sessionToken, baseURL = "https://api-dev.medapi.in/v1", }) {
+      static async initWithSession({ sessionToken }) {
           if (!sessionToken) {
               throw new Error("MedosClient.initWithSession() requires 'sessionToken'");
           }
@@ -3913,7 +3913,7 @@
           }
           this.initPromise = (async () => {
               try {
-                  this.initializeAxiosInstance(sessionToken, baseURL);
+                  this.initializeAxiosInstance(sessionToken, "https://api.medos.one");
               }
               catch (e) {
                   this.initPromise = null;
@@ -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$1 = (phone) => {
+      const cleaned = phone.replace(/\D/g, "");
+      return cleaned.length >= 7 && cleaned.length <= 15;
+  };
+  const validateCountryCode$1 = (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,19 +4244,18 @@
               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 {
@@ -4236,19 +4265,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 +4284,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$1(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$1(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 +4528,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 +4624,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 +4646,7 @@
           this.attachEventListeners();
       }
       renderStep() {
-          switch (this.step) {
+          switch (this.state.step) {
               case 0:
                   return this.renderStep0();
               case 1:
@@ -4649,14 +4670,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 +4688,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 +4711,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 +4727,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$1(this.state.countryCode);
+          const phoneValid = this.state.patientPhone && validatePhoneNumber$1(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 +4797,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 +4870,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 +4883,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 +4898,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 +4927,7 @@
                       value = "+" + value;
                   }
                   value = value.replace(/[^\d+]/g, "");
-                  this.countryCode = value;
+                  this.state.countryCode = value;
                   target.value = value;
                   this.render();
               });
@@ -4881,8 +4936,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 +4945,7 @@
           if (otpInput) {
               otpInput.addEventListener("input", (e) => {
                   const target = e.target;
-                  this.otpCode = target.value;
+                  this.state.otpCode = target.value;
                   this.render();
               });
           }
@@ -4898,77 +4953,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 +5038,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();
               });
           }
@@ -5023,14 +5069,493 @@
       return new AppointmentCalendarWidget(container, options);
   }
 
+  const EnquiryService = {
+      async submitEnquiry(payload) {
+          try {
+              const client = await MedosClient.ensureInitialized();
+              const enquiryData = {
+                  patientName: payload.patientName,
+                  patientEmail: payload.patientEmail,
+                  countryCode: payload.countryCode,
+                  patientPhone: payload.patientPhone,
+                  inquirySubject: payload.inquirySubject,
+                  inquiryMessage: payload.inquiryMessage,
+                  preferredContactMethod: payload.preferredContactMethod,
+              };
+              const res = await client.post("/enquiries/submit", enquiryData, {
+                  headers: {
+                      "Content-Type": "application/json",
+                  },
+              });
+              return res.data;
+          }
+          catch (error) {
+              if (error instanceof Error) {
+                  throw new Error(`Failed to submit enquiry: ${error.message}`);
+              }
+              throw new Error("Failed to submit enquiry: Unknown error");
+          }
+      },
+  };
+
+  const validateName = (name) => {
+      return name.trim().length > 0;
+  };
+  const validateEmail = (email) => {
+      const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+      return emailRegex.test(email);
+  };
+  const validatePhoneNumber = (phone) => {
+      const cleaned = phone.replace(/\D/g, "");
+      return cleaned.length >= 7 && cleaned.length <= 15;
+  };
+  const validateSubject = (subject) => {
+      return subject.trim().length > 0;
+  };
+  const validateMessage = (message) => {
+      const trimmed = message.trim();
+      return trimmed.length > 0 && trimmed.length <= 1000;
+  };
+  const validateCountryCode = (code) => {
+      return /^\+[1-9]\d{0,3}$/.test(code);
+  };
+
+  class EnquiryFormWidget {
+      constructor(container, options) {
+          this.mounted = true;
+          if (typeof container === "string") {
+              const el = document.getElementById(container);
+              if (!el) {
+                  throw new Error(`Container element with id "${container}" not found`);
+              }
+              this.container = el;
+          }
+          else {
+              this.container = container;
+          }
+          this.options = options;
+          this.state = {
+              step: 0,
+              loading: false,
+              error: null,
+              patientName: "",
+              patientEmail: "",
+              countryCode: "+91",
+              patientPhone: "",
+              inquirySubject: "",
+              inquiryMessage: "",
+              preferredContactMethod: "EMAIL",
+              submitted: false,
+          };
+          this.init();
+      }
+      async init() {
+          if (this.options.apiKey) {
+              await MedosClient.init({
+                  apiKey: this.options.apiKey,
+              });
+          }
+          else if (this.options.sessionToken) {
+              await MedosClient.initWithSession({
+                  sessionToken: this.options.sessionToken,
+              });
+          }
+          else {
+              throw new Error("Either apiKey or sessionToken must be provided");
+          }
+          this.render();
+      }
+      validateContactStep() {
+          this.setState({ error: null });
+          if (!validateName(this.state.patientName)) {
+              this.setState({ error: "Please enter a valid name." });
+              return false;
+          }
+          if (!validateEmail(this.state.patientEmail)) {
+              this.setState({ error: "Please enter a valid email address." });
+              return false;
+          }
+          if (!validateCountryCode(this.state.countryCode)) {
+              this.setState({
+                  error: "Please enter a valid country code (e.g., +91, +1).",
+              });
+              return false;
+          }
+          if (!validatePhoneNumber(this.state.patientPhone)) {
+              this.setState({
+                  error: "Please enter a valid phone number (7-15 digits).",
+              });
+              return false;
+          }
+          return true;
+      }
+      validateInquiryStep() {
+          this.setState({ error: null });
+          if (!validateSubject(this.state.inquirySubject)) {
+              this.setState({ error: "Please enter a valid subject." });
+              return false;
+          }
+          if (!validateMessage(this.state.inquiryMessage)) {
+              this.setState({
+                  error: "Please enter a valid message (max 1000 characters).",
+              });
+              return false;
+          }
+          return true;
+      }
+      goToNext() {
+          if (this.state.step === 0) {
+              if (!this.validateContactStep()) {
+                  this.render();
+                  return;
+              }
+          }
+          else if (this.state.step === 1) {
+              if (!this.validateInquiryStep()) {
+                  this.render();
+                  return;
+              }
+          }
+          this.state.step = Math.min(3, this.state.step + 1);
+          this.render();
+      }
+      goBack() {
+          this.state.step = Math.max(0, this.state.step - 1);
+          this.render();
+      }
+      async submitEnquiry() {
+          this.setState({ error: null });
+          if (!this.validateContactStep() || !this.validateInquiryStep()) {
+              this.render();
+              return;
+          }
+          this.setState({ loading: true });
+          this.render();
+          try {
+              const payload = {
+                  patientName: this.state.patientName,
+                  patientEmail: this.state.patientEmail,
+                  countryCode: this.state.countryCode,
+                  patientPhone: this.state.patientPhone,
+                  inquirySubject: this.state.inquirySubject,
+                  inquiryMessage: this.state.inquiryMessage,
+                  preferredContactMethod: this.state.preferredContactMethod,
+              };
+              await EnquiryService.submitEnquiry(payload);
+              this.state.step = 3;
+              this.options.onSuccess?.(payload);
+          }
+          catch (e) {
+              const msg = e.message || "Failed to submit enquiry";
+              this.setState({ error: msg });
+              this.options.onError?.(e);
+          }
+          finally {
+              this.setState({ loading: false });
+              this.render();
+          }
+      }
+      resetForm() {
+          this.state = {
+              step: 0,
+              loading: false,
+              error: null,
+              patientName: "",
+              patientEmail: "",
+              countryCode: "+91",
+              patientPhone: "",
+              inquirySubject: "",
+              inquiryMessage: "",
+              preferredContactMethod: "EMAIL",
+              submitted: false,
+          };
+          this.render();
+      }
+      setState(updates) {
+          this.state = { ...this.state, ...updates };
+      }
+      render() {
+          if (!this.mounted)
+              return;
+          this.container.innerHTML = `
+      <div class="medos-enquiry-container">
+        <div class="medos-enquiry-card">
+          <div class="medos-enquiry-header">
+            <h2 class="medos-enquiry-title">Submit Inquiry</h2>
+            <p class="medos-enquiry-step-indicator">Step ${this.state.step + 1} of 4</p>
+          </div>
+
+          ${this.state.loading
+            ? '<div class="medos-enquiry-loading">Loading...</div>'
+            : ""}
+          ${this.state.error
+            ? `<div class="medos-enquiry-error">${this.escapeHtml(this.state.error)}</div>`
+            : ""}
+
+          ${this.renderStep()}
+        </div>
+      </div>
+    `;
+          this.attachEventListeners();
+      }
+      renderStep() {
+          switch (this.state.step) {
+              case 0:
+                  return this.renderStep0();
+              case 1:
+                  return this.renderStep1();
+              case 2:
+                  return this.renderStep2();
+              case 3:
+                  return this.renderStep3();
+              default:
+                  return "";
+          }
+      }
+      renderStep0() {
+          return `
+      <div class="medos-enquiry-section">
+        <label class="medos-enquiry-label">Full Name *</label>
+        <input 
+          type="text" 
+          class="medos-enquiry-input" 
+          id="medos-enquiry-name" 
+          placeholder="Enter your full name"
+          value="${this.escapeHtml(this.state.patientName)}"
+        />
+        
+        <label class="medos-enquiry-label" style="margin-top: 12px">Email Address *</label>
+        <input 
+          type="email" 
+          class="medos-enquiry-input" 
+          id="medos-enquiry-email" 
+          placeholder="your.email@example.com"
+          value="${this.escapeHtml(this.state.patientEmail)}"
+        />
+        
+        <label class="medos-enquiry-label" style="margin-top: 12px">Country Code *</label>
+        <input 
+          type="text" 
+          class="medos-enquiry-input" 
+          id="medos-enquiry-country-code" 
+          placeholder="+91"
+          value="${this.escapeHtml(this.state.countryCode)}"
+        />
+        
+        <label class="medos-enquiry-label" style="margin-top: 12px">Phone Number *</label>
+        <input 
+          type="tel" 
+          class="medos-enquiry-input" 
+          id="medos-enquiry-phone" 
+          placeholder="9876543210"
+          value="${this.escapeHtml(this.state.patientPhone)}"
+          maxlength="15"
+        />
+        
+        <div class="medos-enquiry-actions">
+          <button class="medos-enquiry-btn medos-enquiry-btn-secondary" id="medos-enquiry-btn-cancel">Cancel</button>
+          <button class="medos-enquiry-btn medos-enquiry-btn-primary" id="medos-enquiry-btn-next">Next</button>
+        </div>
+      </div>
+    `;
+      }
+      renderStep1() {
+          return `
+      <div class="medos-enquiry-section">
+        <label class="medos-enquiry-label">Subject *</label>
+        <input 
+          type="text" 
+          class="medos-enquiry-input" 
+          id="medos-enquiry-subject" 
+          placeholder="What is your inquiry about?"
+          value="${this.escapeHtml(this.state.inquirySubject)}"
+        />
+        
+        <label class="medos-enquiry-label" style="margin-top: 12px">Message *</label>
+        <textarea 
+          class="medos-enquiry-textarea" 
+          id="medos-enquiry-message" 
+          placeholder="Please describe your inquiry in detail (max 1000 characters)"
+          maxlength="1000"
+        >${this.escapeHtml(this.state.inquiryMessage)}</textarea>
+        <div class="medos-enquiry-char-count">${this.state.inquiryMessage.length}/1000</div>
+        
+        <div class="medos-enquiry-actions">
+          <button class="medos-enquiry-btn medos-enquiry-btn-secondary" id="medos-enquiry-btn-back">Back</button>
+          <button class="medos-enquiry-btn medos-enquiry-btn-primary" id="medos-enquiry-btn-next">Next</button>
+        </div>
+      </div>
+    `;
+      }
+      renderStep2() {
+          return `
+      <div class="medos-enquiry-section">
+        <label class="medos-enquiry-label">Preferred Contact Method *</label>
+        <div class="medos-enquiry-radio-group">
+          <label class="medos-enquiry-radio-label">
+            <input 
+              type="radio" 
+              name="contact-method" 
+              value="PHONE"
+              ${this.state.preferredContactMethod === "PHONE" ? "checked" : ""}
+              id="medos-enquiry-contact-phone"
+            />
+            <span>Phone</span>
+          </label>
+          <label class="medos-enquiry-radio-label">
+            <input 
+              type="radio" 
+              name="contact-method" 
+              value="EMAIL"
+              ${this.state.preferredContactMethod === "EMAIL" ? "checked" : ""}
+              id="medos-enquiry-contact-email"
+            />
+            <span>Email</span>
+          </label>
+          <label class="medos-enquiry-radio-label">
+            <input 
+              type="radio" 
+              name="contact-method" 
+              value="BOTH"
+              ${this.state.preferredContactMethod === "BOTH" ? "checked" : ""}
+              id="medos-enquiry-contact-both"
+            />
+            <span>Both</span>
+          </label>
+        </div>
+        
+        <div class="medos-enquiry-actions">
+          <button class="medos-enquiry-btn medos-enquiry-btn-secondary" id="medos-enquiry-btn-back">Back</button>
+          <button class="medos-enquiry-btn medos-enquiry-btn-primary" id="medos-enquiry-btn-submit" ${this.state.loading ? "disabled" : ""} style="opacity: ${this.state.loading ? 0.6 : 1}">${this.state.loading ? "Submitting..." : "Submit Inquiry"}</button>
+        </div>
+      </div>
+    `;
+      }
+      renderStep3() {
+          return `
+      <div class="medos-enquiry-section" style="text-align: center">
+        <div class="medos-enquiry-success-card">
+          <div class="medos-enquiry-success-icon">✓</div>
+          <div class="medos-enquiry-success-title">Inquiry Submitted Successfully</div>
+          <div class="medos-enquiry-success-message">Thank you, ${this.escapeHtml(this.state.patientName || "Patient")}. We have received your inquiry and will get back to you soon.</div>
+        </div>
+        <div style="margin-top: 14px; display: flex; justify-content: center">
+          <button class="medos-enquiry-btn medos-enquiry-btn-primary" id="medos-enquiry-btn-submit-another" style="width: 160px">Submit Another</button>
+        </div>
+      </div>
+    `;
+      }
+      attachEventListeners() {
+          const nameInput = this.container.querySelector("#medos-enquiry-name");
+          if (nameInput) {
+              nameInput.addEventListener("input", (e) => {
+                  const target = e.target;
+                  this.state.patientName = target.value;
+              });
+          }
+          const emailInput = this.container.querySelector("#medos-enquiry-email");
+          if (emailInput) {
+              emailInput.addEventListener("input", (e) => {
+                  const target = e.target;
+                  this.state.patientEmail = target.value;
+              });
+          }
+          const countryCodeInput = this.container.querySelector("#medos-enquiry-country-code");
+          if (countryCodeInput) {
+              countryCodeInput.addEventListener("input", (e) => {
+                  const target = e.target;
+                  let value = target.value;
+                  if (value && !value.startsWith("+")) {
+                      value = "+" + value;
+                  }
+                  value = value.replace(/[^\d+]/g, "");
+                  this.state.countryCode = value;
+                  target.value = value;
+              });
+          }
+          const phoneInput = this.container.querySelector("#medos-enquiry-phone");
+          if (phoneInput) {
+              phoneInput.addEventListener("input", (e) => {
+                  const target = e.target;
+                  this.state.patientPhone = target.value.replace(/\D/g, "");
+                  target.value = this.state.patientPhone;
+              });
+          }
+          const subjectInput = this.container.querySelector("#medos-enquiry-subject");
+          if (subjectInput) {
+              subjectInput.addEventListener("input", (e) => {
+                  const target = e.target;
+                  this.state.inquirySubject = target.value;
+              });
+          }
+          const messageInput = this.container.querySelector("#medos-enquiry-message");
+          if (messageInput) {
+              messageInput.addEventListener("input", (e) => {
+                  const target = e.target;
+                  this.state.inquiryMessage = target.value;
+                  this.render();
+              });
+          }
+          const contactMethodRadios = this.container.querySelectorAll('input[name="contact-method"]');
+          contactMethodRadios.forEach((radio) => {
+              radio.addEventListener("change", (e) => {
+                  const target = e.target;
+                  this.state.preferredContactMethod = target.value;
+              });
+          });
+          const nextBtn = this.container.querySelector("#medos-enquiry-btn-next");
+          if (nextBtn) {
+              nextBtn.addEventListener("click", () => this.goToNext());
+          }
+          const backBtn = this.container.querySelector("#medos-enquiry-btn-back");
+          if (backBtn) {
+              backBtn.addEventListener("click", () => this.goBack());
+          }
+          const submitBtn = this.container.querySelector("#medos-enquiry-btn-submit");
+          if (submitBtn) {
+              submitBtn.addEventListener("click", () => this.submitEnquiry());
+          }
+          const cancelBtn = this.container.querySelector("#medos-enquiry-btn-cancel");
+          if (cancelBtn) {
+              cancelBtn.addEventListener("click", () => this.resetForm());
+          }
+          const submitAnotherBtn = this.container.querySelector("#medos-enquiry-btn-submit-another");
+          if (submitAnotherBtn) {
+              submitAnotherBtn.addEventListener("click", () => this.resetForm());
+          }
+      }
+      escapeHtml(text) {
+          const div = document.createElement("div");
+          div.textContent = text;
+          return div.innerHTML;
+      }
+      destroy() {
+          this.mounted = false;
+          this.container.innerHTML = "";
+      }
+  }
+  function initEnquiryForm(options) {
+      const container = document.getElementById(options.containerId);
+      if (!container) {
+          throw new Error(`Container element with id "${options.containerId}" not found`);
+      }
+      return new EnquiryFormWidget(container, options);
+  }
+
   if (typeof window !== "undefined") {
       window.MedosAppointmentCalendar = {
           init: initAppointmentCalendar,
           Widget: AppointmentCalendarWidget,
       };
+      window.MedosEnquiryForm = {
+          init: initEnquiryForm,
+          Widget: EnquiryFormWidget,
+      };
   }
 
   exports.AppointmentCalendarWidget = AppointmentCalendarWidget;
+  exports.EnquiryFormWidget = EnquiryFormWidget;
   exports.initAppointmentCalendar = initAppointmentCalendar;
+  exports.initEnquiryForm = initEnquiryForm;
 
 }));