medos-sdk 1.0.2 → 1.0.3

package/dist/components/ui/select.js

@@ -0,0 +1,21 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from "react";
+const Select = React.forwardRef(({ className, children, ...props }, ref) => {
+    return (_jsx("select", { ref: ref, className: className, style: {
+            width: "100%",
+            padding: "8px 12px",
+            borderRadius: "6px",
+            border: "1px solid var(--medos-border-color, #e6e9ef)",
+            fontSize: "14px",
+            cursor: "pointer",
+            backgroundColor: "#fff",
+            fontFamily: "inherit",
+            ...props.style,
+        }, ...props, children: children }));
+});
+Select.displayName = "Select";
+const SelectOption = React.forwardRef(({ className, children, ...props }, ref) => {
+    return (_jsx("option", { ref: ref, className: className, ...props, children: children }));
+});
+SelectOption.displayName = "SelectOption";
+export { Select, SelectOption };

package/dist/components/uiComponents/SelectDropdown.d.ts

@@ -0,0 +1,41 @@
+import * as React from 'react';
+interface SelectProps {
+    children: React.ReactNode;
+    value?: string;
+    onValueChange?: (value: string) => void;
+    defaultValue?: string;
+    disabled?: boolean;
+}
+interface SelectTriggerProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+    children: React.ReactNode;
+    className?: string;
+    error?: boolean;
+}
+interface SelectValueProps {
+    placeholder?: string;
+}
+interface SelectContentProps extends React.HTMLAttributes<HTMLDivElement> {
+    children: React.ReactNode;
+    className?: string;
+}
+interface SelectItemProps extends React.HTMLAttributes<HTMLDivElement> {
+    children: React.ReactNode;
+    value: string;
+    className?: string;
+    disabled?: boolean;
+}
+interface BaseComponentProps {
+    children: React.ReactNode;
+    className?: string;
+}
+declare const Select: React.FC<SelectProps>;
+declare const SelectTrigger: React.ForwardRefExoticComponent<SelectTriggerProps & React.RefAttributes<HTMLButtonElement>>;
+declare const SelectValue: React.FC<SelectValueProps>;
+declare const SelectContent: React.ForwardRefExoticComponent<SelectContentProps & React.RefAttributes<HTMLDivElement>>;
+declare const SelectItem: React.ForwardRefExoticComponent<SelectItemProps & React.RefAttributes<HTMLDivElement>>;
+declare const SelectGroup: React.FC<BaseComponentProps>;
+declare const SelectLabel: React.FC<BaseComponentProps>;
+declare const SelectSeparator: React.FC<{
+    className?: string;
+}>;
+export { Select, SelectGroup, SelectValue, SelectTrigger, SelectContent, SelectLabel, SelectItem, SelectSeparator, };

package/dist/components/uiComponents/SelectDropdown.js

