medos-sdk 1.0.3 → 1.1.0

package/dist/vanilla/EnquiryFormWidget.js

@@ -0,0 +1,425 @@
+import { EnquiryService } from "../services/EnquiryService";
+import { MedosClient } from "../client/MedosClient";
+import { validateName, validateEmail, validatePhoneNumber, validateSubject, validateMessage, validateCountryCode, } from "../enquiry-form/validation";
+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 = "";
+    }
+}
+export 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);
+}
+export { EnquiryFormWidget };

package/dist/vanilla/client/MedosClient.d.ts

@@ -3,11 +3,9 @@ import { AddressesResponse } from "../services/AppointmentService";
 import { SendPhoneVerificationOtpPayload, VerifyPhoneVerificationOtpPayload } from "../services/PatientService";
 interface MedosClientConfig {
     apiKey: string;
-    baseURL?: string;
 }
 interface MedosClientSessionConfig {
     sessionToken: string;
-    baseURL?: string;
 }
 declare class MedosClient {
     private static instance;
@@ -16,8 +14,8 @@ declare class MedosClient {
     private static isRefreshing;
     private static pendingRequests;
     private static initPromise;
-    static init({ apiKey, baseURL, }: MedosClientConfig): Promise<void>;
-    static initWithSession({ sessionToken, baseURL, }: MedosClientSessionConfig): Promise<void>;
+    static init({ apiKey }: MedosClientConfig): Promise<void>;
+    static initWithSession({ sessionToken }: MedosClientSessionConfig): Promise<void>;
     private static initializeAxiosInstance;
     static fetchAllAddressesAndDoctors(): Promise<AddressesResponse>;
     static fetchAppointments(workspaceId: number, addressId: number, doctorId: number, appointmentDate: string): Promise<any[]>;

package/dist/vanilla/components/ContactInformationStep.d.ts

@@ -0,0 +1,13 @@
+import React from "react";
+export interface ContactInformationStepProps {
+    patientName: string;
+    patientEmail: string;
+    countryCode: string;
+    patientPhone: string;
+    onNameChange: (value: string) => void;
+    onEmailChange: (value: string) => void;
+    onCountryCodeChange: (value: string) => void;
+    onPhoneChange: (value: string) => void;
+    onNext: () => void;
+}
+export declare const ContactInformationStep: React.FC<ContactInformationStepProps>;

package/dist/vanilla/components/ContactPreferenceStep.d.ts

@@ -0,0 +1,9 @@
+import React from "react";
+export interface ContactPreferenceStepProps {
+    preferredContactMethod: "PHONE" | "EMAIL" | "BOTH";
+    onContactMethodChange: (method: "PHONE" | "EMAIL" | "BOTH") => void;
+    onBack: () => void;
+    onSubmit: () => void;
+    isLoading?: boolean;
+}
+export declare const ContactPreferenceStep: React.FC<ContactPreferenceStepProps>;

package/dist/vanilla/components/EnquiryForm.d.ts

@@ -0,0 +1,7 @@
+import React from "react";
+import { EnquirySubmission } from "../enquiry-form/types";
+export interface EnquiryFormProps {
+    onSuccess?: (enquiry: EnquirySubmission) => void;
+    onError?: (error: Error) => void;
+}
+export declare const EnquiryForm: React.FC<EnquiryFormProps>;

package/dist/vanilla/components/InquiryDetailsStep.d.ts

@@ -0,0 +1,10 @@
+import React from "react";
+export interface InquiryDetailsStepProps {
+    inquirySubject: string;
+    inquiryMessage: string;
+    onSubjectChange: (value: string) => void;
+    onMessageChange: (value: string) => void;
+    onBack: () => void;
+    onNext: () => void;
+}
+export declare const InquiryDetailsStep: React.FC<InquiryDetailsStepProps>;

package/dist/vanilla/components/SuccessStep.d.ts

@@ -1,3 +1,5 @@
 import React from "react";
-import { SuccessStepProps } from "./types";
+export interface SuccessStepProps {
+    onReset: () => void;
+}
 export declare const SuccessStep: React.FC<SuccessStepProps>;

package/dist/vanilla/components/theme-styles.d.ts

@@ -0,0 +1,12 @@
+import React from "react";
+import { MedosTheme } from "../core/theme/types";
+export declare function getContainerStyles(theme: MedosTheme, prefix?: string): Record<string, React.CSSProperties>;
+export declare function getButtonStyles(theme: MedosTheme, prefix?: string): Record<string, React.CSSProperties>;
+export declare function getPhoneVerifyStyles(theme: MedosTheme, prefix?: string): Record<string, React.CSSProperties>;
+export declare function getPatientDetailsStyles(theme: MedosTheme, prefix?: string): Record<string, React.CSSProperties>;
+export declare function getSuccessStyles(theme: MedosTheme, prefix?: string): Record<string, React.CSSProperties>;
+export declare const CONTAINER_STYLES: Record<string, React.CSSProperties>;
+export declare const BUTTON_STYLES: Record<string, React.CSSProperties>;
+export declare const PHONE_VERIFY_STYLES: Record<string, React.CSSProperties>;
+export declare const PATIENT_DETAILS_STYLES: Record<string, React.CSSProperties>;
+export declare const SUCCESS_STYLES: Record<string, React.CSSProperties>;

package/dist/vanilla/components/types.d.ts

@@ -17,7 +17,6 @@ export type PatientDetailsStepProps = {
     onSubmit: () => Promise<void>;
 };
 export type SuccessStepProps = {
-    state: AppointmentState;
     onReset: () => void;
 };
 export type PhoneInputSectionProps = {

package/dist/vanilla/core/index.d.ts

@@ -1,8 +1,12 @@
 export { MedosClient } from "../client/MedosClient";
+export * from "./theme";
 export * from "../appointments/provider";
 export * from "../appointments/types";
 export * from "../appointment-calendar/provider";
 export * from "../appointment-calendar/types";
+export * from "../enquiry-form/provider";
+export * from "../enquiry-form/types";
 export { PatientService, SendPhoneVerificationOtpPayload, VerifyPhoneVerificationOtpPayload, } from "../services/PatientService";
 export { AppointmentService, type BookAppointmentPayload, type PatientPayload, type PatientAddressPayload, type AddressesResponse, type AddressItem, } from "../services/AppointmentService";
 export { AuthService } from "../services/AuthService";
+export { EnquiryService } from "../services/EnquiryService";

package/dist/vanilla/core/theme/index.d.ts

@@ -0,0 +1,3 @@
+export * from "./types";
+export * from "./themes";
+export * from "./utils";

package/dist/vanilla/core/theme/themes.d.ts

@@ -0,0 +1,8 @@
+import { MedosTheme } from "./types";
+export declare const defaultTheme: MedosTheme;
+export declare const modernTheme: MedosTheme;
+export declare const themes: {
+    readonly default: MedosTheme;
+    readonly modern: MedosTheme;
+};
+export type ThemeName = keyof typeof themes;

package/dist/vanilla/core/theme/types.d.ts

@@ -0,0 +1,106 @@
+export interface ThemeColors {
+    primary: string;
+    primaryHover: string;
+    primaryActive: string;
+    secondary: string;
+    secondaryHover: string;
+    accent: string;
+    accentHover: string;
+    background: string;
+    backgroundSecondary: string;
+    backgroundTertiary: string;
+    surface: string;
+    surfaceHover: string;
+    border: string;
+    borderHover: string;
+    borderFocus: string;
+    text: string;
+    textSecondary: string;
+    textTertiary: string;
+    textDisabled: string;
+    textOnPrimary: string;
+    textOnSecondary: string;
+    success: string;
+    successBackground: string;
+    successBorder: string;
+    error: string;
+    errorBackground: string;
+    errorBorder: string;
+    warning: string;
+    warningBackground: string;
+    warningBorder: string;
+    info: string;
+    infoBackground: string;
+    infoBorder: string;
+}
+export interface ThemeTypography {
+    fontFamily: string;
+    fontFamilyHeading: string;
+    fontSizeXs: string;
+    fontSizeSm: string;
+    fontSizeMd: string;
+    fontSizeLg: string;
+    fontSizeXl: string;
+    fontSize2xl: string;
+    fontSize3xl: string;
+    fontWeightNormal: string;
+    fontWeightMedium: string;
+    fontWeightSemibold: string;
+    fontWeightBold: string;
+    lineHeightTight: string;
+    lineHeightNormal: string;
+    lineHeightRelaxed: string;
+}
+export interface ThemeSpacing {
+    xs: string;
+    sm: string;
+    md: string;
+    lg: string;
+    xl: string;
+    "2xl": string;
+    "3xl": string;
+    "4xl": string;
+}
+export interface ThemeShadows {
+    sm: string;
+    md: string;
+    lg: string;
+    xl: string;
+    "2xl": string;
+    none: string;
+}
+export interface ThemeRadii {
+    none: string;
+    sm: string;
+    md: string;
+    lg: string;
+    xl: string;
+    full: string;
+}
+export interface ThemeTransitions {
+    fast: string;
+    normal: string;
+    slow: string;
+}
+export interface MedosTheme {
+    name: string;
+    colors: ThemeColors;
+    typography: ThemeTypography;
+    spacing: ThemeSpacing;
+    shadows: ThemeShadows;
+    radii: ThemeRadii;
+    transitions: ThemeTransitions;
+}
+export type PartialTheme = {
+    name?: string;
+    colors?: Partial<ThemeColors>;
+    typography?: Partial<ThemeTypography>;
+    spacing?: Partial<ThemeSpacing>;
+    shadows?: Partial<ThemeShadows>;
+    radii?: Partial<ThemeRadii>;
+    transitions?: Partial<ThemeTransitions>;
+};
+export interface ThemeConfig {
+    theme?: MedosTheme | PartialTheme;
+    cssVariablePrefix?: string;
+}

package/dist/vanilla/core/theme/utils.d.ts

@@ -0,0 +1,8 @@
+import { MedosTheme, PartialTheme } from "./types";
+export declare function mergeTheme(partialTheme?: PartialTheme): MedosTheme;
+export declare function generateCssVariables(theme: MedosTheme, prefix?: string): string;
+export declare function generateCssVariablesObject(theme: MedosTheme, prefix?: string): Record<string, string>;
+export declare function getCssVar(prefix: string, category: string, key: string, fallback?: string): string;
+export declare function injectCssVariables(theme: MedosTheme, containerId: string, prefix?: string): void;
+export declare function createThemeStyleTag(theme: MedosTheme, prefix?: string, selector?: string): HTMLStyleElement | null;
+export declare function validateTheme(theme: any): string[];

package/dist/vanilla/enquiry-form/index.d.ts

@@ -0,0 +1,4 @@
+export * from "./types";
+export * from "./validation";
+export * from "./provider";
+export * from "./serialization";

package/dist/vanilla/enquiry-form/provider.d.ts

@@ -0,0 +1,3 @@
+import { Enquiry, EnquirySubmission } from "./types";
+export declare const submitEnquiry: (payload: EnquirySubmission) => Promise<Enquiry>;
+export declare const getEnquiry: (enquiryId: string) => Promise<Enquiry>;