medos-sdk 1.0.1 → 1.0.3

package/dist/vanilla/AppointmentCalendarWidget.js

@@ -0,0 +1,848 @@
+import { AppointmentService, } from "../services/AppointmentService";
+import { PatientService } from "../services/PatientService";
+import { MedosClient } from "../client/MedosClient";
+import { INITIAL_STATE, } from "../components/types";
+import { validatePhoneNumber, validateCountryCode, } from "../components/validation";
+import { formatDateToISO, parsePatientName } from "../components/utils";
+class AppointmentCalendarWidget {
+    constructor(container, options) {
+        this.mounted = true;
+        this.doctors = [];
+        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 = { ...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 {
+            throw new Error("Either apiKey or sessionToken must be provided");
+        }
+        await this.loadAddresses();
+        this.render();
+    }
+    async loadAddresses() {
+        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.state.workspaceId = addrResp.workspaceId;
+                }
+                if (fetchedAddresses.length > 0) {
+                    const addrMap = {};
+                    const mappedAddrs = fetchedAddresses.map((a, 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
+                            : [];
+                        addrMap[id] = docs || [];
+                        return { id, label };
+                    });
+                    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.state.selectedAddress = only.id;
+                        const docsForAddr = addrMap[only.id] || [];
+                        if (docsForAddr.length > 0) {
+                            this.doctors = docsForAddr;
+                            if (docsForAddr.length === 1) {
+                                this.state.selectedDoctor = docsForAddr[0].id;
+                                this.state.step = 1;
+                            }
+                            else {
+                                this.state.step = 0;
+                            }
+                        }
+                        else {
+                            if (anyDoctorsExist) {
+                                this.setState({
+                                    error: "No doctors at this address. Please choose a different address.",
+                                });
+                                this.doctors = [];
+                                this.state.step = 0;
+                            }
+                            else {
+                                this.setState({
+                                    error: "No doctors available for the selected location(s).",
+                                });
+                                this.doctors = [];
+                                this.state.step = 0;
+                            }
+                        }
+                    }
+                    else {
+                        this.state.step = 0;
+                    }
+                }
+                else {
+                    this.setState({ error: "No addresses or doctors available." });
+                    this.state.addresses = [];
+                    this.state.addressDoctorsMap = {};
+                    this.doctors = [];
+                    this.state.step = 0;
+                }
+            }
+        }
+        catch (e) {
+            const msg = e.message || "Failed to load addresses";
+            this.setState({ error: msg });
+            this.options.onError?.(e);
+        }
+        finally {
+            this.setState({ loading: false });
+        }
+    }
+    async handleAddressChange(addressId) {
+        this.state.selectedAddress = addressId;
+        if (!addressId) {
+            this.doctors = [];
+            this.state.selectedDoctor = null;
+            this.render();
+            return;
+        }
+        this.setState({ loading: true, error: null });
+        try {
+            const docsForAddr = this.state.addressDoctorsMap[addressId] ?? [];
+            if (docsForAddr.length > 0) {
+                this.doctors = docsForAddr;
+                if (docsForAddr.length === 1) {
+                    this.state.selectedDoctor = docsForAddr[0].id;
+                    this.state.step = 1;
+                }
+                else {
+                    this.state.selectedDoctor = null;
+                }
+            }
+            else {
+                const otherHasDoctors = Object.entries(this.state.addressDoctorsMap).some(([key, docs]) => Number(key) !== addressId && Array.isArray(docs) && docs.length > 0);
+                this.doctors = [];
+                this.state.selectedDoctor = null;
+                if (otherHasDoctors) {
+                    this.setState({
+                        error: "No doctors at this address. Please select a different address.",
+                    });
+                }
+                else {
+                    this.setState({
+                        error: "No doctors available for the selected location(s).",
+                    });
+                }
+            }
+        }
+        catch (e) {
+            this.setState({
+                error: e.message || "Failed to load doctors for address",
+            });
+        }
+        finally {
+            this.setState({ loading: false });
+            this.render();
+        }
+    }
+    async loadSlots() {
+        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.setState({ loading: true, error: null });
+        try {
+            const s = await AppointmentService.fetchSlots(this.state.workspaceId, this.state.selectedAddress, this.state.selectedDoctor, dateStr);
+            this.state.slots = s || [];
+        }
+        catch (e) {
+            this.setState({ error: e.message || "Failed to load slots" });
+        }
+        finally {
+            this.setState({ loading: false });
+            this.render();
+        }
+    }
+    canProceedFromMergedStep() {
+        if (this.state.addresses.length === 0 || this.doctors.length === 0)
+            return false;
+        if (this.state.addresses.length > 1 && !this.state.selectedAddress)
+            return false;
+        if (this.doctors.length > 1 && !this.state.selectedDoctor)
+            return false;
+        return true;
+    }
+    async sendOtp() {
+        this.setState({ error: null });
+        if (!this.state.countryCode) {
+            this.setState({ error: "Please enter country code." });
+            return;
+        }
+        if (!validateCountryCode(this.state.countryCode)) {
+            this.setState({
+                error: "Please enter a valid country code (e.g., +91, +1).",
+            });
+            return;
+        }
+        if (!this.state.patientPhone) {
+            this.setState({ error: "Please enter phone number." });
+            return;
+        }
+        if (!validatePhoneNumber(this.state.patientPhone)) {
+            this.setState({
+                error: "Please enter a valid phone number (7-15 digits).",
+            });
+            return;
+        }
+        this.setState({ otpSending: true });
+        this.render();
+        try {
+            await PatientService.sendPhoneVerificationOtp({
+                countryCode: this.state.countryCode,
+                phoneNumber: this.state.patientPhone,
+            });
+            this.setState({ otpSent: true, error: null });
+        }
+        catch (e) {
+            const msg = e.message || "Failed to send OTP";
+            this.setState({ error: msg });
+            this.options.onError?.(e);
+        }
+        finally {
+            this.setState({ otpSending: false });
+            this.render();
+        }
+    }
+    async verifyOtp() {
+        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.state.otpCode.length !== 6) {
+            this.setState({ error: "Please enter a 6-digit OTP code." });
+            return;
+        }
+        this.setState({ otpVerifying: true });
+        this.render();
+        try {
+            await PatientService.verifyPhoneVerificationOtp({
+                countryCode: this.state.countryCode,
+                phoneNumber: this.state.patientPhone,
+                otpCode: this.state.otpCode,
+            });
+            this.setState({ otpVerified: true, error: null });
+        }
+        catch (e) {
+            const msg = e.message || "Invalid OTP code";
+            this.setState({ error: msg });
+            this.options.onError?.(e);
+        }
+        finally {
+            this.setState({ otpVerifying: false });
+            this.render();
+        }
+    }
+    async submitAppointment() {
+        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.state.otpVerified) {
+            this.setState({ error: "Please verify your phone number first." });
+            return;
+        }
+        this.setState({ loading: true });
+        this.render();
+        try {
+            const { firstName, lastName } = parsePatientName(this.state.patientName || "Patient");
+            const startDate = new Date(this.state.selectedSlot.start);
+            const endDate = new Date(this.state.selectedSlot.end);
+            const appointmentDate = formatDateToISO(startDate);
+            const formatTime = (date) => {
+                const hours = String(date.getHours()).padStart(2, "0");
+                const minutes = String(date.getMinutes()).padStart(2, "0");
+                return `${hours}:${minutes}`;
+            };
+            const fromDateTimeTs = formatTime(startDate);
+            const toDateTimeTs = formatTime(endDate);
+            const patientAddressPayload = {
+                addressLine1: this.state.patientAddress,
+                city: this.state.patientCity,
+                state: this.state.patientState,
+                country: this.state.patientCountry,
+                zipcode: this.state.patientZipcode,
+                landmark: this.state.patientLandmark || undefined,
+            };
+            await AppointmentService.createAppointment({
+                workspaceId: this.state.workspaceId,
+                workspaceAddressId: this.state.selectedAddress,
+                doctorId: this.state.selectedDoctor,
+                mode: "OFFLINE",
+                appointmentDate,
+                fromDateTimeTs,
+                toDateTimeTs,
+                consultationCharge: this.state.consultationCharge || "0",
+                type: "CONSULTATION",
+                source: "SDK_POWERED_WEBSITE",
+                patientPayload: {
+                    firstName,
+                    lastName,
+                    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.state.step = 5;
+            this.options.onSuccess?.();
+        }
+        catch (e) {
+            const msg = e.message || "Failed to create appointment";
+            this.setState({ error: msg });
+            this.options.onError?.(e);
+        }
+        finally {
+            this.setState({ loading: false });
+            this.render();
+        }
+    }
+    goToNext() {
+        if (this.state.step === 0) {
+            if (this.state.addresses.length > 1 && !this.state.selectedAddress)
+                return;
+            if (this.doctors.length > 1 && !this.state.selectedDoctor)
+                return;
+            this.state.step = 1;
+            this.render();
+            return;
+        }
+        const dateStr = formatDateToISO(this.state.selectedDate);
+        if (this.state.step === 1 && dateStr) {
+            this.state.step = 2;
+            this.loadSlots();
+            return;
+        }
+        if (this.state.step === 2 && this.state.selectedSlot) {
+            this.state.step = 3;
+            this.render();
+            return;
+        }
+        if (this.state.step === 3 && this.state.otpVerified) {
+            this.state.step = 4;
+            this.render();
+            return;
+        }
+        this.state.step = Math.min(5, this.state.step + 1);
+        this.render();
+    }
+    goBack() {
+        this.state.step = Math.max(0, this.state.step - 1);
+        this.render();
+    }
+    reset() {
+        this.state = { ...INITIAL_STATE };
+        this.doctors = [];
+        this.render();
+    }
+    setState(updates) {
+        this.state = { ...this.state, ...updates };
+    }
+    render() {
+        if (!this.mounted)
+            return;
+        this.container.innerHTML = `
+      <div class="medos-appointment-container">
+        <div class="medos-appointment-card">
+          <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.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.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>
+      </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();
+            case 4:
+                return this.renderStep4();
+            case 5:
+                return this.renderStep5();
+            default:
+                return "";
+        }
+    }
+    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>
+          <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>
+        </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>
+    `;
+    }
+    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(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>
+      </div>
+    `;
+    }
+    renderStep2() {
+        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-appointment-slot-grid">
+              ${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("")}
+            </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>
+    `;
+    }
+    renderStep3() {
+        const countryCodeValid = this.state.countryCode && validateCountryCode(this.state.countryCode);
+        const phoneValid = this.state.patientPhone && validatePhoneNumber(this.state.patientPhone);
+        const canSendOtp = countryCodeValid && phoneValid && !this.state.otpSending;
+        if (!this.state.otpSent) {
+            return `
+        <div class="medos-appointment-section">
+          <label class="medos-appointment-label">Country Code</label>
+          <input type="text" class="medos-appointment-input" id="medos-country-code" placeholder="+91" value="${this.escapeHtml(this.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-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>
+      `;
+        }
+        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>
+        </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>
+      </div>
+    `;
+    }
+    renderStep4() {
+        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.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>
+          <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>
+        </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>
+          <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>
+        </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>
+    `;
+    }
+    renderStep5() {
+        return `
+      <div class="medos-appointment-section" style="text-align: center">
+        <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.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>
+        </div>
+      </div>
+    `;
+    }
+    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 target = e.target;
+                this.state.selectedDate = new Date(target.value);
+                this.render();
+            });
+        }
+        const slotCards = this.container.querySelectorAll(".medos-appointment-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");
+                if (slotStart && slotEnd) {
+                    this.state.selectedSlot = {
+                        start: slotStart,
+                        end: slotEnd,
+                        id: slotId || undefined,
+                    };
+                    this.render();
+                }
+            });
+        });
+        const countryCodeInput = this.container.querySelector("#medos-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;
+                this.render();
+            });
+        }
+        const phoneInput = this.container.querySelector("#medos-phone");
+        if (phoneInput) {
+            phoneInput.addEventListener("input", (e) => {
+                const target = e.target;
+                this.state.patientPhone = target.value.replace(/\D/g, "");
+                target.value = this.state.patientPhone;
+                this.render();
+            });
+        }
+        const otpInput = this.container.querySelector("#medos-otp");
+        if (otpInput) {
+            otpInput.addEventListener("input", (e) => {
+                const target = e.target;
+                this.state.otpCode = target.value;
+                this.render();
+            });
+        }
+        const patientNameInput = this.container.querySelector("#medos-patient-name");
+        if (patientNameInput) {
+            patientNameInput.addEventListener("input", (e) => {
+                const target = e.target;
+                this.state.patientName = target.value;
+            });
+        }
+        const patientAgeInput = this.container.querySelector("#medos-patient-age");
+        if (patientAgeInput) {
+            patientAgeInput.addEventListener("input", (e) => {
+                const target = e.target;
+                this.state.patientAge = target.value;
+            });
+        }
+        const patientEmailInput = this.container.querySelector("#medos-patient-email");
+        if (patientEmailInput) {
+            patientEmailInput.addEventListener("input", (e) => {
+                const target = e.target;
+                this.state.patientEmail = target.value;
+            });
+        }
+        const patientGenderSelect = this.container.querySelector("#medos-patient-gender");
+        if (patientGenderSelect) {
+            patientGenderSelect.addEventListener("change", (e) => {
+                const target = e.target;
+                this.state.patientGender = target.value;
+            });
+        }
+        const patientAddressInput = this.container.querySelector("#medos-patient-address");
+        if (patientAddressInput) {
+            patientAddressInput.addEventListener("input", (e) => {
+                const target = e.target;
+                this.state.patientAddress = target.value;
+            });
+        }
+        const patientCityInput = this.container.querySelector("#medos-patient-city");
+        if (patientCityInput) {
+            patientCityInput.addEventListener("input", (e) => {
+                const target = e.target;
+                this.state.patientCity = target.value;
+            });
+        }
+        const patientStateInput = this.container.querySelector("#medos-patient-state");
+        if (patientStateInput) {
+            patientStateInput.addEventListener("input", (e) => {
+                const target = e.target;
+                this.state.patientState = target.value;
+            });
+        }
+        const patientCountryInput = this.container.querySelector("#medos-patient-country");
+        if (patientCountryInput) {
+            patientCountryInput.addEventListener("input", (e) => {
+                const target = e.target;
+                this.state.patientCountry = target.value;
+            });
+        }
+        const patientZipcodeInput = this.container.querySelector("#medos-patient-zipcode");
+        if (patientZipcodeInput) {
+            patientZipcodeInput.addEventListener("input", (e) => {
+                const target = e.target;
+                this.state.patientZipcode = target.value;
+            });
+        }
+        const patientLandmarkInput = this.container.querySelector("#medos-patient-landmark");
+        if (patientLandmarkInput) {
+            patientLandmarkInput.addEventListener("input", (e) => {
+                const target = e.target;
+                this.state.patientLandmark = target.value;
+            });
+        }
+        const nextBtn = this.container.querySelector("#medos-btn-next");
+        if (nextBtn) {
+            nextBtn.addEventListener("click", () => this.goToNext());
+        }
+        const backBtn = this.container.querySelector("#medos-btn-back");
+        if (backBtn) {
+            backBtn.addEventListener("click", () => this.goBack());
+        }
+        const sendOtpBtn = this.container.querySelector("#medos-btn-send-otp");
+        if (sendOtpBtn) {
+            sendOtpBtn.addEventListener("click", () => this.sendOtp());
+        }
+        const verifyOtpBtn = this.container.querySelector("#medos-btn-verify-otp");
+        if (verifyOtpBtn) {
+            verifyOtpBtn.addEventListener("click", () => this.verifyOtp());
+        }
+        const changeNumberBtn = this.container.querySelector("#medos-btn-change-number");
+        if (changeNumberBtn) {
+            changeNumberBtn.addEventListener("click", () => {
+                this.setState({ otpSent: false, otpCode: "", otpVerified: false });
+                this.render();
+            });
+        }
+        const submitBtn = this.container.querySelector("#medos-btn-submit");
+        if (submitBtn) {
+            submitBtn.addEventListener("click", () => this.submitAppointment());
+        }
+        const bookAnotherBtn = this.container.querySelector("#medos-btn-book-another");
+        if (bookAnotherBtn) {
+            bookAnotherBtn.addEventListener("click", () => this.reset());
+        }
+    }
+    escapeHtml(text) {
+        const div = document.createElement("div");
+        div.textContent = text;
+        return div.innerHTML;
+    }
+    destroy() {
+        this.mounted = false;
+        this.container.innerHTML = "";
+    }
+}
+export function initAppointmentCalendar(options) {
+    const container = document.getElementById(options.containerId);
+    if (!container) {
+        throw new Error(`Container element with id "${options.containerId}" not found`);
+    }
+    return new AppointmentCalendarWidget(container, options);
+}
+export { AppointmentCalendarWidget };