medos-sdk 1.1.9 → 1.1.10

package/dist/components/AppointmentCalender.js

@@ -90,39 +90,38 @@ const appointmentReducer = (state, action) => {
 };
 export const AppointmentCalender = ({ onError, }) => {
     const [state, dispatch] = useReducer(appointmentReducer, INITIAL_STATE);
-    const handleDateChange = useCallback(async (date) => {
-        dispatch({ type: "SET_SELECTED_DATE", payload: date });
+    const fetchSlotsForDate = useCallback(async (date) => {
         if (!state.workspaceId ||
             !state.selectedAddress ||
             !state.selectedDoctor) {
             dispatch({ type: "SET_SLOTS", payload: [] });
             return;
         }
-        let mounted = true;
         dispatch({ type: "SET_LOADING", payload: true });
         dispatch({ type: "SET_ERROR", payload: null });
         try {
             const dateStr = formatDateToISO(date);
             const fetchedSlots = await AppointmentService.fetchSlots(state.workspaceId, state.selectedAddress, state.selectedDoctor, dateStr);
-            if (mounted) {
-                dispatch({ type: "SET_SLOTS", payload: fetchedSlots || [] });
-            }
+            dispatch({ type: "SET_SLOTS", payload: fetchedSlots || [] });
         }
         catch (e) {
-            if (mounted) {
-                const msg = e.message || "Failed to load slots";
-                dispatch({ type: "SET_ERROR", payload: msg });
-                onError?.(e);
-            }
+            const msg = e.message || "Failed to load slots";
+            dispatch({ type: "SET_ERROR", payload: msg });
+            onError?.(e);
         }
         finally {
-            if (mounted)
-                dispatch({ type: "SET_LOADING", payload: false });
+            dispatch({ type: "SET_LOADING", payload: false });
         }
-        return () => {
-            mounted = false;
-        };
     }, [state.workspaceId, state.selectedAddress, state.selectedDoctor, onError]);
+    const handleDateChange = useCallback(async (date) => {
+        dispatch({ type: "SET_SELECTED_DATE", payload: date });
+        fetchSlotsForDate(date);
+    }, [fetchSlotsForDate]);
+    useEffect(() => {
+        if (state.step === 1 && state.selectedDate) {
+            fetchSlotsForDate(state.selectedDate);
+        }
+    }, [state.step, state.selectedDate, fetchSlotsForDate]);
     useEffect(() => {
         let mounted = true;
         (async () => {
@@ -149,6 +148,8 @@ export const AppointmentCalender = ({ onError, }) => {
                                 payload: address.doctors[0].id,
                             });
                             dispatch({ type: "SET_STEP", payload: 1 });
+                            const today = new Date();
+                            dispatch({ type: "SET_SELECTED_DATE", payload: today });
                         }
                     }
                 }
@@ -174,14 +175,20 @@ export const AppointmentCalender = ({ onError, }) => {
         return () => {
             mounted = false;
         };
-    }, [onError]);
+    }, []);
     const goBack = useCallback(() => {
         if (state.step === 3) {
             dispatch({ type: "SET_OTP_SENT", payload: false });
             dispatch({ type: "SET_OTP_CODE", payload: "" });
             dispatch({ type: "SET_OTP_VERIFIED", payload: false });
+            dispatch({ type: "SET_STEP", payload: 1 });
+        }
+        else if (state.step === 4) {
+            dispatch({ type: "SET_STEP", payload: 3 });
+        }
+        else {
+            dispatch({ type: "SET_STEP", payload: Math.max(0, state.step - 1) });
         }
-        dispatch({ type: "SET_STEP", payload: Math.max(0, state.step - 1) });
     }, [state.step]);
     const goToNext = useCallback(() => {
         dispatch({ type: "SET_STEP", payload: Math.min(5, state.step + 1) });
@@ -227,7 +234,7 @@ export const AppointmentCalender = ({ onError, }) => {
         finally {
             dispatch({ type: "SET_OTP_SENDING", payload: false });
         }
-    }, [state.countryCode, state.patientPhone, onError]);
+    }, [state.countryCode, state.patientPhone]);
     const verifyOtp = useCallback(async () => {
         dispatch({ type: "SET_ERROR", payload: null });
         if (!state.countryCode || !state.patientPhone || !state.otpCode) {
@@ -262,7 +269,7 @@ export const AppointmentCalender = ({ onError, }) => {
         finally {
             dispatch({ type: "SET_OTP_VERIFYING", payload: false });
         }
-    }, [state.countryCode, state.patientPhone, state.otpCode, onError]);
+    }, [state.countryCode, state.patientPhone, state.otpCode]);
     const submitAppointment = useCallback(async () => {
         dispatch({ type: "SET_ERROR", payload: null });
         if (!state.selectedDoctor ||
@@ -355,6 +362,8 @@ export const AppointmentCalender = ({ onError, }) => {
         dispatch({ type: "SET_SELECTED_ADDRESS", payload: addrId });
         dispatch({ type: "SET_SELECTED_DOCTOR", payload: docId });
         dispatch({ type: "SET_STEP", payload: 1 });
+        const today = new Date();
+        dispatch({ type: "SET_SELECTED_DATE", payload: today });
     }, []);
     const handleDateTimeModalContinue = useCallback((mode, date, slot, charge) => {
         dispatch({ type: "SET_CONSULTATION_MODE", payload: mode });
@@ -365,17 +374,25 @@ export const AppointmentCalender = ({ onError, }) => {
     }, []);
     const theme = useTheme();
     const styles = getStyles(theme);
-    return (_jsx("div", { style: styles.container, children: _jsxs("div", { style: styles.card, children: [_jsx("div", { style: styles.header, children: _jsx("h2", { style: styles.title, children: "Book Appointment" }) }), _jsx("hr", {}), _jsxs("div", { style: styles.content, children: [state.loading && _jsx("div", { style: { marginBottom: 12 }, children: "Loading..." }), state.error && _jsx("div", { style: styles.errorMessage, children: state.error }), state.step === 0 && (_jsx(DoctorSelectModal, { onCancel: () => dispatch({ type: "SET_STEP", payload: 0 }), onContinue: handleDoctorSelect })), state.step === 1 && (_jsx(AppointmentDateTimeModal, { onlineFee: 500, offlineFee: 300, slots: state.slots, onCancel: goBack, onDateChange: handleDateChange, onContinue: handleDateTimeModalContinue })), state.step === 3 && (_jsx(PhoneVerificationStep, { state: state, dispatch: dispatch, onSendOtp: sendOtp, onVerifyOtp: verifyOtp, onBack: goBack, onContinue: goToNext })), state.step === 4 && (_jsx(PatientDetailsStep, { state: state, dispatch: dispatch, onBack: goBack, onSubmit: submitAppointment })), state.step === 5 && (_jsx(AppointmentConfirmationStep, { appointment: {
+    return (_jsx("div", { style: styles.container, children: _jsxs("div", { style: styles.card, children: [_jsx("div", { style: styles.header, children: _jsx("h2", { style: styles.title, children: "Book Appointment" }) }), _jsx("hr", {}), _jsxs("div", { style: styles.content, children: [state.loading && _jsx("div", { style: { marginBottom: 12 }, children: "Loading..." }), state.error && _jsx("div", { style: styles.errorMessage, children: state.error }), state.step === 0 && (_jsx(DoctorSelectModal, { addresses: state.addresses, addressDoctorsMap: state.addressDoctorsMap, selectedAddressId: state.selectedAddress, selectedDoctorId: state.selectedDoctor, onCancel: () => dispatch({ type: "SET_STEP", payload: 0 }), onContinue: handleDoctorSelect })), state.step === 1 && (_jsx(AppointmentDateTimeModal, { onlineFee: 500, offlineFee: 300, slots: state.slots, selectedDate: state.selectedDate, selectedSlot: state.selectedSlot, consultationMode: state.consultationMode, onCancel: goBack, onDateChange: handleDateChange, onContinue: handleDateTimeModalContinue })), state.step === 3 && (_jsx(PhoneVerificationStep, { state: state, dispatch: dispatch, onSendOtp: sendOtp, onVerifyOtp: verifyOtp, onBack: goBack, onContinue: goToNext })), state.step === 4 && (_jsx(PatientDetailsStep, { state: state, dispatch: dispatch, onBack: goBack, onSubmit: submitAppointment })), state.step === 5 && (_jsx(AppointmentConfirmationStep, { appointment: {
                                 patientName: state.patientName,
-                                visitationType: state.consultationMode === "ONLINE" ? "Online Consultation" : "In-Person Visit",
+                                visitationType: state.consultationMode === "ONLINE"
+                                    ? "Online Consultation"
+                                    : "In-Person Visit",
                                 appointmentDate: formatDateToISO(state.selectedDate),
-                                fromTime: state.selectedSlot?.start ? new Date(state.selectedSlot.start).toTimeString().slice(0, 5) : "",
-                                toTime: state.selectedSlot?.end ? new Date(state.selectedSlot.end).toTimeString().slice(0, 5) : "",
-                                location: state.addresses.find(addr => addr.id === state.selectedAddress)?.label || "Clinic",
+                                fromTime: state.selectedSlot?.start
+                                    ? new Date(state.selectedSlot.start)
+                                        .toTimeString()
+                                        .slice(0, 5)
+                                    : "",
+                                toTime: state.selectedSlot?.end
+                                    ? new Date(state.selectedSlot.end).toTimeString().slice(0, 5)
+                                    : "",
+                                location: state.addresses.find((addr) => addr.id === state.selectedAddress)?.label || "Clinic",
                                 mode: state.consultationMode,
-                                paymentMode: "Cash"
+                                paymentMode: "Cash",
                             }, patient: {
-                                patientName: state.patientName
+                                patientName: state.patientName,
                             }, onClose: resetForm })), _jsxs("div", { style: styles.branding, children: [_jsx("span", { style: styles.poweredBy, children: "Powered by" }), _jsx("a", { href: "https://medos.one", target: "_blank", rel: "noopener noreferrer", children: _jsx(MedosLogo, { style: { height: 50, width: "auto" } }) })] })] })] }) }));
 };
 const getStyles = (theme) => ({

package/dist/components/AppointmentConfirmationStep.d.ts

@@ -1,4 +1,5 @@
 import React from "react";
+import { Doctor, AddressItem } from "../services/AppointmentService";
 interface AppointmentDetails {
     patientName?: string;
     visitationType?: string;
@@ -18,6 +19,8 @@ interface AppointmentConfirmationStepProps {
         lastName?: string;
         patientName?: string;
     };
+    selectedDoctor?: Doctor | null;
+    selectedAddress?: AddressItem | null;
     onClose: () => void;
 }
 declare const AppointmentConfirmationStep: React.FC<AppointmentConfirmationStepProps>;

package/dist/components/AppointmentConfirmationStep.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useTheme } from "../react/hooks/useTheme";
 import { SuccessIcon } from "./Icons/SuccessIcon";
-const AppointmentConfirmationStep = ({ appointment, patient, onClose, }) => {
+const AppointmentConfirmationStep = ({ appointment, patient, selectedDoctor, selectedAddress, onClose }) => {
     const theme = useTheme();
     const calculateDuration = () => {
         if (appointment.duration)
@@ -20,17 +20,21 @@ const AppointmentConfirmationStep = ({ appointment, patient, onClose, }) => {
             return appointment.patientName;
         if (patient.patientName)
             return patient.patientName;
-        const parts = [patient.firstName, patient.middleName, patient.lastName].filter(Boolean);
+        const parts = [
+            patient.firstName,
+            patient.middleName,
+            patient.lastName,
+        ].filter(Boolean);
         return parts.join(" ") || "Patient";
     };
     const formatDate = (dateStr) => {
         try {
             const date = new Date(dateStr);
-            return date.toLocaleDateString('en-US', {
-                weekday: 'long',
-                year: 'numeric',
-                month: 'long',
-                day: 'numeric'
+            return date.toLocaleDateString("en-US", {
+                weekday: "long",
+                year: "numeric",
+                month: "long",
+                day: "numeric",
             });
         }
         catch {
@@ -40,10 +44,10 @@ const AppointmentConfirmationStep = ({ appointment, patient, onClose, }) => {
     const formatTime = (timeStr) => {
         try {
             const time = new Date(`2000-01-01T${timeStr}`);
-            return time.toLocaleTimeString('en-US', {
-                hour: 'numeric',
-                minute: '2-digit',
-                hour12: true
+            return time.toLocaleTimeString("en-US", {
+                hour: "numeric",
+                minute: "2-digit",
+                hour12: true,
             });
         }
         catch {
@@ -58,14 +62,14 @@ const AppointmentConfirmationStep = ({ appointment, patient, onClose, }) => {
             padding: "0",
             fontFamily: theme.typography.fontFamily,
             background: theme.colors.background,
-            minHeight: "500px"
+            minHeight: "500px",
         }, children: [_jsx("div", { style: {
                     padding: "20px 24px",
                     fontSize: 24,
                     fontWeight: "bold",
                     color: theme.colors.primary,
                     borderBottom: `2px solid ${theme.colors.border}`,
-                    background: theme.colors.surface
+                    background: theme.colors.surface,
                 }, children: "Appointment Confirmed" }), _jsxs("div", { style: {
                     flex: 1,
                     display: "flex",
@@ -76,35 +80,37 @@ const AppointmentConfirmationStep = ({ appointment, patient, onClose, }) => {
                     border: `2px solid ${theme.colors.border}`,
                     borderTop: "none",
                     background: theme.colors.surface,
-                    textAlign: "center"
+                    textAlign: "center",
                 }, children: [_jsx("h2", { style: {
                             fontSize: 20,
                             fontWeight: "600",
                             color: theme.colors.success,
-                            margin: "0 0 24px 0"
+                            margin: "0 0 24px 0",
                         }, children: "Appointment Confirmed" }), _jsx("div", { style: { marginBottom: 32 }, children: _jsx(SuccessIcon, { size: 64, checkColor: "white", shapeColor: theme.colors.success }) }), _jsxs("div", { style: {
                             width: "100%",
                             maxWidth: 500,
-                            marginBottom: 32
+                            marginBottom: 32,
                         }, children: [_jsx("h3", { style: {
                                     fontSize: 18,
                                     fontWeight: "600",
                                     color: theme.colors.success,
-                                    marginBottom: 24
+                                    marginBottom: 24,
                                 }, children: "Appointment Details" }), _jsxs("div", { style: {
                                     display: "flex",
                                     flexDirection: "column",
                                     gap: 12,
                                     fontSize: 16,
                                     lineHeight: 1.6,
-                                    color: theme.colors.text
-                                }, children: [_jsxs("div", { children: [_jsx("strong", { style: { color: theme.colors.success }, children: "Patient:" }), " ", patientName] }), appointment.visitationType && (_jsxs("div", { children: [_jsx("strong", { style: { color: theme.colors.success }, children: "Visitation Type:" }), " ", appointment.visitationType] })), appointment.appointmentDate && (_jsxs("div", { children: [_jsx("strong", { style: { color: theme.colors.success }, children: "Date:" }), " ", formatDate(appointment.appointmentDate)] })), appointment.fromTime && (_jsxs("div", { children: [_jsx("strong", { style: { color: theme.colors.success }, children: "Time:" }), " ", formatTime(appointment.fromTime)] })), _jsxs("div", { children: [_jsx("strong", { style: { color: theme.colors.success }, children: "Duration:" }), " ~", duration, " minutes"] }), appointment.location && (_jsxs("div", { children: [_jsx("strong", { style: { color: theme.colors.success }, children: "Location:" }), " ", appointment.location] }))] })] }), _jsx("div", { style: {
+                                    color: theme.colors.text,
+                                }, children: [_jsxs("div", { children: [_jsx("strong", { style: { color: theme.colors.success }, children: "Patient:" }), " ", patientName] }), selectedDoctor && (_jsxs("div", { children: [_jsx("strong", { style: { color: theme.colors.success }, children: "Doctor:" }), " ", selectedDoctor.name] })), appointment.visitationType && (_jsxs("div", { children: [_jsx("strong", { style: { color: theme.colors.success }, children: "Visitation Type:" }), " ", appointment.visitationType] })), appointment.appointmentDate && (_jsxs("div", { children: [_jsx("strong", { style: { color: theme.colors.success }, children: "Date:" }), " ", formatDate(appointment.appointmentDate)] })), appointment.fromTime && (_jsxs("div", { children: [_jsx("strong", { style: { color: theme.colors.success }, children: "Time:" }), " ", formatTime(appointment.fromTime)] })), _jsxs("div", { children: [_jsx("strong", { style: { color: theme.colors.success }, children: "Duration:" }), " ", "~", duration, " minutes"] }), selectedAddress && (_jsxs("div", { children: [_jsx("strong", { style: { color: theme.colors.success }, children: "Location:" }), " ", selectedAddress.completeAddress ||
+                                                selectedAddress.address ||
+                                                "Address not available"] })), appointment.location && !selectedAddress && (_jsxs("div", { children: [_jsx("strong", { style: { color: theme.colors.success }, children: "Location:" }), " ", appointment.location] }))] })] }), _jsx("div", { style: {
                             fontSize: 16,
                             fontStyle: "italic",
                             color: theme.colors.textSecondary,
                             textAlign: "center",
                             maxWidth: 600,
-                            lineHeight: 1.5
+                            lineHeight: 1.5,
                         }, children: "A confirmation email has been sent to the Patient's Email address." })] })] }));
 };
 export default AppointmentConfirmationStep;

package/dist/components/AppointmentDateTimeModal.d.ts

@@ -6,6 +6,9 @@ type AppointmentModalProps = {
     onlineFee?: number | null;
     offlineFee?: number | null;
     slots: Slot[];
+    selectedDate?: Date;
+    selectedSlot?: Slot | null;
+    consultationMode?: AppointmentMode;
     onCancel: () => void;
     onContinue: (mode: AppointmentMode, date: Date, slot: Slot, charge: string, paymentMode: PaymentMode) => void;
     onDateChange?: (date: Date) => void;

package/dist/components/AppointmentDateTimeModal.js

@@ -39,18 +39,36 @@ const formatDate = (date) => {
     const year = date.getFullYear();
     return `${day}${getOrdinalSuffix(day)} ${month} ${year}`;
 };
-export const AppointmentDateTimeModal = ({ onlineFee, offlineFee, slots, onCancel, onContinue, onDateChange, }) => {
+export const AppointmentDateTimeModal = ({ onlineFee, offlineFee, slots, selectedDate: initialSelectedDate, selectedSlot: initialSelectedSlot, consultationMode: initialConsultationMode, onCancel, onContinue, onDateChange, }) => {
     const theme = useTheme();
-    const [mode, setMode] = useState("OFFLINE");
+    const [mode, setMode] = useState(initialConsultationMode || "OFFLINE");
     const [consultationCharge, setConsultationCharge] = useState("");
     const [paymentMode, setPaymentMode] = useState("CASH");
-    const [selectedDate, setSelectedDate] = useState(new Date());
-    const [selectedSlot, setSelectedSlot] = useState(null);
+    const [selectedDate, setSelectedDate] = useState(initialSelectedDate || new Date());
+    const [selectedSlot, setSelectedSlot] = useState(initialSelectedSlot || null);
+    useEffect(() => {
+        if (initialSelectedDate) {
+            setSelectedDate(initialSelectedDate);
+        }
+    }, [initialSelectedDate]);
+    useEffect(() => {
+        if (initialSelectedSlot) {
+            setSelectedSlot(initialSelectedSlot);
+        }
+    }, [initialSelectedSlot]);
+    useEffect(() => {
+        if (initialConsultationMode) {
+            setMode(initialConsultationMode);
+        }
+    }, [initialConsultationMode]);
     const handleDateSelect = useCallback((date) => {
+        const dateChanged = date.toDateString() !== selectedDate.toDateString();
         setSelectedDate(date);
-        setSelectedSlot(null);
+        if (dateChanged) {
+            setSelectedSlot(null);
+        }
         onDateChange?.(date);
-    }, [onDateChange]);
+    }, [selectedDate, onDateChange]);
     useEffect(() => {
         const charge = mode === "ONLINE" && onlineFee
             ? String(onlineFee)

package/dist/components/ContactInformationStep.js

@@ -1,14 +1,15 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from "react";
 import { useTheme } from "../react/hooks/useTheme";
 import { getContainerStyles, getPhoneVerifyStyles, getButtonStyles, } from "./theme-styles";
-export const ContactInformationStep = ({ patientName, patientEmail, countryCode, patientPhone, onNameChange, onEmailChange, onCountryCodeChange, onPhoneChange, onNext, }) => {
+export const ContactInformationStep = React.memo(({ patientName, patientEmail, countryCode, patientPhone, onNameChange, onEmailChange, onCountryCodeChange, onPhoneChange, onNext, }) => {
     const theme = useTheme();
-    const PHONE_VERIFY_STYLES = getPhoneVerifyStyles(theme);
-    const BUTTON_STYLES = getButtonStyles(theme);
-    const CONTAINER_STYLES = getContainerStyles(theme);
+    const PHONE_VERIFY_STYLES = React.useMemo(() => getPhoneVerifyStyles(theme), [theme]);
+    const BUTTON_STYLES = React.useMemo(() => getButtonStyles(theme), [theme]);
+    const CONTAINER_STYLES = React.useMemo(() => getContainerStyles(theme), [theme]);
     return (_jsxs("div", { children: [_jsxs("div", { style: { marginBottom: "16px" }, children: [_jsx("label", { style: PHONE_VERIFY_STYLES.label, children: "Name" }), _jsx("input", { type: "text", value: patientName, onChange: (e) => onNameChange(e.target.value), placeholder: "Enter your full name", style: PHONE_VERIFY_STYLES.phoneInput })] }), _jsxs("div", { style: { marginBottom: "16px" }, children: [_jsx("label", { style: PHONE_VERIFY_STYLES.label, children: "Email" }), _jsx("input", { type: "email", value: patientEmail, onChange: (e) => onEmailChange(e.target.value), placeholder: "Enter your email", style: PHONE_VERIFY_STYLES.phoneInput })] }), _jsxs("div", { style: { marginBottom: "16px" }, children: [_jsx("label", { style: PHONE_VERIFY_STYLES.label, children: "Phone Number" }), _jsxs("div", { style: PHONE_VERIFY_STYLES.phoneInputContainer, children: [_jsx("input", { type: "text", value: countryCode, onChange: (e) => onCountryCodeChange(e.target.value), placeholder: "+91", style: {
                                     ...PHONE_VERIFY_STYLES.phoneInput,
                                     width: "80px",
                                     flex: "none",
                                 } }), _jsx("input", { type: "tel", value: patientPhone, onChange: (e) => onPhoneChange(e.target.value), placeholder: "Enter phone number", style: PHONE_VERIFY_STYLES.phoneInput })] })] }), _jsx("div", { style: CONTAINER_STYLES.actions, children: _jsx("button", { onClick: onNext, style: BUTTON_STYLES.primary, children: "Next" }) })] }));
-};
+});

package/dist/components/ContactPreferenceStep.js

@@ -1,10 +1,11 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from "react";
 import { useTheme } from "../react/hooks/useTheme";
 import { getPhoneVerifyStyles, getButtonStyles, getContainerStyles, } from "./theme-styles";
-export const ContactPreferenceStep = ({ preferredContactMethod, onContactMethodChange, onBack, onSubmit, isLoading = false, }) => {
+export const ContactPreferenceStep = React.memo(({ preferredContactMethod, onContactMethodChange, onBack, onSubmit, isLoading = false, }) => {
     const theme = useTheme();
-    const PHONE_VERIFY_STYLES = getPhoneVerifyStyles(theme);
-    const BUTTON_STYLES = getButtonStyles(theme);
-    const CONTAINER_STYLES = getContainerStyles(theme);
+    const PHONE_VERIFY_STYLES = React.useMemo(() => getPhoneVerifyStyles(theme), [theme]);
+    const BUTTON_STYLES = React.useMemo(() => getButtonStyles(theme), [theme]);
+    const CONTAINER_STYLES = React.useMemo(() => getContainerStyles(theme), [theme]);
     return (_jsxs("div", { children: [_jsxs("div", { style: { marginBottom: "16px" }, children: [_jsx("label", { style: PHONE_VERIFY_STYLES.label, children: "Preferred Contact Method" }), _jsxs("div", { style: { display: "flex", flexDirection: "column", gap: "8px" }, children: [_jsxs("label", { style: { display: "flex", alignItems: "center", gap: "8px" }, children: [_jsx("input", { type: "radio", name: "contactMethod", value: "PHONE", checked: preferredContactMethod === "PHONE", onChange: (e) => onContactMethodChange(e.target.value) }), "Phone"] }), _jsxs("label", { style: { display: "flex", alignItems: "center", gap: "8px" }, children: [_jsx("input", { type: "radio", name: "contactMethod", value: "EMAIL", checked: preferredContactMethod === "EMAIL", onChange: (e) => onContactMethodChange(e.target.value) }), "Email"] }), _jsxs("label", { style: { display: "flex", alignItems: "center", gap: "8px" }, children: [_jsx("input", { type: "radio", name: "contactMethod", value: "BOTH", checked: preferredContactMethod === "BOTH", onChange: (e) => onContactMethodChange(e.target.value) }), "Both"] })] })] }), _jsxs("div", { style: CONTAINER_STYLES.actions, children: [_jsx("button", { onClick: onBack, style: BUTTON_STYLES.secondary, children: "Back" }), _jsx("button", { onClick: onSubmit, style: BUTTON_STYLES.primary, children: isLoading ? "Submitting..." : "Submit" })] })] }));
-};
+});

package/dist/components/DoctorSelectModal.d.ts

@@ -1,5 +1,10 @@
 import React from "react";
+import { Doctor, AddressItem } from "../services/AppointmentService";
 type DoctorSelectModalProps = {
+    addresses?: AddressItem[];
+    addressDoctorsMap?: Record<number, Doctor[]>;
+    selectedAddressId?: number | null;
+    selectedDoctorId?: number | null;
     onCancel: () => void;
     onContinue: (addressId: number, doctorId: number, notes?: string) => void;
 };

package/dist/components/DoctorSelectModal.js

@@ -1,29 +1,66 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState, useEffect } from "react";
 import { AppointmentService, } from "../services/AppointmentService";
-import { Select, SelectTrigger, SelectValue, SelectContent, SelectItem, } from "./uiComponents/SelectDropdown";
+import { Select, SelectTrigger, SelectContent, SelectItem, } from "./uiComponents/SelectDropdown";
 import { useTheme } from "../react/hooks/useTheme";
-export const DoctorSelectModal = ({ onCancel, onContinue, }) => {
+export const DoctorSelectModal = ({ addresses: initialAddresses, addressDoctorsMap: initialAddressDoctorsMap, selectedAddressId: initialSelectedAddressId, selectedDoctorId: initialSelectedDoctorId, onCancel, onContinue, }) => {
     const theme = useTheme();
-    const [addresses, setAddresses] = useState([]);
-    const [addressDoctorsMap, setAddressDoctorsMap] = useState({});
-    const [selectedAddressId, setSelectedAddressId] = useState("");
-    const [selectedDoctorId, setSelectedDoctorId] = useState("");
+    const [addresses, setAddresses] = useState(initialAddresses || []);
+    const [addressDoctorsMap, setAddressDoctorsMap] = useState(initialAddressDoctorsMap || {});
+    const [selectedAddressId, setSelectedAddressId] = useState(initialSelectedAddressId ? String(initialSelectedAddressId) : "");
+    const [selectedDoctorId, setSelectedDoctorId] = useState(initialSelectedDoctorId ? String(initialSelectedDoctorId) : "");
     const [appointmentNotes, setAppointmentNotes] = useState("");
     useEffect(() => {
-        (async () => {
-            const res = await AppointmentService.getAddresses();
-            const map = {};
-            res.addresses.forEach((addr) => {
-                map[addr.id] = addr.doctors || [];
-            });
-            setAddresses(res.addresses);
-            setAddressDoctorsMap(map);
-        })();
+        if (initialAddresses && initialAddresses.length > 0) {
+            setAddresses(initialAddresses);
+        }
+        if (initialAddressDoctorsMap &&
+            Object.keys(initialAddressDoctorsMap).length > 0) {
+            setAddressDoctorsMap(initialAddressDoctorsMap);
+        }
+        if (initialSelectedAddressId !== undefined &&
+            initialSelectedAddressId !== null) {
+            setSelectedAddressId(String(initialSelectedAddressId));
+        }
+        if (initialSelectedDoctorId !== undefined &&
+            initialSelectedDoctorId !== null) {
+            setSelectedDoctorId(String(initialSelectedDoctorId));
+        }
+    }, [
+        initialAddresses,
+        initialAddressDoctorsMap,
+        initialSelectedAddressId,
+        initialSelectedDoctorId,
+    ]);
+    useEffect(() => {
+        if (!initialAddresses || initialAddresses.length === 0) {
+            (async () => {
+                try {
+                    const response = await AppointmentService.getAddresses();
+                    if (response.addresses?.length > 0) {
+                        setAddresses(response.addresses);
+                        const doctorMap = {};
+                        response.addresses.forEach((addr) => {
+                            doctorMap[addr.id] = addr.doctors || [];
+                        });
+                        setAddressDoctorsMap(doctorMap);
+                    }
+                }
+                catch (error) {
+                    console.error("Failed to fetch addresses:", error);
+                }
+            })();
+        }
     }, []);
     const doctorsForAddress = selectedAddressId
         ? addressDoctorsMap[Number(selectedAddressId)] || []
         : [];
+    const selectedAddressLabel = addresses.find((a) => String(a.id) === selectedAddressId)?.label ||
+        addresses.find((a) => String(a.id) === selectedAddressId)
+            ?.completeAddress ||
+        "";
+    const selectedDoctorLabel = doctorsForAddress.find((d) => String(d.id) === selectedDoctorId)?.name ||
+        "";
     const canContinue = !!selectedAddressId && !!selectedDoctorId;
     const styles = getStyles(theme);
     return (_jsx("div", { style: {
@@ -32,7 +69,19 @@ export const DoctorSelectModal = ({ onCancel, onContinue, }) => {
         }, children: _jsxs("div", { style: styles.modalWrapper, children: [_jsx("div", { style: styles.headerWrapper, children: _jsx("h3", { style: styles.title, children: "Location & Doctor" }) }), _jsx("div", { style: { borderBottom: `1px solid ${theme.colors.border}` } }), _jsxs("div", { style: styles.contentWrapper, children: [_jsxs("div", { style: styles.fieldGroup, children: [_jsxs("label", { style: styles.label, children: ["Preferred Location ", _jsx("span", { style: styles.mandatory, children: "*" })] }), _jsxs(Select, { value: selectedAddressId, onValueChange: (value) => {
                                         setSelectedAddressId(value);
                                         setSelectedDoctorId("");
-                                    }, children: [_jsx(SelectTrigger, { style: { width: "100%" }, children: _jsx(SelectValue, { placeholder: "Select Address" }) }), _jsx(SelectContent, { children: addresses.map((a) => (_jsx(SelectItem, { value: String(a.id), children: a.completeAddress || a.label || `Address ${a.id}` }, a.id))) })] })] }), _jsxs("div", { style: styles.fieldGroup, children: [_jsxs("label", { style: styles.label, children: ["Preferred Doctor ", _jsx("span", { style: styles.mandatory, children: "*" })] }), _jsxs(Select, { value: selectedDoctorId, onValueChange: setSelectedDoctorId, disabled: !selectedAddressId, children: [_jsx(SelectTrigger, { style: { width: "100%" }, children: _jsx(SelectValue, { placeholder: "Select Doctor" }) }), _jsx(SelectContent, { children: doctorsForAddress.length > 0 ? (doctorsForAddress.map((d) => (_jsxs(SelectItem, { value: String(d.id), children: [d.name, " ", d.specialty ? `- ${d.specialty}` : ""] }, d.id)))) : (_jsx(SelectItem, { value: "no-doctors", disabled: true, children: "No doctors available" })) })] })] }), _jsxs("div", { style: styles.fieldGroup, children: [_jsxs("label", { style: styles.label, children: ["Chief Complaint ", _jsx("span", { style: styles.optional, children: "(optional)" })] }), _jsx("textarea", { style: styles.textarea, placeholder: "Enter Chief Complaint or Appointment Notes", value: appointmentNotes, onChange: (e) => setAppointmentNotes(e.target.value) })] }), _jsx("div", { style: styles.footer, children: _jsx("button", { style: {
+                                    }, children: [_jsx(SelectTrigger, { style: { width: "100%" }, children: _jsx("span", { style: {
+                                                    color: selectedAddressId ? "#1e293b" : "#94a3b8",
+                                                    overflow: "hidden",
+                                                    textOverflow: "ellipsis",
+                                                    whiteSpace: "nowrap",
+                                                    flex: 1,
+                                                }, children: selectedAddressLabel || "Select Address" }) }), _jsx(SelectContent, { children: addresses.map((a) => (_jsx(SelectItem, { value: String(a.id), children: a.completeAddress || a.label || `Address ${a.id}` }, a.id))) })] })] }), _jsxs("div", { style: styles.fieldGroup, children: [_jsxs("label", { style: styles.label, children: ["Preferred Doctor ", _jsx("span", { style: styles.mandatory, children: "*" })] }), _jsxs(Select, { value: selectedDoctorId, onValueChange: setSelectedDoctorId, disabled: !selectedAddressId, children: [_jsx(SelectTrigger, { style: { width: "100%" }, children: _jsx("span", { style: {
+                                                    color: selectedDoctorId ? "#1e293b" : "#94a3b8",
+                                                    overflow: "hidden",
+                                                    textOverflow: "ellipsis",
+                                                    whiteSpace: "nowrap",
+                                                    flex: 1,
+                                                }, children: selectedDoctorLabel || "Select Doctor" }) }), _jsx(SelectContent, { children: doctorsForAddress.length > 0 ? (doctorsForAddress.map((d) => (_jsxs(SelectItem, { value: String(d.id), children: [d.name, " ", d.specialty ? `- ${d.specialty}` : ""] }, d.id)))) : (_jsx(SelectItem, { value: "no-doctors", disabled: true, children: "No doctors available" })) })] })] }), _jsxs("div", { style: styles.fieldGroup, children: [_jsxs("label", { style: styles.label, children: ["Chief Complaint ", _jsx("span", { style: styles.optional, children: "(optional)" })] }), _jsx("textarea", { style: styles.textarea, placeholder: "Enter Chief Complaint or Appointment Notes", value: appointmentNotes, onChange: (e) => setAppointmentNotes(e.target.value) })] }), _jsx("div", { style: styles.footer, children: _jsx("button", { style: {
                                     ...styles.continueBtn,
                                     opacity: canContinue ? 1 : 0.6,
                                 }, disabled: !canContinue, onClick: () => onContinue(Number(selectedAddressId), Number(selectedDoctorId), appointmentNotes), children: "Next" }) })] })] }) }));

package/dist/components/EnquiryForm.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useReducer, useCallback } from "react";
+import React, { useReducer, useCallback } from "react";
 import { EnquiryService } from "../services/EnquiryService";
 import { validateName, validateEmail, validatePhoneNumber, validateSubject, validateMessage, validateCountryCode, } from "../enquiry-form/validation";
 import { ContactInformationStep } from "./ContactInformationStep";
@@ -100,7 +100,7 @@ export const EnquiryForm = ({ onSuccess, onError, }) => {
         if (!validateMessage(state.inquiryMessage)) {
             dispatch({
                 type: "SET_ERROR",
-                payload: "Please enter a valid message (max 1000 characters).",
+                payload: "Please enter a valid message.",
             });
             return false;
         }
@@ -151,9 +151,9 @@ export const EnquiryForm = ({ onSuccess, onError, }) => {
         finally {
             dispatch({ type: "SET_LOADING", payload: false });
         }
-    }, [state, validateContactStep, validateInquiryStep, onSuccess, onError]);
+    }, [state, validateContactStep, validateInquiryStep]);
     const theme = useTheme();
-    const styles = getStyles(theme);
+    const styles = React.useMemo(() => getStyles(theme), [theme]);
     return (_jsx("div", { style: styles.container, children: _jsxs("div", { style: styles.card, children: [_jsxs("div", { style: styles.header, children: [_jsx("h2", { style: styles.title, children: "Submit Inquiry" }), _jsxs("p", { style: styles.stepIndicator, children: ["Step ", state.step + 1, " of 4"] })] }), _jsxs("div", { style: styles.content, children: [state.loading && _jsx("div", { style: { marginBottom: 12 }, children: "Loading..." }), state.error && _jsx("div", { style: styles.errorMessage, children: state.error }), state.step === 0 && (_jsx(ContactInformationStep, { patientName: state.patientName, patientEmail: state.patientEmail, countryCode: state.countryCode, patientPhone: state.patientPhone, onNameChange: (value) => dispatch({ type: "SET_PATIENT_NAME", payload: value }), onEmailChange: (value) => dispatch({ type: "SET_PATIENT_EMAIL", payload: value }), onCountryCodeChange: (value) => dispatch({ type: "SET_COUNTRY_CODE", payload: value }), onPhoneChange: (value) => dispatch({ type: "SET_PATIENT_PHONE", payload: value }), onNext: goToNext })), state.step === 1 && (_jsx(InquiryDetailsStep, { inquirySubject: state.inquirySubject, inquiryMessage: state.inquiryMessage, onSubjectChange: (value) => dispatch({ type: "SET_INQUIRY_SUBJECT", payload: value }), onMessageChange: (value) => dispatch({ type: "SET_INQUIRY_MESSAGE", payload: value }), onBack: goBack, onNext: goToNext })), state.step === 2 && (_jsx(ContactPreferenceStep, { preferredContactMethod: state.preferredContactMethod, onContactMethodChange: (method) => dispatch({
                                 type: "SET_PREFERRED_CONTACT_METHOD",
                                 payload: method,

package/dist/components/InquiryDetailsStep.js

@@ -1,15 +1,16 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from "react";
 import { useTheme } from "../react/hooks/useTheme";
 import { getContainerStyles, getPhoneVerifyStyles, getButtonStyles, } from "./theme-styles";
-export const InquiryDetailsStep = ({ inquirySubject, inquiryMessage, onSubjectChange, onMessageChange, onBack, onNext, }) => {
+export const InquiryDetailsStep = React.memo(({ inquirySubject, inquiryMessage, onSubjectChange, onMessageChange, onBack, onNext, }) => {
     const theme = useTheme();
-    const PHONE_VERIFY_STYLES = getPhoneVerifyStyles(theme);
-    const BUTTON_STYLES = getButtonStyles(theme);
-    const CONTAINER_STYLES = getContainerStyles(theme);
-    return (_jsxs("div", { children: [_jsxs("div", { style: { marginBottom: "16px" }, children: [_jsx("label", { style: PHONE_VERIFY_STYLES.label, children: "Subject" }), _jsx("input", { type: "text", value: inquirySubject, onChange: (e) => onSubjectChange(e.target.value), placeholder: "Enter inquiry subject", style: PHONE_VERIFY_STYLES.phoneInput })] }), _jsxs("div", { style: { marginBottom: "16px" }, children: [_jsxs("label", { style: PHONE_VERIFY_STYLES.label, children: ["Message (", inquiryMessage.length, "/1000)"] }), _jsx("textarea", { value: inquiryMessage, onChange: (e) => onMessageChange(e.target.value), placeholder: "Enter your inquiry message", rows: 5, style: {
+    const PHONE_VERIFY_STYLES = React.useMemo(() => getPhoneVerifyStyles(theme), [theme]);
+    const BUTTON_STYLES = React.useMemo(() => getButtonStyles(theme), [theme]);
+    const CONTAINER_STYLES = React.useMemo(() => getContainerStyles(theme), [theme]);
+    return (_jsxs("div", { children: [_jsxs("div", { style: { marginBottom: "16px" }, children: [_jsx("label", { style: PHONE_VERIFY_STYLES.label, children: "Subject" }), _jsx("input", { type: "text", value: inquirySubject, onChange: (e) => onSubjectChange(e.target.value), placeholder: "Enter inquiry subject", style: PHONE_VERIFY_STYLES.phoneInput })] }), _jsxs("div", { style: { marginBottom: "16px" }, children: [_jsx("label", { style: PHONE_VERIFY_STYLES.label, children: "Message" }), _jsx("textarea", { value: inquiryMessage, onChange: (e) => onMessageChange(e.target.value), placeholder: "Enter your inquiry message", rows: 5, style: {
                             ...PHONE_VERIFY_STYLES.otpInput,
                             minHeight: "120px",
                             resize: "vertical",
                             fontFamily: "inherit",
                         } })] }), _jsxs("div", { style: CONTAINER_STYLES.actions, children: [_jsx("button", { onClick: onBack, style: BUTTON_STYLES.secondary, children: "Back" }), _jsx("button", { onClick: onNext, style: BUTTON_STYLES.primary, children: "Next" })] })] }));
-};
+});

package/dist/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>;