medos-sdk 1.1.9 → 1.1.11

package/dist/vanilla/components/VanillaSelect.js

@@ -36,10 +36,12 @@ function injectSelectStyles() {
       text-align: left;
       box-sizing: border-box;
       color: var(--medos-color-text, #111827);
+      min-height: 40px;
     }
 
     .medos-select-trigger:hover:not(:disabled) {
       border-color: var(--medos-color-border-hover, #d1d5db);
+      background-color: #f8fafc;
     }
 
     .medos-select-trigger:focus:not(:disabled) {
@@ -73,6 +75,8 @@ function injectSelectStyles() {
       overflow: hidden;
       text-overflow: ellipsis;
       white-space: nowrap;
+      display: flex;
+      align-items: center;
     }
 
     .medos-select-placeholder {
@@ -112,6 +116,7 @@ function injectSelectStyles() {
       box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
       animation: medos-select-show 0.15s ease-out;
       box-sizing: border-box;
+      min-width: 180px;
     }
 
     @keyframes medos-select-show {
@@ -147,6 +152,7 @@ function injectSelectStyles() {
       transition: background-color 0.1s ease;
       box-sizing: border-box;
       color: #1e293b;
+      min-height: 36px;
     }
 
     .medos-select-item:hover:not(.medos-select-item-disabled) {
@@ -159,6 +165,7 @@ function injectSelectStyles() {
 
     .medos-select-item-selected {
       background-color: #f3f4f6;
+      font-weight: 500;
     }
 
     .medos-select-item-disabled {
@@ -182,6 +189,8 @@ function injectSelectStyles() {
     /* Item Text */
     .medos-select-item-text {
       flex: 1;
+      display: flex;
+      align-items: center;
     }
 
     /* Scrollbar styling */
@@ -202,6 +211,24 @@ function injectSelectStyles() {
     .medos-select-viewport::-webkit-scrollbar-thumb:hover {
       background: #94a3b8;
     }
+
+    /* Label styling for forms */
+    .medos-form-label {
+      display: block;
+      font-size: 14px;
+      font-weight: 500;
+      margin-bottom: 6px;
+      color: #374151;
+    }
+
+    .medos-form-group {
+      margin-bottom: 16px;
+    }
+
+    /* Contact method specific styling */
+    .medos-contact-method-container {
+      margin-top: 8px;
+    }
   `;
     document.head.appendChild(styleElement);
 }
@@ -245,6 +272,7 @@ export class VanillaSelect {
         button.className = `medos-select-trigger ${this.config.error ? "medos-select-trigger-error" : ""}`;
         button.setAttribute("aria-expanded", this.isOpen.toString());
         button.setAttribute("aria-haspopup", "listbox");
+        button.setAttribute("aria-label", "Select option");
         if (this.config.disabled) {
             button.disabled = true;
         }
@@ -276,6 +304,10 @@ export class VanillaSelect {
                 e.preventDefault();
                 this.open();
             }
+            else if (e.key === "ArrowUp") {
+                e.preventDefault();
+                this.open();
+            }
         });
     }
     toggleOpen() {
@@ -323,9 +355,17 @@ export class VanillaSelect {
         this.contentElement = document.createElement("div");
         this.contentElement.className = "medos-select-content";
         this.contentElement.setAttribute("role", "listbox");
-        this.contentElement.style.top = `${rect.bottom + scrollTop + 4}px`;
+        this.contentElement.setAttribute("aria-label", "Options");
+        const spaceBelow = window.innerHeight - rect.bottom;
+        const spaceAbove = rect.top;
+        const dropdownHeight = Math.min(256, this.options.length * 36 + 8);
+        let top = rect.bottom + scrollTop + 4;
+        if (spaceBelow < dropdownHeight && spaceAbove > dropdownHeight) {
+            top = rect.top + scrollTop - dropdownHeight - 4;
+        }
+        this.contentElement.style.top = `${top}px`;
         this.contentElement.style.left = `${rect.left + scrollLeft}px`;
-        this.contentElement.style.width = `${rect.width}px`;
+        this.contentElement.style.width = `${Math.max(rect.width, 180)}px`;
         this.contentElement.innerHTML = `
       <div class="medos-select-viewport">
         ${this.options
@@ -340,6 +380,7 @@ export class VanillaSelect {
             data-label="${this.escapeHtml(option.label)}"
             ${option.disabled ? 'data-disabled="true"' : ""}
             tabindex="${option.disabled ? "-1" : "0"}"
+            aria-label="${this.escapeHtml(option.label)}"
           >
             ${this.selectedValue === option.value
             ? `
@@ -366,9 +407,16 @@ export class VanillaSelect {
         const rect = this.triggerElement.getBoundingClientRect();
         const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
         const scrollLeft = window.pageXOffset || document.documentElement.scrollLeft;
-        this.contentElement.style.top = `${rect.bottom + scrollTop + 4}px`;
+        const spaceBelow = window.innerHeight - rect.bottom;
+        const spaceAbove = rect.top;
+        const dropdownHeight = Math.min(256, this.options.length * 36 + 8);
+        let top = rect.bottom + scrollTop + 4;
+        if (spaceBelow < dropdownHeight && spaceAbove > dropdownHeight) {
+            top = rect.top + scrollTop - dropdownHeight - 4;
+        }
+        this.contentElement.style.top = `${top}px`;
         this.contentElement.style.left = `${rect.left + scrollLeft}px`;
-        this.contentElement.style.width = `${rect.width}px`;
+        this.contentElement.style.width = `${Math.max(rect.width, 180)}px`;
     }
     attachPortalEvents() {
         this.handleDocumentClick = (e) => {
@@ -419,6 +467,14 @@ export class VanillaSelect {
                         this.selectValue(value, label);
                     }
                 }
+                else if (e.key === "Home") {
+                    e.preventDefault();
+                    this.focusFirstItem();
+                }
+                else if (e.key === "End") {
+                    e.preventDefault();
+                    this.focusLastItem();
+                }
             });
         }
     }
@@ -444,6 +500,11 @@ export class VanillaSelect {
             return;
         const currentFocused = document.activeElement;
         let currentIndex = items.indexOf(currentFocused);
+        if (currentIndex === -1) {
+            const targetIndex = direction > 0 ? 0 : items.length - 1;
+            items[targetIndex]?.focus();
+            return;
+        }
         let nextIndex = currentIndex + direction;
         if (nextIndex < 0)
             nextIndex = items.length - 1;
@@ -451,6 +512,19 @@ export class VanillaSelect {
             nextIndex = 0;
         items[nextIndex]?.focus();
     }
+    focusFirstItem() {
+        if (!this.contentElement)
+            return;
+        const firstItem = this.contentElement.querySelector(".medos-select-item:not(.medos-select-item-disabled)");
+        firstItem?.focus();
+    }
+    focusLastItem() {
+        if (!this.contentElement)
+            return;
+        const items = this.contentElement.querySelectorAll(".medos-select-item:not(.medos-select-item-disabled)");
+        const lastItem = items[items.length - 1];
+        lastItem?.focus();
+    }
     selectValue(value, label) {
         this.selectedValue = value;
         this.selectedLabel = label;
@@ -480,7 +554,6 @@ export class VanillaSelect {
     setDisabled(disabled) {
         this.config.disabled = disabled;
         this.renderTrigger();
-        this.attachTriggerEvents();
     }
     setError(error) {
         this.config.error = error;
@@ -496,6 +569,21 @@ export class VanillaSelect {
         return div.innerHTML;
     }
 }
+export function createContactMethodSelect(container, currentValue = "PHONE", onValueChange) {
+    const contactOptions = [
+        { value: "PHONE", label: "Phone" },
+        { value: "EMAIL", label: "Email" },
+        { value: "BOTH", label: "Both" },
+    ];
+    const select = new VanillaSelect(container, contactOptions, {
+        placeholder: "Select contact method",
+        onValueChange: (value) => {
+            onValueChange?.(value);
+        },
+    });
+    select.setValue(currentValue);
+    return select;
+}
 export function upgradeNativeSelect(selectElement, config = {}) {
     const options = Array.from(selectElement.options).map((opt) => ({
         value: opt.value,

package/dist/vanilla/components/appointment-booking/AppointmentCalender.d.ts

@@ -0,0 +1,5 @@
+import React from "react";
+export interface AppointmentCalenderProps {
+    onError?: (err: Error) => void;
+}
+export declare const AppointmentCalender: React.FC<AppointmentCalenderProps>;

package/dist/vanilla/components/appointment-booking/hooks/index.d.ts

@@ -0,0 +1,3 @@
+export { useAppointmentState } from "./useAppointmentState";
+export { useAppointmentFlow } from "./useAppointmentFlow";
+export { useInitializeAddresses } from "./useInitializeAddresses";

package/dist/vanilla/components/appointment-booking/hooks/useAppointmentFlow.d.ts

@@ -0,0 +1,8 @@
+import { AppointmentState } from "../types";
+export declare const useAppointmentFlow: (state: AppointmentState, dispatch: React.Dispatch<any>, onError?: (error: Error) => void) => {
+    goBack: () => void;
+    handleDateChange: (date: Date) => Promise<(() => void) | undefined>;
+    sendOtp: () => Promise<void>;
+    verifyOtp: () => Promise<void>;
+    submitAppointment: () => Promise<void>;
+};

package/dist/vanilla/components/appointment-booking/hooks/useAppointmentState.d.ts

@@ -0,0 +1,9 @@
+import { AppointmentState, AppointmentAction } from "../types";
+export declare const useAppointmentState: () => {
+    state: AppointmentState;
+    dispatch: import("react").Dispatch<AppointmentAction>;
+    setStep: (step: number) => void;
+    setError: (error: string | null) => void;
+    setLoading: (loading: boolean) => void;
+    resetForm: () => void;
+};

package/dist/vanilla/components/appointment-booking/hooks/useInitializeAddresses.d.ts

@@ -0,0 +1 @@
+export declare const useInitializeAddresses: (dispatch: React.Dispatch<any>, onError?: (error: Error) => void) => void;

package/dist/vanilla/components/appointment-booking/index.d.ts

@@ -0,0 +1,5 @@
+export { AppointmentCalender } from "./AppointmentCalender";
+export type { AppointmentCalenderProps } from "./AppointmentCalender";
+export { useAppointmentState, useAppointmentFlow, useInitializeAddresses, } from "./hooks";
+export type { AppointmentState, AppointmentAction } from "./types";
+export { INITIAL_STATE } from "./types";

package/dist/vanilla/components/appointment-booking/types.d.ts

@@ -0,0 +1,291 @@
+import { Doctor, Slot, AddressItem } from "../../services/AppointmentService";
+export interface Patient {
+    id: number;
+    firstName: string;
+    lastName: string;
+    email: string;
+    countryCode: string;
+    phoneNumber: string;
+    dob: string;
+    age: number;
+    gender: string;
+    bloodGroup: string;
+    mrn: string;
+    address: {
+        id: number;
+        completeAddress: string;
+        addressLine1: string;
+        addressLine2: string;
+        city: string;
+        state: string;
+        country: string;
+        zipcode: string;
+        landmark: string;
+        phoneNumber: string;
+        latitude: number;
+        longitude: number;
+    };
+}
+export interface SessionPackDoctor {
+    id: number;
+    fullName: string;
+    profilePicUrl: string | null;
+}
+export interface SessionPackResponse {
+    id: number;
+    workspaceId: number;
+    packageName: string;
+    description: string;
+    totalSessions: number;
+    packagePrice: number;
+    discount: number;
+    discountedPrice: number;
+    discountType: "PERCENTAGE" | "FLAT";
+    validityDays: number;
+    allowedConsultationModes: ("ONLINE" | "OFFLINE")[];
+    doctorIds: number[];
+    allowFamilyBooking: boolean;
+    maxFamilyMembers: number;
+    isActive: boolean;
+    allowedDoctors: SessionPackDoctor[];
+}
+export interface ActiveSessionPack {
+    id: number;
+    packageName: string;
+    totalSessions: number;
+    remainingSessions: number;
+    expiryDate: string;
+    purchaseDate?: string;
+    doctorId?: number;
+    doctorName?: string;
+    allowedConsultationModes?: ("ONLINE" | "OFFLINE")[];
+}
+export interface SessionPacksDetails {
+    associatedPatients: Patient[];
+    activeSessionPackResponses: ActiveSessionPack[];
+    allSessionPackResponses: SessionPackResponse[];
+}
+export interface SessionPack {
+    id: number;
+    name: string;
+    description?: string;
+    totalSessions: number;
+    remainingSessions: number;
+    price?: number;
+    validityDays?: number;
+    applicableOnline?: boolean;
+    applicableOffline?: boolean;
+    expiryDate: string;
+    purchaseDate?: string;
+    doctorId?: number;
+    doctorName?: string;
+}
+export interface AvailablePackage {
+    id: number;
+    name: string;
+    description?: string;
+    totalSessions: number;
+    sessions?: number;
+    price: number;
+    discountedPrice?: number;
+    discount?: number;
+    discountType?: "PERCENTAGE" | "FLAT";
+    currency?: string;
+    validityDays: number;
+    applicableOnline?: boolean;
+    applicableOffline?: boolean;
+    allowedConsultationModes?: ("ONLINE" | "OFFLINE")[];
+    allowedDoctors?: SessionPackDoctor[];
+}
+export type BookingOptionType = "session-pack" | "new-appointment" | "explore-packages" | null;
+export interface AppointmentState {
+    step: number;
+    loading: boolean;
+    error: string | null;
+    workspaceId: number | null;
+    addresses: AddressItem[];
+    addressDoctorsMap: Record<number, Doctor[]>;
+    selectedAddress: number | null;
+    selectedDoctor: number | null;
+    selectedDate: Date;
+    slots: Slot[];
+    selectedSlot: Slot | null;
+    consultationMode: "ONLINE" | "OFFLINE";
+    consultationCharge: string;
+    patientName: string;
+    patientAge: string;
+    patientEmail: string;
+    patientGender: string;
+    bloodGroup: string;
+    patientDob: string;
+    patientAddress: string;
+    patientCity: string;
+    patientState: string;
+    patientCountry: string;
+    patientZipcode: string;
+    patientLandmark: string;
+    countryCode: string;
+    patientPhone: string;
+    otpCode: string;
+    otpSent: boolean;
+    otpVerified: boolean;
+    otpSending: boolean;
+    otpVerifying: boolean;
+    verifiedPatients: Patient[];
+    selectedPatient: Patient | null;
+    useExistingPatient: boolean;
+    userSessionPacks: SessionPack[];
+    availablePackages: AvailablePackage[];
+    selectedSessionPack: SessionPack | null;
+    selectedNewPackage: AvailablePackage | null;
+    bookingOptionType: BookingOptionType;
+    showPackageExplorer: boolean;
+    packagesLoading: boolean;
+    bookingType: "PACKAGE_PURCHASE" | "ONE_TIME_APPOINTMENT" | "USE_ACTIVE_PACKAGE";
+    paymentMode: "CASH" | "CARD" | string;
+    packageConfigId?: number;
+    patientPackageId?: number;
+    packageAmount?: number;
+}
+export type AppointmentAction = {
+    type: "SET_STEP";
+    payload: number;
+} | {
+    type: "SET_LOADING";
+    payload: boolean;
+} | {
+    type: "SET_ERROR";
+    payload: string | null;
+} | {
+    type: "SET_WORKSPACE";
+    payload: {
+        id: number;
+        addresses: AddressItem[];
+    };
+} | {
+    type: "SET_SELECTED_ADDRESS";
+    payload: number | null;
+} | {
+    type: "SET_SELECTED_DOCTOR";
+    payload: number | null;
+} | {
+    type: "SET_SELECTED_DATE";
+    payload: Date;
+} | {
+    type: "SET_SLOTS";
+    payload: Slot[];
+} | {
+    type: "SET_SELECTED_SLOT";
+    payload: Slot | null;
+} | {
+    type: "SET_CONSULTATION_MODE";
+    payload: "ONLINE" | "OFFLINE";
+} | {
+    type: "SET_CONSULTATION_CHARGE";
+    payload: string;
+} | {
+    type: "SET_PATIENT_NAME";
+    payload: string;
+} | {
+    type: "SET_PATIENT_AGE";
+    payload: string;
+} | {
+    type: "SET_PATIENT_EMAIL";
+    payload: string;
+} | {
+    type: "SET_PATIENT_GENDER";
+    payload: string;
+} | {
+    type: "SET_BLOOD_GROUP";
+    payload: string;
+} | {
+    type: "SET_PATIENT_DOB";
+    payload: string;
+} | {
+    type: "SET_PATIENT_ADDRESS";
+    payload: string;
+} | {
+    type: "SET_PATIENT_CITY";
+    payload: string;
+} | {
+    type: "SET_PATIENT_STATE";
+    payload: string;
+} | {
+    type: "SET_PATIENT_COUNTRY";
+    payload: string;
+} | {
+    type: "SET_PATIENT_ZIPCODE";
+    payload: string;
+} | {
+    type: "SET_PATIENT_LANDMARK";
+    payload: string;
+} | {
+    type: "SET_COUNTRY_CODE";
+    payload: string;
+} | {
+    type: "SET_PATIENT_PHONE";
+    payload: string;
+} | {
+    type: "SET_OTP_CODE";
+    payload: string;
+} | {
+    type: "SET_OTP_SENT";
+    payload: boolean;
+} | {
+    type: "SET_OTP_VERIFIED";
+    payload: boolean;
+} | {
+    type: "SET_OTP_SENDING";
+    payload: boolean;
+} | {
+    type: "SET_OTP_VERIFYING";
+    payload: boolean;
+} | {
+    type: "SET_VERIFIED_PATIENTS";
+    payload: Patient[];
+} | {
+    type: "SET_SELECTED_PATIENT";
+    payload: Patient | null;
+} | {
+    type: "SET_USE_EXISTING_PATIENT";
+    payload: boolean;
+} | {
+    type: "SET_USER_SESSION_PACKS";
+    payload: SessionPack[];
+} | {
+    type: "SET_AVAILABLE_PACKAGES";
+    payload: AvailablePackage[];
+} | {
+    type: "SET_SELECTED_SESSION_PACK";
+    payload: SessionPack | null;
+} | {
+    type: "SET_SELECTED_NEW_PACKAGE";
+    payload: AvailablePackage | null;
+} | {
+    type: "SET_BOOKING_OPTION_TYPE";
+    payload: BookingOptionType;
+} | {
+    type: "SET_SHOW_PACKAGE_EXPLORER";
+    payload: boolean;
+} | {
+    type: "SET_PACKAGES_LOADING";
+    payload: boolean;
+} | {
+    type: "SET_BOOKING_TYPE";
+    payload: "PACKAGE_PURCHASE" | "ONE_TIME_APPOINTMENT" | "USE_ACTIVE_PACKAGE";
+} | {
+    type: "SET_PAYMENT_MODE";
+    payload: "CASH" | "CARD" | string;
+} | {
+    type: "SET_PACKAGE_CONFIG_ID";
+    payload: number | undefined;
+} | {
+    type: "SET_PATIENT_PACKAGE_ID";
+    payload: number | undefined;
+} | {
+    type: "SET_PACKAGE_AMOUNT";
+    payload: number | undefined;
+} | {
+    type: "RESET_FORM";
+};
+export declare const INITIAL_STATE: AppointmentState;