@@ -0,0 +1,302 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from 'react';
+import { ChevronDownIcon } from '../Icons/ChevronDownIcon';
+import { Check } from '../Icons/Check';
+const cn = (...classes) => {
+    return classes.filter(Boolean).join(' ');
+};
+if (typeof document !== 'undefined') {
+    const styleId = 'custom-select-styles';
+    if (!document.getElementById(styleId)) {
+        const styleElement = document.createElement('style');
+        styleElement.id = styleId;
+        styleElement.innerHTML = `
+    /* Container */
+    .select-container {
+      position: relative;
+      display: inline-block;
+      width: 100%;
+    }
+
+    /* Trigger Button */
+    .select-trigger {
+      display: flex;
+      height: 40px;
+      width: 100%;
+      align-items: center;
+      justify-content: space-between;
+      white-space: nowrap;
+      border-radius: 6px;
+      border: 1px solid #e2e8f0;
+      background-color: #fff;
+      padding: 8px 12px;
+      font-size: 14px;
+      line-height: 1.5;
+      box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+      transition: all 0.15s ease-in-out;
+      cursor: pointer;
+      outline: none;
+      font-family: inherit;
+      text-align: left;
+    }
+
+    .select-trigger:hover:not(:disabled) {
+      background-color: #f8fafc;
+      border-color: #cbd5e1;
+    }
+
+    .select-trigger:focus:not(:disabled) {
+      border-color: #94a3b8;
+      box-shadow: 0 0 0 2px rgba(148, 163, 184, 0.2);
+    }
+
+    .select-trigger:disabled {
+      cursor: not-allowed;
+      opacity: 0.5;
+      background-color: #f9fafb;
+    }
+
+    .select-trigger-error {
+      border-color: #ef4444;
+    }
+
+    .select-trigger-error:focus {
+      border-color: #ef4444;
+      box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.2);
+    }
+
+    /* Select Value */
+    .select-value {
+      flex: 1;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      color: #1e293b;
+    }
+
+    .select-placeholder {
+      color: #94a3b8;
+    }
+
+    /* Select Icon */
+    .select-icon {
+      height: 16px;
+      width: 16px;
+      opacity: 0.5;
+      flex-shrink: 0;
+      margin-left: 8px;
+      transition: transform 0.2s;
+    }
+
+    .select-trigger[aria-expanded="true"] .select-icon {
+      transform: rotate(180deg);
+    }
+
+    .select-icon-error {
+      color: #ef4444;
+    }
+
+    /* Content Dropdown */
+    .select-content {
+      position: absolute;
+      top: 100%;
+      left: 0;
+      right: 0;
+      z-index: 1050;
+      margin-top: 4px;
+      overflow: hidden;
+      border-radius: 6px;
+      border: 1px solid #e2e8f0;
+      background-color: #ffffff;
+      color: #1e293b;
+      box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+      animation: select-show 0.15s ease-out;
+    }
+
+    @keyframes select-show {
+      from {
+        opacity: 0;
+        transform: translateY(-4px);
+      }
+      to {
+        opacity: 1;
+        transform: translateY(0);
+      }
+    }
+
+    /* Viewport */
+    .select-viewport {
+      padding: 4px;
+      max-height: 256px;
+      overflow-y: auto;
+    }
+
+    /* Select Item */
+    .select-item {
+      position: relative;
+      display: flex;
+      width: 100%;
+      cursor: pointer;
+      user-select: none;
+      align-items: center;
+      border-radius: 4px;
+      padding: 8px 8px 8px 32px;
+      font-size: 14px;
+      outline: none;
+      transition: background-color 0.1s ease;
+    }
+
+    .select-item:hover:not(.select-item-disabled) {
+      background-color: #f1f5f9;
+    }
+
+    .select-item:focus {
+      background-color: #f1f5f9;
+    }
+
+    .select-item-selected {
+      background-color: #f3f4f6;
+    }
+
+    .select-item-disabled {
+      pointer-events: none;
+      opacity: 0.5;
+      cursor: not-allowed;
+    }
+
+    /* Item Indicator */
+    .select-item-indicator {
+      position: absolute;
+      left: 8px;
+      display: flex;
+      height: 14px;
+      width: 14px;
+      align-items: center;
+      justify-content: center;
+    }
+
+    /* Item Text */
+    .select-item-text {
+      flex: 1;
+    }
+
+    /* Select Group */
+    .select-group {
+      padding: 2px 0;
+    }
+
+    /* Select Label */
+    .select-label {
+      padding: 8px 8px 6px;
+      font-size: 12px;
+      font-weight: 600;
+      color: #64748b;
+    }
+
+    /* Select Separator */
+    .select-separator {
+      margin: 4px 0;
+      height: 1px;
+      background-color: #e2e8f0;
+    }
+
+    /* Scrollbar styling */
+    .select-viewport::-webkit-scrollbar {
+      width: 8px;
+    }
+
+    .select-viewport::-webkit-scrollbar-track {
+      background: #f1f5f9;
+      border-radius: 4px;
+    }
+
+    .select-viewport::-webkit-scrollbar-thumb {
+      background: #cbd5e1;
+      border-radius: 4px;
+    }
+
+    .select-viewport::-webkit-scrollbar-thumb:hover {
+      background: #94a3b8;
+    }
+  `;
+        document.head.appendChild(styleElement);
+    }
+}
+const SelectContext = React.createContext(undefined);
+const useSelectContext = () => {
+    const context = React.useContext(SelectContext);
+    if (!context) {
+        throw new Error('Select components must be used within a Select');
+    }
+    return context;
+};
+const Select = ({ children, value, onValueChange, defaultValue, disabled = false }) => {
+    const [isOpen, setIsOpen] = React.useState(false);
+    const [selectedValue, setSelectedValue] = React.useState(value || defaultValue || '');
+    const [selectedLabel, setSelectedLabel] = React.useState('');
+    const triggerRef = React.useRef(null);
+    const contentRef = React.useRef(null);
+    React.useEffect(() => {
+        if (value !== undefined) {
+            setSelectedValue(value);
+        }
+    }, [value]);
+    React.useEffect(() => {
+        const handleClickOutside = (event) => {
+            if (triggerRef.current &&
+                contentRef.current &&
+                !triggerRef.current.contains(event.target) &&
+                !contentRef.current.contains(event.target)) {
+                setIsOpen(false);
+            }
+        };
+        if (isOpen) {
+            document.addEventListener('mousedown', handleClickOutside);
+            return () => document.removeEventListener('mousedown', handleClickOutside);
+        }
+    }, [isOpen]);
+    const handleSelect = (value, label) => {
+        setSelectedValue(value);
+        setSelectedLabel(label);
+        if (onValueChange) {
+            onValueChange(value);
+        }
+        setIsOpen(false);
+    };
+    return (_jsx(SelectContext.Provider, { value: {
+            isOpen,
+            setIsOpen,
+            selectedValue,
+            selectedLabel,
+            handleSelect,
+            triggerRef,
+            contentRef,
+            disabled,
+        }, children: _jsx("div", { className: "select-container", children: children }) }));
+};
+const SelectTrigger = React.forwardRef(({ children, className, error = false, ...props }, ref) => {
+    const { isOpen, setIsOpen, triggerRef, disabled } = useSelectContext();
+    return (_jsxs("button", { ref: triggerRef, type: "button", className: cn('select-trigger', error && 'select-trigger-error', className), onClick: () => !disabled && setIsOpen(!isOpen), disabled: disabled, "aria-expanded": isOpen, "aria-haspopup": "listbox", ...props, children: [children, _jsx(ChevronDownIcon, { className: cn('select-icon', error && 'select-icon-error') })] }));
+});
+SelectTrigger.displayName = 'SelectTrigger';
+const SelectValue = ({ placeholder = 'Select...' }) => {
+    const { selectedLabel, selectedValue } = useSelectContext();
+    return (_jsx("span", { className: cn('select-value', !selectedValue && 'select-placeholder'), children: selectedLabel || placeholder }));
+};
+const SelectContent = React.forwardRef(({ children, className, ...props }, ref) => {
+    const { isOpen, contentRef } = useSelectContext();
+    if (!isOpen)
+        return null;
+    return (_jsx("div", { ref: contentRef, className: cn('select-content', className), role: "listbox", ...props, children: _jsx("div", { className: "select-viewport", children: children }) }));
+});
+SelectContent.displayName = 'SelectContent';
+const SelectItem = React.forwardRef(({ children, value, className, disabled = false, ...props }, ref) => {
+    const { selectedValue, handleSelect } = useSelectContext();
+    const isSelected = selectedValue === value;
+    return (_jsxs("div", { ref: ref, className: cn('select-item', isSelected && 'select-item-selected', disabled && 'select-item-disabled', className), onClick: () => !disabled && handleSelect(value, children), role: "option", "aria-selected": isSelected, "data-disabled": disabled, ...props, children: [isSelected && (_jsx("span", { className: "select-item-indicator", children: _jsx(Check, {}) })), _jsx("span", { className: "select-item-text", children: children })] }));
+});
+SelectItem.displayName = 'SelectItem';
+const SelectGroup = ({ children, className }) => (_jsx("div", { className: cn('select-group', className), children: children }));
+const SelectLabel = ({ children, className }) => (_jsx("div", { className: cn('select-label', className), children: children }));
+const SelectSeparator = ({ className }) => (_jsx("div", { className: cn('select-separator', className) }));
+export { Select, SelectGroup, SelectValue, SelectTrigger, SelectContent, SelectLabel, SelectItem, SelectSeparator, };

