medos-sdk 1.1.7 → 1.1.8

package/dist/vanilla/AppointmentCalendarWidget.js

@@ -1,13 +1,24 @@
 import { AppointmentService, } from "../services/AppointmentService";
 import { PatientService } from "../services/PatientService";
 import { MedosClient } from "../client/MedosClient";
-import { INITIAL_STATE, } from "../components/types";
+import { INITIAL_STATE, COUNTRY_CODES, GENDER_OPTIONS, BLOOD_GROUP_OPTIONS, } from "../components/types";
 import { validatePhoneNumber, validateCountryCode, } from "../components/validation";
 import { formatDateToISO, parsePatientName } from "../components/utils";
+import { VanillaIcons } from "./components/VanillaIcons";
+import { VanillaSelect } from "./components/VanillaSelect";
+import { VanillaCalendar } from "./components/VanillaCalendar";
+import { injectThemedStyles } from "./components/theme-injector";
 class AppointmentCalendarWidget {
     constructor(container, options) {
         this.mounted = true;
         this.doctors = [];
+        this.addressSelect = null;
+        this.doctorSelect = null;
+        this.calendar = null;
+        this.countryCodeSelect = null;
+        this.genderSelect = null;
+        this.bloodGroupSelect = null;
+        injectThemedStyles();
         if (typeof container === "string") {
             const el = document.getElementById(container);
             if (!el) {
@@ -195,8 +206,27 @@ class AppointmentCalendarWidget {
             return false;
         return true;
     }
+    updateSubmitButtonState() {
+        const submitBtn = this.container.querySelector("#medos-btn-submit");
+        if (submitBtn) {
+            const canSubmit = this.state.patientName &&
+                this.state.patientAddress &&
+                this.state.patientCity &&
+                this.state.patientState &&
+                this.state.patientCountry &&
+                this.state.patientZipcode &&
+                this.state.patientEmail &&
+                this.state.patientAge &&
+                this.state.otpVerified;
+            submitBtn.disabled = !(canSubmit && !this.state.loading);
+        }
+    }
     async sendOtp() {
         this.setState({ error: null });
+        console.log("sendOtp called - Current state:", {
+            countryCode: this.state.countryCode,
+            patientPhone: this.state.patientPhone,
+        });
         if (!this.state.countryCode) {
             this.setState({ error: "Please enter country code." });
             return;
@@ -220,6 +250,10 @@ class AppointmentCalendarWidget {
         this.setState({ otpSending: true });
         this.render();
         try {
+            console.log("Sending OTP to:", {
+                countryCode: this.state.countryCode,
+                phoneNumber: this.state.patientPhone,
+            });
             await PatientService.sendPhoneVerificationOtp({
                 countryCode: this.state.countryCode,
                 phoneNumber: this.state.patientPhone,
@@ -227,7 +261,10 @@ class AppointmentCalendarWidget {
             this.setState({ otpSent: true, error: null });
         }
         catch (e) {
-            const msg = e.message || "Failed to send OTP";
+            console.error("Send OTP error:", e);
+            const msg = e?.response?.data?.message ||
+                e?.message ||
+                "Failed to send OTP. Please try again.";
             this.setState({ error: msg });
             this.options.onError?.(e);
         }
@@ -251,6 +288,11 @@ class AppointmentCalendarWidget {
         this.setState({ otpVerifying: true });
         this.render();
         try {
+            console.log("Verifying OTP with:", {
+                countryCode: this.state.countryCode,
+                phoneNumber: this.state.patientPhone,
+                otpCode: this.state.otpCode,
+            });
             await PatientService.verifyPhoneVerificationOtp({
                 countryCode: this.state.countryCode,
                 phoneNumber: this.state.patientPhone,
@@ -259,7 +301,10 @@ class AppointmentCalendarWidget {
             this.setState({ otpVerified: true, error: null });
         }
         catch (e) {
-            const msg = e.message || "Invalid OTP code";
+            console.error("OTP verification error:", e);
+            const msg = e?.response?.data?.message ||
+                e?.message ||
+                "Invalid OTP code. Please try again.";
             this.setState({ error: msg });
             this.options.onError?.(e);
         }
@@ -420,6 +465,112 @@ class AppointmentCalendarWidget {
       </div>
     `;
         this.attachEventListeners();
+        this.initializeCustomComponents();
+    }
+    initializeCustomComponents() {
+        if (this.state.step === 0) {
+            const addressContainer = this.container.querySelector("#medos-address-select-container");
+            if (addressContainer && this.state.addresses.length > 0) {
+                const addressOptions = this.state.addresses.map((a) => ({
+                    value: a.id.toString(),
+                    label: a.label || `Address ${a.id}`,
+                }));
+                this.addressSelect = new VanillaSelect(addressContainer, addressOptions, {
+                    placeholder: "Select a location",
+                    onValueChange: (value) => {
+                        this.handleAddressChange(Number(value) || null);
+                    },
+                });
+                if (this.state.selectedAddress) {
+                    this.addressSelect.setValue(this.state.selectedAddress.toString());
+                }
+            }
+            const doctorContainer = this.container.querySelector("#medos-doctor-select-container");
+            if (doctorContainer && this.doctors.length > 0) {
+                const doctorOptions = this.doctors.map((d) => ({
+                    value: d.id.toString(),
+                    label: d.name + (d.specialty ? ` • ${d.specialty}` : ""),
+                }));
+                this.doctorSelect = new VanillaSelect(doctorContainer, doctorOptions, {
+                    placeholder: "Select a doctor",
+                    onValueChange: (value) => {
+                        this.state.selectedDoctor = Number(value) || null;
+                        const selectedDoc = this.doctors.find((d) => d.id === this.state.selectedDoctor);
+                        if (selectedDoc && selectedDoc.consultationCharge) {
+                            this.state.consultationCharge = selectedDoc.consultationCharge;
+                        }
+                        this.render();
+                    },
+                });
+                if (this.state.selectedDoctor) {
+                    this.doctorSelect.setValue(this.state.selectedDoctor.toString());
+                }
+            }
+        }
+        if (this.state.step === 1) {
+            const calendarContainer = this.container.querySelector("#medos-calendar-container");
+            if (calendarContainer) {
+                this.calendar = new VanillaCalendar(calendarContainer, {
+                    selectedDate: this.state.selectedDate || undefined,
+                    pastDisabled: true,
+                    onSelect: (date) => {
+                        this.state.selectedDate = date;
+                        this.render();
+                    },
+                });
+            }
+        }
+        if (this.state.step === 3) {
+            const countryCodeContainer = this.container.querySelector("#medos-country-code-container");
+            if (countryCodeContainer) {
+                const countryOptions = COUNTRY_CODES.map((c) => ({
+                    value: c.code,
+                    label: c.label,
+                }));
+                this.countryCodeSelect = new VanillaSelect(countryCodeContainer, countryOptions, {
+                    placeholder: "Country",
+                    onValueChange: (value) => {
+                        this.state.countryCode = value;
+                        const sendOtpBtn = this.container.querySelector("#medos-btn-send-otp");
+                        if (sendOtpBtn) {
+                            const canSendOtp = this.state.countryCode &&
+                                this.state.patientPhone.length >= 10;
+                            sendOtpBtn.disabled = !canSendOtp;
+                        }
+                    },
+                });
+                if (this.state.countryCode) {
+                    this.countryCodeSelect.setValue(this.state.countryCode);
+                }
+            }
+        }
+        if (this.state.step === 4) {
+            const genderContainer = this.container.querySelector("#medos-gender-container");
+            if (genderContainer) {
+                this.genderSelect = new VanillaSelect(genderContainer, GENDER_OPTIONS, {
+                    placeholder: "Select gender",
+                    onValueChange: (value) => {
+                        this.state.patientGender = value;
+                        this.updateSubmitButtonState();
+                    },
+                });
+                if (this.state.patientGender) {
+                    this.genderSelect.setValue(this.state.patientGender);
+                }
+            }
+            const bloodGroupContainer = this.container.querySelector("#medos-blood-group-container");
+            if (bloodGroupContainer) {
+                this.bloodGroupSelect = new VanillaSelect(bloodGroupContainer, BLOOD_GROUP_OPTIONS, {
+                    placeholder: "Select blood group (optional)",
+                    onValueChange: (value) => {
+                        this.state.bloodGroup = value;
+                    },
+                });
+                if (this.state.bloodGroup) {
+                    this.bloodGroupSelect.setValue(this.state.bloodGroup);
+                }
+            }
+        }
     }
     renderStep() {
         switch (this.state.step) {
@@ -442,72 +593,122 @@ class AppointmentCalendarWidget {
     renderStep0() {
         const canProceed = this.canProceedFromMergedStep();
         return `
-      <div class="medos-appointment-section">
-        <div class="medos-appointment-form-grid-2col">
-          <div>
-            <label class="medos-appointment-label">Address</label>
-            ${this.state.addresses.length === 0
-            ? '<div class="medos-appointment-small-muted">No addresses available</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.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 class="medos-section-card">
+        <div class="medos-section-header">
+          ${VanillaIcons.mapPin(14)}
+          <span class="medos-section-title">Location & Doctor</span>
+        </div>
+        <div class="medos-section-body">
+          <div class="medos-form-group">
+            <label class="medos-label">Preferred Location <span class="medos-required">*</span></label>
+            <div id="medos-address-select-container"></div>
           </div>
-          <div>
-            <label class="medos-appointment-label">Doctor</label>
-            ${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>`
-                : `
-                <select class="medos-appointment-select" id="medos-doctor-select">
-                  <option value="">-- choose doctor --</option>
-                  ${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 class="medos-form-group">
+            <label class="medos-label">Preferred Doctor <span class="medos-required">*</span></label>
+            <div id="medos-doctor-select-container"></div>
+          </div>
+          <div class="medos-form-group">
+            <label class="medos-label">Chief Complaint <span class="medos-optional">(optional)</span></label>
+            <textarea 
+              class="medos-textarea" 
+              id="medos-chief-complaint"
+              placeholder="Enter Chief Complaint or Appointment Notes"
+            ></textarea>
           </div>
-        </div>
-        <div class="medos-appointment-actions">
-          <button class="medos-appointment-btn medos-appointment-btn-secondary" id="medos-btn-cancel">Cancel</button>
-          <button class="medos-appointment-btn medos-appointment-btn-primary" id="medos-btn-next" ${!canProceed ? "disabled" : ""} style="opacity: ${canProceed ? 1 : 0.6}">Next</button>
         </div>
       </div>
+      <div class="medos-actions">
+        <button class="medos-btn medos-btn-primary" id="medos-btn-next" ${!canProceed ? "disabled" : ""}>Next</button>
+      </div>
     `;
     }
     renderStep1() {
         const dateStr = formatDateToISO(this.state.selectedDate);
+        const selectedDoctor = this.doctors.find((d) => d.id === this.state.selectedDoctor);
+        const selectedDoctorData = this.doctors.find((d) => d.id === this.state.selectedDoctor);
+        const consultationCharge = selectedDoctorData?.consultationCharge ||
+            selectedDoctor?.consultationCharge ||
+            this.state.consultationCharge ||
+            "N/A";
         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(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" ${!dateStr ? "disabled" : ""} style="opacity: ${dateStr ? 1 : 0.6}">Next</button>
+      <div class="medos-section-card">
+        <div class="medos-section-header">
+          ${VanillaIcons.consultationType(14)}
+          <span class="medos-section-title">Consultation Type</span>
+        </div>
+        <div class="medos-section-body">
+          <div class="medos-consultation-options">
+            <label class="medos-radio-option ${this.state.consultationMode === "OFFLINE" ? "selected" : ""}">
+              <input 
+                type="radio" 
+                name="consultationMode" 
+                value="OFFLINE" 
+                ${this.state.consultationMode === "OFFLINE" ? "checked" : ""}
+                class="medos-radio-input"
+              />
+              <span class="medos-radio-label">In-Person Visit</span>
+            </label>
+            <label class="medos-radio-option ${this.state.consultationMode === "ONLINE" ? "selected" : ""}">
+              <input 
+                type="radio" 
+                name="consultationMode" 
+                value="ONLINE" 
+                ${this.state.consultationMode === "ONLINE" ? "checked" : ""}
+                class="medos-radio-input"
+              />
+              <span class="medos-radio-label">Online Consultation</span>
+            </label>
+          </div>
+          <div class="medos-consultation-charge">
+            <span class="medos-charge-label">Consultation Charge:</span>
+            <span class="medos-charge-value">${consultationCharge !== "N/A"
+            ? "₹" + consultationCharge
+            : consultationCharge}</span>
+          </div>
+        </div>
+      </div>
+
+      <div class="medos-section-card">
+        <div class="medos-section-header">
+          ${VanillaIcons.dateTime(14)}
+          <span class="medos-section-title">Select Date</span>
         </div>
+        <div class="medos-section-body">
+          <div id="medos-calendar-container"></div>
+        </div>
+      </div>
+
+      <div class="medos-actions">
+        <button class="medos-btn medos-btn-secondary" id="medos-btn-back">Back</button>
+        <button class="medos-btn medos-btn-primary" id="medos-btn-next" ${dateStr ? "" : "disabled"}>Next</button>
       </div>
     `;
     }
     renderStep2() {
+        const dateDisplay = this.state.selectedDate
+            ? this.state.selectedDate.toLocaleDateString("en-US", {
+                weekday: "long",
+                year: "numeric",
+                month: "long",
+                day: "numeric",
+            })
+            : "";
         return `
-      <div class="medos-appointment-section">
-        <label class="medos-appointment-label">Choose Time Slot</label>
-        ${this.state.slots.length === 0
-            ? '<div class="medos-appointment-small-muted">No slots available for selected date</div>'
+      <div class="medos-section-card">
+        <div class="medos-section-header">
+          ${VanillaIcons.clock(14)}
+          <span class="medos-section-title">Select Time Slot</span>
+        </div>
+        <div class="medos-section-body">
+          <div class="medos-selected-date-display">
+            ${VanillaIcons.dateTime(16)}
+            <span>${dateDisplay}</span>
+          </div>
+          ${this.state.slots.length === 0
+            ? '<div class="medos-empty-slots">No slots available for selected date</div>'
             : `
-            <div class="medos-appointment-slot-grid">
-              ${this.state.slots
+              <div class="medos-slots-grid">
+                ${this.state.slots
                 .map((s) => {
                 const start = new Date(s.start).toLocaleTimeString([], {
                     hour: "2-digit",
@@ -520,19 +721,28 @@ class AppointmentCalendarWidget {
                 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>
-                `;
+                    <div class="medos-slot-card ${selected ? "selected" : ""}" 
+                         data-slot-id="${this.escapeHtml(s.id || `${s.start}-${s.end}`)}" 
+                         data-slot-start="${this.escapeHtml(s.start)}" 
+                         data-slot-end="${this.escapeHtml(s.end)}">
+                      <span class="medos-slot-time">${start}</span>
+                      <span class="medos-slot-separator">-</span>
+                      <span class="medos-slot-time">${end}</span>
+                      ${selected
+                    ? `<span class="medos-slot-check">${VanillaIcons.check(14)}</span>`
+                    : ""}
+                    </div>
+                  `;
             })
                 .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.state.selectedSlot ? "disabled" : ""} style="opacity: ${this.state.selectedSlot ? 1 : 0.6}">Next</button>
+              </div>
+            `}
         </div>
       </div>
+      <div class="medos-actions">
+        <button class="medos-btn medos-btn-secondary" id="medos-btn-back">Back</button>
+        <button class="medos-btn medos-btn-primary" id="medos-btn-next" ${this.state.selectedSlot ? "" : "disabled"} style="opacity: ${this.state.selectedSlot ? 1 : 0.6}">Next</button>
+      </div>
     `;
     }
     renderStep3() {
@@ -541,46 +751,86 @@ class AppointmentCalendarWidget {
         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.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.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-section-card">
+          <div class="medos-section-header">
+            ${VanillaIcons.phone(14)}
+            <span class="medos-section-title">Phone Verification</span>
+          </div>
+          <div class="medos-section-body">
+            <p class="medos-section-description">Please enter your phone number for verification</p>
+            <div class="medos-phone-input-row">
+              <div class="medos-country-code-wrapper">
+                <div id="medos-country-code-container"></div>
+              </div>
+              <div class="medos-phone-wrapper">
+                <input 
+                  type="tel" 
+                  class="medos-input" 
+                  id="medos-phone" 
+                  placeholder="Enter phone number" 
+                  value="${this.escapeHtml(this.state.patientPhone)}" 
+                  maxlength="15"
+                />
+              </div>
+            </div>
+            ${this.state.patientPhone && !phoneValid
+                ? '<div class="medos-validation-error">Phone number should be 7-15 digits</div>'
                 : ""}
-          <div 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.state.otpSending ? "Sending..." : "Send OTP"}</button>
           </div>
         </div>
+        <div class="medos-actions">
+          <button class="medos-btn medos-btn-secondary" id="medos-btn-back">Back</button>
+          <button class="medos-btn medos-btn-primary" id="medos-btn-send-otp" ${canSendOtp ? "" : "disabled"}>${this.state.otpSending ? "Sending..." : "Send OTP"}</button>
+        </div>
       `;
         }
         if (this.state.otpVerified) {
             return `
-        <div class="medos-appointment-section">
-          <div class="medos-appointment-verified">✓ Phone verified successfully</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">Continue to Details</button>
+        <div class="medos-section-card">
+          <div class="medos-section-header">
+            ${VanillaIcons.phone(14)}
+            <span class="medos-section-title">Phone Verification</span>
+          </div>
+          <div class="medos-section-body">
+            <div class="medos-verified-badge">
+              ${VanillaIcons.successBadge(20)}
+              <span>Phone verified successfully</span>
+            </div>
+            <div class="medos-verified-number">${this.escapeHtml(this.state.countryCode)} ${this.escapeHtml(this.state.patientPhone)}</div>
           </div>
         </div>
+        <div class="medos-actions">
+          <button class="medos-btn medos-btn-secondary" id="medos-btn-back">Back</button>
+          <button class="medos-btn medos-btn-primary" id="medos-btn-next">Continue</button>
+        </div>
       `;
         }
         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.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.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 class="medos-section-card">
+        <div class="medos-section-header">
+          ${VanillaIcons.phone(14)}
+          <span class="medos-section-title">Enter OTP</span>
         </div>
+        <div class="medos-section-body">
+          <p class="medos-section-description">Enter the 6-digit code sent to ${this.escapeHtml(this.state.countryCode)} ${this.escapeHtml(this.state.patientPhone)}</p>
+          <div class="medos-otp-input-wrapper">
+            <input 
+              type="text" 
+              class="medos-input medos-otp-input" 
+              id="medos-otp" 
+              placeholder="Enter 6-digit OTP" 
+              value="${this.escapeHtml(this.state.otpCode)}" 
+              maxlength="6"
+            />
+          </div>
+          <button class="medos-link-btn" id="medos-btn-change-number">Change phone number</button>
+        </div>
+      </div>
+      <div class="medos-actions">
+        <button class="medos-btn medos-btn-secondary" id="medos-btn-resend-otp">Resend OTP</button>
+        <button class="medos-btn medos-btn-primary" id="medos-btn-verify-otp" ${this.state.otpCode.length === 6 && !this.state.otpVerifying
+            ? ""
+            : "disabled"}>${this.state.otpVerifying ? "Verifying..." : "Verify OTP"}</button>
       </div>
     `;
     }
@@ -593,50 +843,79 @@ class AppointmentCalendarWidget {
             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.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.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.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.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.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.state.patientCity)}" />
+      <div class="medos-section-card">
+        <div class="medos-section-header">
+          ${VanillaIcons.user(14)}
+          <span class="medos-section-title">Patient Information</span>
+        </div>
+        <div class="medos-section-body">
+          <div class="medos-form-row">
+            <div class="medos-form-group medos-form-group-flex">
+              <label class="medos-label">Full Name <span class="medos-required">*</span></label>
+              <input type="text" class="medos-input" id="medos-patient-name" placeholder="Enter full name" value="${this.escapeHtml(this.state.patientName)}" />
+            </div>
+            <div class="medos-form-group medos-form-group-small">
+              <label class="medos-label">Age</label>
+              <input type="number" class="medos-input" id="medos-patient-age" placeholder="Age" value="${this.escapeHtml(this.state.patientAge)}" />
+            </div>
           </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.state.patientState)}" />
+          <div class="medos-form-row">
+            <div class="medos-form-group medos-form-group-flex">
+              <label class="medos-label">Email</label>
+              <input type="email" class="medos-input" id="medos-patient-email" placeholder="patient@example.com" value="${this.escapeHtml(this.state.patientEmail)}" />
+            </div>
+            <div class="medos-form-group medos-form-group-small">
+              <label class="medos-label">Gender</label>
+              <div id="medos-gender-container"></div>
+            </div>
           </div>
+          <div class="medos-form-group">
+            <label class="medos-label">Blood Group <span class="medos-optional">(optional)</span></label>
+            <div id="medos-blood-group-container"></div>
+          </div>
+        </div>
+      </div>
+
+      <div class="medos-section-card">
+        <div class="medos-section-header">
+          ${VanillaIcons.mapPin(14)}
+          <span class="medos-section-title">Address Details</span>
         </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.state.patientCountry)}" />
+        <div class="medos-section-body">
+          <div class="medos-form-group">
+            <label class="medos-label">Address Line 1 <span class="medos-required">*</span></label>
+            <input type="text" class="medos-input" id="medos-patient-address" placeholder="Street address, building name, etc." value="${this.escapeHtml(this.state.patientAddress)}" />
           </div>
-          <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.state.patientZipcode)}" />
+          <div class="medos-form-row">
+            <div class="medos-form-group">
+              <label class="medos-label">City <span class="medos-required">*</span></label>
+              <input type="text" class="medos-input" id="medos-patient-city" placeholder="City" value="${this.escapeHtml(this.state.patientCity)}" />
+            </div>
+            <div class="medos-form-group">
+              <label class="medos-label">State <span class="medos-required">*</span></label>
+              <input type="text" class="medos-input" id="medos-patient-state" placeholder="State" value="${this.escapeHtml(this.state.patientState)}" />
+            </div>
+          </div>
+          <div class="medos-form-row">
+            <div class="medos-form-group">
+              <label class="medos-label">Country <span class="medos-required">*</span></label>
+              <input type="text" class="medos-input" id="medos-patient-country" placeholder="Country" value="${this.escapeHtml(this.state.patientCountry)}" />
+            </div>
+            <div class="medos-form-group">
+              <label class="medos-label">Zipcode <span class="medos-required">*</span></label>
+              <input type="text" class="medos-input" id="medos-patient-zipcode" placeholder="Zipcode" value="${this.escapeHtml(this.state.patientZipcode)}" />
+            </div>
+          </div>
+          <div class="medos-form-group">
+            <label class="medos-label">Landmark <span class="medos-optional">(optional)</span></label>
+            <input type="text" class="medos-input" id="medos-patient-landmark" placeholder="Nearby landmark" value="${this.escapeHtml(this.state.patientLandmark)}" />
           </div>
         </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.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.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.state.loading ? "disabled" : ""} style="opacity: ${canSubmit && !this.state.loading ? 1 : 0.6}">${this.state.loading ? "Booking..." : "Book Appointment"}</button>
-        </div>
+      </div>
+
+      <div class="medos-actions">
+        <button class="medos-btn medos-btn-secondary" id="medos-btn-back">Back</button>
+        <button class="medos-btn medos-btn-primary" id="medos-btn-submit" ${canSubmit && !this.state.loading ? "" : "disabled"}>${this.state.loading ? "Booking..." : "Book Appointment"}</button>
       </div>
     `;
     }
@@ -755,35 +1034,20 @@ class AppointmentCalendarWidget {
   `;
     }
     attachEventListeners() {
-        const addressSelect = this.container.querySelector("#medos-address-select");
-        if (addressSelect) {
-            addressSelect.addEventListener("change", (e) => {
-                const target = e.target;
-                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.state.selectedDoctor = Number(target.value) || null;
-                this.render();
-            });
-        }
-        const dateInput = this.container.querySelector("#medos-date-input");
-        if (dateInput) {
-            dateInput.addEventListener("change", (e) => {
+        const consultationRadios = this.container.querySelectorAll('input[name="consultationMode"]');
+        consultationRadios.forEach((radio) => {
+            radio.addEventListener("change", (e) => {
                 const target = e.target;
-                this.state.selectedDate = new Date(target.value);
+                this.state.consultationMode = target.value;
                 this.render();
             });
-        }
-        const slotCards = this.container.querySelectorAll(".medos-appointment-slot-card");
+        });
+        const slotCards = this.container.querySelectorAll(".medos-slot-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");
+                const slotId = card.dataset.slotId;
+                const slotStart = card.dataset.slotStart;
+                const slotEnd = card.dataset.slotEnd;
                 if (slotStart && slotEnd) {
                     this.state.selectedSlot = {
                         start: slotStart,
@@ -805,7 +1069,11 @@ class AppointmentCalendarWidget {
                 value = value.replace(/[^\d+]/g, "");
                 this.state.countryCode = value;
                 target.value = value;
-                this.render();
+                const sendOtpBtn = this.container.querySelector("#medos-btn-send-otp");
+                if (sendOtpBtn) {
+                    const canSendOtp = this.state.countryCode && this.state.patientPhone.length >= 10;
+                    sendOtpBtn.disabled = !canSendOtp;
+                }
             });
         }
         const phoneInput = this.container.querySelector("#medos-phone");
@@ -814,7 +1082,11 @@ class AppointmentCalendarWidget {
                 const target = e.target;
                 this.state.patientPhone = target.value.replace(/\D/g, "");
                 target.value = this.state.patientPhone;
-                this.render();
+                const sendOtpBtn = this.container.querySelector("#medos-btn-send-otp");
+                if (sendOtpBtn) {
+                    const canSendOtp = this.state.countryCode && this.state.patientPhone.length >= 10;
+                    sendOtpBtn.disabled = !canSendOtp;
+                }
             });
         }
         const otpInput = this.container.querySelector("#medos-otp");
@@ -822,7 +1094,10 @@ class AppointmentCalendarWidget {
             otpInput.addEventListener("input", (e) => {
                 const target = e.target;
                 this.state.otpCode = target.value;
-                this.render();
+                const verifyBtn = this.container.querySelector("#medos-btn-verify-otp");
+                if (verifyBtn) {
+                    verifyBtn.disabled = !(this.state.otpCode.length === 6 && !this.state.otpVerifying);
+                }
             });
         }
         const patientNameInput = this.container.querySelector("#medos-patient-name");
@@ -830,6 +1105,7 @@ class AppointmentCalendarWidget {
             patientNameInput.addEventListener("input", (e) => {
                 const target = e.target;
                 this.state.patientName = target.value;
+                this.updateSubmitButtonState();
             });
         }
         const patientAgeInput = this.container.querySelector("#medos-patient-age");
@@ -837,6 +1113,7 @@ class AppointmentCalendarWidget {
             patientAgeInput.addEventListener("input", (e) => {
                 const target = e.target;
                 this.state.patientAge = target.value;
+                this.updateSubmitButtonState();
             });
         }
         const patientEmailInput = this.container.querySelector("#medos-patient-email");
@@ -844,6 +1121,7 @@ class AppointmentCalendarWidget {
             patientEmailInput.addEventListener("input", (e) => {
                 const target = e.target;
                 this.state.patientEmail = target.value;
+                this.updateSubmitButtonState();
             });
         }
         const patientGenderSelect = this.container.querySelector("#medos-patient-gender");
@@ -858,6 +1136,7 @@ class AppointmentCalendarWidget {
             patientAddressInput.addEventListener("input", (e) => {
                 const target = e.target;
                 this.state.patientAddress = target.value;
+                this.updateSubmitButtonState();
             });
         }
         const patientCityInput = this.container.querySelector("#medos-patient-city");
@@ -865,6 +1144,7 @@ class AppointmentCalendarWidget {
             patientCityInput.addEventListener("input", (e) => {
                 const target = e.target;
                 this.state.patientCity = target.value;
+                this.updateSubmitButtonState();
             });
         }
         const patientStateInput = this.container.querySelector("#medos-patient-state");
@@ -872,6 +1152,7 @@ class AppointmentCalendarWidget {
             patientStateInput.addEventListener("input", (e) => {
                 const target = e.target;
                 this.state.patientState = target.value;
+                this.updateSubmitButtonState();
             });
         }
         const patientCountryInput = this.container.querySelector("#medos-patient-country");
@@ -879,6 +1160,7 @@ class AppointmentCalendarWidget {
             patientCountryInput.addEventListener("input", (e) => {
                 const target = e.target;
                 this.state.patientCountry = target.value;
+                this.updateSubmitButtonState();
             });
         }
         const patientZipcodeInput = this.container.querySelector("#medos-patient-zipcode");
@@ -886,6 +1168,7 @@ class AppointmentCalendarWidget {
             patientZipcodeInput.addEventListener("input", (e) => {
                 const target = e.target;
                 this.state.patientZipcode = target.value;
+                this.updateSubmitButtonState();
             });
         }
         const patientLandmarkInput = this.container.querySelector("#medos-patient-landmark");
@@ -897,7 +1180,11 @@ class AppointmentCalendarWidget {
         }
         const nextBtn = this.container.querySelector("#medos-btn-next");
         if (nextBtn) {
-            nextBtn.addEventListener("click", () => this.goToNext());
+            nextBtn.addEventListener("click", () => {
+                if (!nextBtn.disabled) {
+                    this.goToNext();
+                }
+            });
         }
         const backBtn = this.container.querySelector("#medos-btn-back");
         if (backBtn) {
@@ -905,11 +1192,19 @@ class AppointmentCalendarWidget {
         }
         const sendOtpBtn = this.container.querySelector("#medos-btn-send-otp");
         if (sendOtpBtn) {
-            sendOtpBtn.addEventListener("click", () => this.sendOtp());
+            sendOtpBtn.addEventListener("click", () => {
+                if (!sendOtpBtn.disabled) {
+                    this.sendOtp();
+                }
+            });
         }
         const verifyOtpBtn = this.container.querySelector("#medos-btn-verify-otp");
         if (verifyOtpBtn) {
-            verifyOtpBtn.addEventListener("click", () => this.verifyOtp());
+            verifyOtpBtn.addEventListener("click", () => {
+                if (!verifyOtpBtn.disabled) {
+                    this.verifyOtp();
+                }
+            });
         }
         const changeNumberBtn = this.container.querySelector("#medos-btn-change-number");
         if (changeNumberBtn) {
@@ -918,9 +1213,19 @@ class AppointmentCalendarWidget {
                 this.render();
             });
         }
+        const resendOtpBtn = this.container.querySelector("#medos-btn-resend-otp");
+        if (resendOtpBtn) {
+            resendOtpBtn.addEventListener("click", () => {
+                this.sendOtp();
+            });
+        }
         const submitBtn = this.container.querySelector("#medos-btn-submit");
         if (submitBtn) {
-            submitBtn.addEventListener("click", () => this.submitAppointment());
+            submitBtn.addEventListener("click", () => {
+                if (!submitBtn.disabled) {
+                    this.submitAppointment();
+                }
+            });
         }
         const bookAnotherBtn = this.container.querySelector("#medos-btn-book-another");
         if (bookAnotherBtn) {