package/dist/components/utils.d.ts

@@ -0,0 +1,5 @@
+export declare const formatDateToISO: (date: Date) => string;
+export declare const parsePatientName: (fullName: string) => {
+    firstName: string;
+    lastName: string;
+};

package/dist/components/utils.js

@@ -0,0 +1,15 @@
+export const formatDateToISO = (date) => {
+    const year = String(date.getFullYear()).padStart(4, "0");
+    const month = String(date.getMonth() + 1).padStart(2, "0");
+    const day = String(date.getDate()).padStart(2, "0");
+    return `${year}-${month}-${day}`;
+};
+export const parsePatientName = (fullName) => {
+    const nameParts = fullName.trim().split(/\s+/);
+    const firstName = nameParts[0] || "Patient";
+    const lastName = nameParts.slice(1).join(" ") || "";
+    return {
+        firstName,
+        lastName,
+    };
+};

package/dist/components/validation.d.ts

@@ -0,0 +1,2 @@
+export declare const validatePhoneNumber: (phone: string) => boolean;
+export declare const validateCountryCode: (code: string) => boolean;

package/dist/components/validation.js

@@ -0,0 +1,7 @@
+export const validatePhoneNumber = (phone) => {
+    const cleaned = phone.replace(/\D/g, "");
+    return cleaned.length >= 7 && cleaned.length <= 15;
+};
+export const validateCountryCode = (code) => {
+    return /^\+[1-9]\d{0,3}$/.test(code);
+};

package/dist/context/TemplateContext.d.ts

@@ -0,0 +1,12 @@
+import React, { ReactNode } from "react";
+import type { TemplateId } from "../core";
+interface TemplateContextType {
+    templateId: TemplateId;
+}
+export interface TemplateProviderProps {
+    templateId: TemplateId;
+    children: ReactNode;
+}
+export declare const TemplateProvider: React.FC<TemplateProviderProps>;
+export declare const useTemplate: () => TemplateContextType;
+export {};

package/dist/context/TemplateContext.js

@@ -0,0 +1,19 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import React, { createContext, useContext, useEffect } from "react";
+import { injectTemplateStyles, removeTemplateStyles, } from "../lib/templateUtils";
+const TemplateContext = createContext(null);
+export const TemplateProvider = ({ templateId, children, }) => {
+    useEffect(() => {
+        injectTemplateStyles(templateId);
+        return () => removeTemplateStyles();
+    }, [templateId]);
+    const contextValue = React.useMemo(() => ({ templateId }), [templateId]);
+    return (_jsx(TemplateContext.Provider, { value: contextValue, children: _jsx("div", { className: "medos-sdk-container", children: children }) }));
+};
+export const useTemplate = () => {
+    const context = useContext(TemplateContext);
+    if (!context) {
+        return { templateId: "default" };
+    }
+    return context;
+};

package/dist/lib/templateUtils.d.ts

@@ -0,0 +1,3 @@
+import type { TemplateId } from "../core";
+export declare function injectTemplateStyles(templateId: TemplateId): void;
+export declare function removeTemplateStyles(): void;

package/dist/lib/templateUtils.js

@@ -0,0 +1,28 @@
+import { templateRegistry } from "../core";
+export function injectTemplateStyles(templateId) {
+    const existing = document.getElementById("medos-template-styles");
+    if (existing)
+        existing.remove();
+    const template = templateRegistry.getTemplate(templateId);
+    const style = document.createElement("style");
+    style.id = "medos-template-styles";
+    style.textContent = `
+    .medos-appointment-container {
+      --medos-primary-color: ${template.primaryColor} !important;
+      --medos-secondary-color: ${template.secondaryColor} !important;
+      --medos-accent-color: ${template.accentColor} !important;
+      --medos-background-color: ${template.backgroundColor} !important;
+      --medos-text-color: ${template.textColor} !important;
+      --medos-border-color: ${template.borderColor} !important;
+      --medos-muted-text: ${template.mutedText} !important;
+      --medos-success-color: ${template.successColor} !important;
+      --medos-error-color: ${template.errorColor} !important;
+    }
+  `;
+    document.head.appendChild(style);
+}
+export function removeTemplateStyles() {
+    const existing = document.getElementById("medos-template-styles");
+    if (existing)
+        existing.remove();
+}

package/dist/services/AppointmentService.d.ts

@@ -1,5 +1,5 @@
 export type Doctor = {
-    id: string;
+    id: number;
     name: string;
     specialty?: string;
     [key: string]: any;
@@ -58,7 +58,7 @@ type AppointmentPayload = {
     attachments?: File[];
 };
 type AddressItem = {
-    id: number | string;
+    id: number;
     completeAddress?: string;
     label?: string;
     address?: string;
@@ -67,7 +67,6 @@ type AddressItem = {
     doctorsCount?: number;
     totalConfiguredAppointments?: number;
     doctors?: Doctor[];
-    [key: string]: any;
 };
 type AddressesResponse = {
     totalAddresses?: number;
@@ -75,12 +74,12 @@ type AddressesResponse = {
     totalConfiguredAppointments?: number;
     totalPartialConfiguredAppointments?: number;
     totalNotConfiguredAppointments?: number;
-    workspaceId?: number | string;
+    workspaceId?: number;
     addresses: AddressItem[];
 };
 declare const AppointmentService: {
     getAddresses(): Promise<AddressesResponse>;
-    fetchSlots(workspaceId: string | number, addressId: string | number, doctorId: string | number, appointmentDate: string): Promise<Slot[]>;
+    fetchSlots(workspaceId: number, addressId: number, doctorId: number, appointmentDate: string): Promise<Slot[]>;
     createAppointment(payload: BookAppointmentPayload): Promise<any>;
 };
 export { AppointmentService, AppointmentPayload, BookAppointmentPayload, PatientPayload, PatientAddressPayload, AddressesResponse, AddressItem, };

package/dist/services/AppointmentService.js

@@ -10,18 +10,19 @@ const AppointmentService = {
                 .map((ad) => {
                 const addr = ad.address;
                 const doctors = (ad.doctors || []).map((d) => ({
-                    id: String(d.id ?? ""),
-                    name: `${d.firstName || ""} ${d.lastName || ""}`.trim() || "Doctor",
-                    email: d.email,
-                    gender: d.gender,
-                    countryCode: d.countryCode,
-                    phoneNumber: d.phoneNumber,
-                    dob: d.dob,
-                    platform: d.platform,
-                    isKycCompleted: d.isKycCompleted,
+                    id: Number(d.user.id),
+                    name: `${d.user.firstName || ""} ${d.user.lastName || ""}`.trim() ||
+                        "Doctor",
+                    email: d.user.email,
+                    gender: d.user.gender,
+                    countryCode: d.user.countryCode,
+                    phoneNumber: d.user.phoneNumber,
+                    dob: d.user.dob,
+                    platform: d.user.platform,
+                    isKycCompleted: d.user.isKycCompleted,
                 }));
                 return {
-                    id: String(addr.id ?? ""),
+                    id: Number(addr.id),
                     completeAddress: addr.completeAddress,
                     addressLine1: addr.addressLine1,
                     addressLine2: addr.addressLine2,
@@ -47,6 +48,7 @@ const AppointmentService = {
     },
     async fetchSlots(workspaceId, addressId, doctorId, appointmentDate) {
         const client = await MedosClient.ensureInitialized();
+        console.log("fetching slots", workspaceId, addressId, doctorId, appointmentDate);
         const res = await client.get(`/appointments/available-slots`, {
             params: {
                 workspaceId,

package/dist/templates/registry.d.ts

@@ -0,0 +1,12 @@
+import type { TemplateId, TemplateConfig } from "../core";
+export declare class TemplateRegistry {
+    private static instance;
+    private readonly templates;
+    private constructor();
+    static getInstance(): TemplateRegistry;
+    getTemplate(id: TemplateId): TemplateConfig;
+    getAllTemplates(): Record<TemplateId, TemplateConfig>;
+    hasTemplate(id: TemplateId): boolean;
+    private initializeTemplates;
+}
+export declare const templateRegistry: TemplateRegistry;

package/dist/templates/registry.js

@@ -0,0 +1,58 @@
+export class TemplateRegistry {
+    constructor() {
+        this.templates = new Map();
+        this.initializeTemplates();
+    }
+    static getInstance() {
+        if (!TemplateRegistry.instance) {
+            TemplateRegistry.instance = new TemplateRegistry();
+        }
+        return TemplateRegistry.instance;
+    }
+    getTemplate(id) {
+        const template = this.templates.get(id);
+        if (!template) {
+            return this.templates.get("default");
+        }
+        return template;
+    }
+    getAllTemplates() {
+        const result = {};
+        for (const [id, template] of this.templates) {
+            result[id] = template;
+        }
+        return result;
+    }
+    hasTemplate(id) {
+        return this.templates.has(id);
+    }
+    initializeTemplates() {
+        this.templates.set("default", {
+            id: "default",
+            name: "Default Blue",
+            primaryColor: "#0b79f7",
+            secondaryColor: "#eef2ff",
+            accentColor: "#0b79f7",
+            backgroundColor: "#f6f8fa",
+            textColor: "#333",
+            borderColor: "#e6e9ef",
+            mutedText: "#6b7280",
+            successColor: "#10b981",
+            errorColor: "#ef4444",
+        });
+        this.templates.set("alternative", {
+            id: "alternative",
+            name: "Alternative Green",
+            primaryColor: "#10b981",
+            secondaryColor: "#d1fae5",
+            accentColor: "#059669",
+            backgroundColor: "#f0fdf4",
+            textColor: "#1f2937",
+            borderColor: "#d1d5db",
+            mutedText: "#6b7280",
+            successColor: "#059669",
+            errorColor: "#dc2626",
+        });
+    }
+}
+export const templateRegistry = TemplateRegistry.getInstance();

package/dist/vanilla/AppointmentCalendarWidget.d.ts

@@ -10,44 +10,13 @@ declare class AppointmentCalendarWidget {
     private container;
     private options;
     private mounted;
-    private step;
-    private addresses;
-    private addressDoctorsMap;
-    private selectedAddress;
-    private workspaceId;
+    private state;
     private doctors;
-    private selectedDoctor;
-    private date;
-    private slots;
-    private selectedSlot;
-    private loading;
-    private error;
-    private patientName;
-    private patientAge;
-    private patientAddress;
-    private patientCity;
-    private patientState;
-    private patientCountry;
-    private patientZipcode;
-    private patientLandmark;
-    private patientEmail;
-    private patientGender;
-    private problemFacing;
-    private consultationCharge;
-    private countryCode;
-    private patientPhone;
-    private otpCode;
-    private otpSent;
-    private otpVerified;
-    private otpSending;
-    private otpVerifying;
     constructor(container: HTMLElement | string, options: AppointmentCalendarWidgetOptions);
     private init;
     private loadAddresses;
     private handleAddressChange;
     private loadSlots;
-    private validatePhoneNumber;
-    private validateCountryCode;
     private canProceedFromMergedStep;
     private sendOtp;
     private verifyOtp;
@@ -55,8 +24,7 @@ declare class AppointmentCalendarWidget {
     private goToNext;
     private goBack;
     private reset;
-    private setLoading;
-    private setError;
+    private setState;
     private render;
     private renderStep;
     private renderStep0;