medos-sdk 1.1.9 → 1.1.11

package/dist/components/AppointmentDateTimeModal.js

@@ -4,21 +4,17 @@ import { CustomCalendarWithDateSelector } from "./custom-calendar";
 import { PaymentMethodIcon } from "./Icons/PaymentMethodIcon";
 import { DateTimeIcon } from "./Icons/Date&TimeIcon";
 import { ConsultationTypeIcon } from "./Icons/ConsultationType";
+import ChevronLeftIcon from "./Icons/ChevronLeft";
+import ChevronRightIcon from "./Icons/ChevronRight";
 import { useTheme } from "../react/hooks/useTheme";
-const MONTHS = [
-    "January",
-    "February",
-    "March",
-    "April",
-    "May",
-    "June",
-    "July",
-    "August",
-    "September",
-    "October",
-    "November",
-    "December",
-];
+import { useBreakpoint } from "../core/theme/responsive";
+import { MONTHS, WEEKDAYS } from "./constant";
+import { getMobileStyles, getDesktopStyles } from "./appointment-modal-styles";
+const formatDateCard = (date) => ({
+    month: MONTHS[date.getMonth()],
+    day: date.getDate(),
+    weekday: WEEKDAYS[date.getDay()],
+});
 const getOrdinalSuffix = (day) => {
     if (day > 3 && day < 21)
         return "th";
@@ -33,24 +29,171 @@ const getOrdinalSuffix = (day) => {
             return "th";
     }
 };
-const formatDate = (date) => {
+const formatDesktopDate = (date) => {
     const day = date.getDate();
     const month = MONTHS[date.getMonth()];
     const year = date.getFullYear();
     return `${day}${getOrdinalSuffix(day)} ${month} ${year}`;
 };
-export const AppointmentDateTimeModal = ({ onlineFee, offlineFee, slots, onCancel, onContinue, onDateChange, }) => {
+export const AppointmentDateTimeModal = (props) => {
     const theme = useTheme();
-    const [mode, setMode] = useState("OFFLINE");
+    const breakpoint = useBreakpoint(theme);
+    const isMobile = breakpoint === "mobile";
+    if (isMobile) {
+        return _jsx(MobileAppointmentModal, { ...props });
+    }
+    return _jsx(DesktopAppointmentModal, { ...props });
+};
+const MobileAppointmentModal = ({ onlineFee, offlineFee, slots, selectedDate: initialSelectedDate, selectedSlot: initialSelectedSlot, consultationMode: initialConsultationMode, onCancel, onContinue, onDateChange, initialStep = "consultation", }) => {
+    const theme = useTheme();
+    const breakpoint = useBreakpoint(theme);
+    const [currentStep, setCurrentStep] = useState(initialStep);
+    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);
+    const [currentDateIndex, setCurrentDateIndex] = useState(0);
+    useEffect(() => {
+        if (!initialConsultationMode && initialStep === "consultation") {
+            setCurrentStep("consultation");
+        }
+    }, [initialConsultationMode, initialStep]);
+    const availableDates = useMemo(() => {
+        const dates = [];
+        const today = new Date();
+        for (let i = 0; i < 30; i++) {
+            const date = new Date(today);
+            date.setDate(today.getDate() + i);
+            dates.push(date);
+        }
+        return dates;
+    }, []);
+    const visibleCount = 4;
+    const visibleDates = useMemo(() => {
+        return availableDates.slice(currentDateIndex, currentDateIndex + visibleCount);
+    }, [availableDates, currentDateIndex, visibleCount]);
+    const canScrollLeft = currentDateIndex > 0;
+    const canScrollRight = currentDateIndex + visibleCount < availableDates.length;
+    const scrollLeft = () => {
+        if (canScrollLeft)
+            setCurrentDateIndex(Math.max(0, currentDateIndex - 1));
+    };
+    const scrollRight = () => {
+        if (canScrollRight) {
+            const maxIndex = availableDates.length - visibleCount;
+            setCurrentDateIndex(Math.min(maxIndex, currentDateIndex + 1));
+        }
+    };
+    useEffect(() => {
+        const charge = mode === "ONLINE" && onlineFee
+            ? String(onlineFee)
+            : mode === "OFFLINE" && offlineFee
+                ? String(offlineFee)
+                : "";
+        setConsultationCharge(charge);
+    }, [mode, onlineFee, offlineFee]);
+    const handleContinueFromConsultation = () => setCurrentStep("datetime");
+    const handleBackFromDateTime = () => setCurrentStep("consultation");
     const handleDateSelect = useCallback((date) => {
+        const dateChanged = date.toDateString() !== selectedDate.toDateString();
         setSelectedDate(date);
-        setSelectedSlot(null);
+        if (dateChanged)
+            setSelectedSlot(null);
         onDateChange?.(date);
-    }, [onDateChange]);
+    }, [selectedDate, onDateChange]);
+    const handleFinalContinue = useCallback(() => {
+        if (!selectedSlot)
+            return;
+        onContinue(mode, selectedDate, selectedSlot, consultationCharge, paymentMode);
+    }, [
+        mode,
+        selectedDate,
+        selectedSlot,
+        consultationCharge,
+        paymentMode,
+        onContinue,
+    ]);
+    const isSlotSelected = useCallback((slot) => selectedSlot?.start === slot.start && selectedSlot?.end === slot.end, [selectedSlot]);
+    const STYLES = getMobileStyles(theme, breakpoint);
+    if (currentStep === "consultation") {
+        return (_jsxs("div", { style: STYLES.container, children: [_jsx("div", { style: STYLES.header, children: _jsx("h2", { style: STYLES.title, children: "New Appointment" }) }), _jsxs("div", { style: STYLES.section, children: [_jsxs("h3", { style: STYLES.sectionTitle, children: ["Consultation Mode ", _jsx("span", { style: STYLES.required, children: "*" })] }), _jsx("div", { style: STYLES.modeContainer, children: ["ONLINE", "OFFLINE"].map((item) => {
+                                const disabled = (item === "ONLINE" && (!onlineFee || onlineFee <= 0)) ||
+                                    (item === "OFFLINE" && (!offlineFee || offlineFee <= 0));
+                                return (_jsxs("label", { style: STYLES.modeOption, children: [_jsx("input", { type: "radio", name: "mode", value: item, checked: mode === item, disabled: disabled, onChange: () => !disabled && setMode(item), style: STYLES.radioInput }), item === "ONLINE"
+                                            ? "Online Consultation"
+                                            : "Offline Consultation"] }, item));
+                            }) })] }), _jsxs("div", { style: STYLES.section, children: [_jsx("h3", { style: STYLES.sectionTitle, children: "Consultation Charges" }), _jsxs("div", { style: STYLES.chargeAmount, children: ["\u20B9", consultationCharge] })] }), _jsxs("div", { style: STYLES.section, children: [_jsxs("h3", { style: STYLES.sectionTitle, children: ["Preferred Mode of Payment ", _jsx("span", { style: STYLES.required, children: "*" })] }), _jsx("div", { style: STYLES.paymentOption, children: mode === "ONLINE" ? "Online Consultation" : "Offline Consultation" })] }), _jsxs("div", { style: STYLES.footer, children: [_jsx("button", { style: STYLES.backButton, onClick: onCancel, children: "Back" }), _jsx("button", { style: STYLES.nextButton, onClick: handleContinueFromConsultation, disabled: !consultationCharge, children: "Next" })] })] }));
+    }
+    return (_jsxs("div", { style: STYLES.container, children: [_jsx("div", { style: STYLES.header, children: _jsx("h2", { style: STYLES.title, children: "Date & Time" }) }), _jsxs("div", { style: STYLES.dateSection, children: [_jsxs("div", { style: STYLES.monthNavigationContainer, children: [_jsx("button", { onClick: scrollLeft, style: {
+                                    ...STYLES.navButton,
+                                    opacity: canScrollLeft ? 1 : 0.3,
+                                    cursor: canScrollLeft ? "pointer" : "not-allowed",
+                                }, children: _jsx(ChevronLeftIcon, {}) }), _jsx("div", { style: STYLES.monthYearDisplay, children: selectedDate.toLocaleDateString("en-US", {
+                                    month: "long",
+                                    year: "numeric",
+                                }) }), _jsx("button", { onClick: scrollRight, style: {
+                                    ...STYLES.navButton,
+                                    opacity: canScrollRight ? 1 : 0.3,
+                                    cursor: canScrollRight ? "pointer" : "not-allowed",
+                                }, children: _jsx(ChevronRightIcon, {}) })] }), _jsx("div", { style: STYLES.dateCardsContainer, children: visibleDates.map((date, index) => {
+                            const { month, day, weekday } = formatDateCard(date);
+                            const isSelected = date.toDateString() === selectedDate.toDateString();
+                            return (_jsxs("div", { style: {
+                                    ...STYLES.dateCard,
+                                    ...(isSelected ? STYLES.dateCardSelected : {}),
+                                }, onClick: () => handleDateSelect(date), children: [_jsx("div", { style: STYLES.dateCardWeekday, children: weekday }), _jsx("div", { style: STYLES.dateCardDay, children: day })] }, `${date.getTime()}-${index}`));
+                        }) })] }), _jsx("div", { style: STYLES.slotsContainer, children: slots.length === 0 ? (_jsx("p", { style: STYLES.noSlots, children: "No available slots" })) : (_jsx("div", { style: STYLES.slotGrid, children: slots.map((slot) => {
+                        const startTime = new Date(slot.start).toLocaleTimeString([], {
+                            hour: "2-digit",
+                            minute: "2-digit",
+                        });
+                        const endTime = new Date(slot.end).toLocaleTimeString([], {
+                            hour: "2-digit",
+                            minute: "2-digit",
+                        });
+                        const selected = isSlotSelected(slot);
+                        return (_jsxs("button", { onClick: () => setSelectedSlot(slot), onTouchStart: (e) => {
+                                if (!selected) {
+                                    e.currentTarget.style.transform = "scale(0.98)";
+                                }
+                            }, onTouchEnd: (e) => {
+                                if (!selected) {
+                                    e.currentTarget.style.transform = "scale(1)";
+                                }
+                            }, style: {
+                                ...STYLES.slotButton,
+                                ...(selected ? STYLES.slotButtonSelected : {}),
+                            }, children: [startTime, " - ", endTime] }, slot.id));
+                    }) })) }), _jsxs("div", { style: STYLES.footer, children: [_jsx("button", { style: STYLES.backButton, onClick: handleBackFromDateTime, children: "Back" }), _jsx("button", { style: STYLES.nextButton, onClick: handleFinalContinue, disabled: !selectedSlot, children: "Next" })] })] }));
+};
+const DesktopAppointmentModal = ({ onlineFee, offlineFee, slots, selectedDate: initialSelectedDate, selectedSlot: initialSelectedSlot, consultationMode: initialConsultationMode, onCancel, onContinue, onDateChange, }) => {
+    const theme = useTheme();
+    const breakpoint = useBreakpoint(theme);
+    const [mode, setMode] = useState(initialConsultationMode || "OFFLINE");
+    const [consultationCharge, setConsultationCharge] = useState("");
+    const [paymentMode, setPaymentMode] = useState("CASH");
+    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);
+        if (dateChanged)
+            setSelectedSlot(null);
+        onDateChange?.(date);
+    }, [selectedDate, onDateChange]);
     useEffect(() => {
         const charge = mode === "ONLINE" && onlineFee
             ? String(onlineFee)
@@ -72,149 +215,57 @@ export const AppointmentDateTimeModal = ({ onlineFee, offlineFee, slots, onCance
         onContinue,
     ]);
     const isSlotSelected = useCallback((slot) => selectedSlot?.start === slot.start && selectedSlot?.end === slot.end, [selectedSlot]);
-    const formattedDate = useMemo(() => formatDate(selectedDate), [selectedDate]);
+    const formattedDate = useMemo(() => formatDesktopDate(selectedDate), [selectedDate]);
     const isFormValid = selectedDate && selectedSlot && consultationCharge;
-    const STYLES = getStyles(theme);
-    return (_jsxs("div", { style: STYLES.modalWrapper, children: [_jsx(ConsultationTypeSection, { mode: mode, onlineFee: onlineFee, offlineFee: offlineFee, onModeChange: setMode, STYLES: STYLES }), _jsx(ChargesSection, { charge: consultationCharge, STYLES: STYLES }), _jsx(DateTimeSection, { selectedDate: selectedDate, formattedDate: formattedDate, slots: slots, selectedSlot: selectedSlot, onDateSelect: handleDateSelect, onSlotSelect: setSelectedSlot, isSlotSelected: isSlotSelected, STYLES: STYLES }), _jsx(FooterSection, { onCancel: onCancel, onContinue: handleContinue, isValid: !!isFormValid, STYLES: STYLES })] }));
-};
-const ConsultationTypeSection = ({ mode, onlineFee, offlineFee, onModeChange, STYLES }) => (_jsxs("div", { style: STYLES.sectionCard, children: [_jsxs("div", { style: STYLES.sectionHeader, children: [_jsx(ConsultationTypeIcon, {}), _jsx("span", { style: STYLES.sectionTitle, children: "Consultation Type" })] }), _jsxs("div", { style: STYLES.sectionBody, children: [_jsx("p", { style: STYLES.label, children: "Consultation Mode" }), _jsx("div", { style: STYLES.modeContainer, children: ["ONLINE", "OFFLINE"].map((item) => {
-                        const disabled = (item === "ONLINE" && (!onlineFee || onlineFee <= 0)) ||
-                            (item === "OFFLINE" && (!offlineFee || offlineFee <= 0));
-                        return (_jsxs("label", { style: { ...STYLES.radioLabel, opacity: disabled ? 0.5 : 1 }, children: [_jsx("input", { type: "radio", name: "mode", value: item, checked: mode === item, disabled: disabled, onChange: () => !disabled && onModeChange(item), style: STYLES.radioInput }), item === "ONLINE" ? "Online" : "Offline"] }, item));
-                    }) })] })] }));
-const ChargesSection = ({ charge, STYLES }) => (_jsxs("div", { style: STYLES.sectionCard, children: [_jsxs("div", { style: STYLES.sectionHeader, children: [_jsx(PaymentMethodIcon, {}), _jsx("span", { style: STYLES.sectionTitle, children: "Charges & Mode of Payment" })] }), _jsx("div", { style: STYLES.sectionBody, children: _jsxs("span", { style: STYLES.rupee, children: ["\u20B9 ", charge] }) })] }));
-const DateTimeSection = ({ selectedDate, formattedDate, slots, selectedSlot, onDateSelect, onSlotSelect, isSlotSelected, STYLES, }) => (_jsxs("div", { style: STYLES.sectionCard, children: [_jsxs("div", { style: STYLES.sectionHeader, children: [_jsx(DateTimeIcon, {}), _jsx("span", { style: STYLES.sectionTitle, children: "Date & Time" })] }), _jsx("div", { style: STYLES.sectionBody, children: _jsxs("div", { style: STYLES.dateTimeContainer, children: [_jsx("div", { style: STYLES.calendarBox, children: _jsx(CustomCalendarWithDateSelector, { selectedDate: selectedDate, onSelect: onDateSelect, pastDisabled: true }) }), _jsxs("div", { style: STYLES.timesContainer, children: [_jsxs("p", { style: STYLES.timesLabel, children: ["Available times ", _jsx("br", {}), _jsx("span", { style: STYLES.dateLabel, children: formattedDate })] }), slots.length === 0 ? (_jsx("p", { style: STYLES.noSlots, children: "No available slots" })) : (_jsx("div", { style: STYLES.slotGrid, children: slots.map((slot) => (_jsx(SlotButton, { slot: slot, isSelected: isSlotSelected(slot), onSelect: onSlotSelect }, slot.id))) }))] })] }) })] }));
-const SlotButton = ({ slot, isSelected, onSelect }) => {
-    const startTime = useMemo(() => new Date(slot.start).toLocaleTimeString([], {
-        hour: "2-digit",
-        minute: "2-digit",
-    }), [slot.start]);
-    const theme = useTheme();
-    const STYLES = getStyles(theme);
-    return (_jsx("button", { onClick: () => onSelect(slot), style: {
-            ...STYLES.slotButton,
-            background: isSelected
-                ? theme.colors.secondary
-                : theme.colors.background,
-            color: isSelected
-                ? theme.colors.textOnSecondary
-                : theme.colors.secondary,
-            borderColor: theme.colors.secondary,
-        }, children: startTime }));
+    const STYLES = getDesktopStyles(theme, breakpoint);
+    return (_jsxs("div", { style: STYLES.modalWrapper, children: [_jsxs("div", { style: STYLES.sectionCard, children: [_jsxs("div", { style: STYLES.sectionHeader, children: [_jsx(ConsultationTypeIcon, {}), _jsx("span", { style: STYLES.sectionTitle, children: "Consultation Type" })] }), _jsxs("div", { style: STYLES.sectionBody, children: [_jsx("p", { style: STYLES.label, children: "Consultation Mode" }), _jsx("div", { style: STYLES.modeContainer, children: ["ONLINE", "OFFLINE"].map((item) => {
+                                    const disabled = (item === "ONLINE" && (!onlineFee || onlineFee <= 0)) ||
+                                        (item === "OFFLINE" && (!offlineFee || offlineFee <= 0));
+                                    return (_jsxs("label", { style: { ...STYLES.radioLabel, opacity: disabled ? 0.5 : 1 }, children: [_jsx("input", { type: "radio", name: "mode", value: item, checked: mode === item, disabled: disabled, onChange: () => !disabled && setMode(item), style: STYLES.radioInput }), item === "ONLINE" ? "Online" : "Offline"] }, item));
+                                }) })] })] }), _jsxs("div", { style: STYLES.sectionCard, children: [_jsxs("div", { style: STYLES.sectionHeader, children: [_jsx(PaymentMethodIcon, {}), _jsx("span", { style: STYLES.sectionTitle, children: "Charges & Mode of Payment" })] }), _jsx("div", { style: STYLES.sectionBody, children: _jsxs("span", { style: STYLES.rupee, children: ["\u20B9 ", consultationCharge] }) })] }), _jsxs("div", { style: STYLES.sectionCard, children: [_jsxs("div", { style: STYLES.sectionHeader, children: [_jsx(DateTimeIcon, {}), _jsx("span", { style: STYLES.sectionTitle, children: "Date & Time" })] }), _jsx("div", { style: STYLES.sectionBody, children: _jsxs("div", { style: STYLES.dateTimeContainer, children: [_jsx("div", { style: STYLES.calendarBox, children: _jsx(CustomCalendarWithDateSelector, { selectedDate: selectedDate, onSelect: handleDateSelect, pastDisabled: true }) }), _jsxs("div", { style: STYLES.timesContainer, children: [_jsxs("p", { style: STYLES.timesLabel, children: ["Available times ", _jsx("br", {}), _jsx("span", { style: STYLES.dateLabel, children: formattedDate })] }), slots.length === 0 ? (_jsx("p", { style: STYLES.noSlots, children: "No available slots" })) : (_jsx("div", { style: STYLES.slotGrid, children: slots.map((slot) => {
+                                                const selected = isSlotSelected(slot);
+                                                return (_jsxs("button", { onClick: () => setSelectedSlot(slot), onMouseEnter: (e) => {
+                                                        if (!selected) {
+                                                            e.currentTarget.style.borderColor =
+                                                                theme.colors.secondary;
+                                                            e.currentTarget.style.backgroundColor = `${theme.colors.secondary}08`;
+                                                            e.currentTarget.style.transform =
+                                                                "translateY(-2px)";
+                                                            e.currentTarget.style.boxShadow = `0 4px 12px ${theme.colors.secondary}15`;
+                                                        }
+                                                    }, onMouseLeave: (e) => {
+                                                        if (!selected) {
+                                                            e.currentTarget.style.borderColor =
+                                                                theme.colors.border;
+                                                            e.currentTarget.style.backgroundColor =
+                                                                theme.colors.surface;
+                                                            e.currentTarget.style.transform = "translateY(0)";
+                                                            e.currentTarget.style.boxShadow =
+                                                                "0 1px 3px rgba(0, 0, 0, 0.04)";
+                                                        }
+                                                    }, style: {
+                                                        ...STYLES.slotButton,
+                                                        background: selected
+                                                            ? theme.colors.secondary
+                                                            : theme.colors.surface,
+                                                        color: selected
+                                                            ? theme.colors.textOnSecondary
+                                                            : theme.colors.text,
+                                                        borderColor: selected
+                                                            ? theme.colors.secondary
+                                                            : theme.colors.border,
+                                                        boxShadow: selected
+                                                            ? `0 4px 12px ${theme.colors.secondary}30, 0 2px 6px ${theme.colors.secondary}20`
+                                                            : "0 1px 3px rgba(0, 0, 0, 0.04)",
+                                                        transform: selected
+                                                            ? "translateY(-1px)"
+                                                            : "translateY(0)",
+                                                    }, children: [new Date(slot.start).toLocaleTimeString([], {
+                                                            hour: "2-digit",
+                                                            minute: "2-digit",
+                                                        }), " ", "-", " ", new Date(slot.end).toLocaleTimeString([], {
+                                                            hour: "2-digit",
+                                                            minute: "2-digit",
+                                                        })] }, slot.id));
+                                            }) }))] })] }) })] }), _jsxs("div", { style: STYLES.footer, children: [_jsx("button", { style: STYLES.backBtn, onClick: onCancel, children: "Back" }), _jsx("button", { style: { ...STYLES.continueBtn, opacity: isFormValid ? 1 : 0.6 }, onClick: handleContinue, disabled: !isFormValid, children: "Continue" })] })] }));
 };
-const FooterSection = ({ onCancel, onContinue, isValid, STYLES }) => (_jsxs("div", { style: STYLES.footer, children: [_jsx("button", { style: STYLES.backBtn, onClick: onCancel, children: "Back" }), _jsx("button", { style: { ...STYLES.continueBtn, opacity: isValid ? 1 : 0.6 }, onClick: onContinue, disabled: !isValid, children: "Continue" })] }));
-const getStyles = (theme) => ({
-    modalWrapper: {
-        backgroundColor: theme.colors.background,
-        borderRadius: theme.radii.lg,
-        padding: "20px 24px 24px 24px",
-        maxWidth: 800,
-        margin: "0 auto",
-        fontFamily: theme.typography.fontFamily,
-        color: theme.colors.text,
-        boxSizing: "border-box",
-    },
-    sectionCard: {
-        border: `1px solid ${theme.colors.border}`,
-        borderRadius: theme.radii.lg,
-        marginBottom: 20,
-        position: "relative",
-    },
-    sectionHeader: {
-        background: theme.colors.primary,
-        color: theme.colors.textOnPrimary,
-        borderBottom: `1px solid ${theme.colors.border}`,
-        padding: "12px 16px",
-        display: "flex",
-        alignItems: "center",
-        gap: 8,
-    },
-    sectionTitle: { fontSize: 15, fontWeight: 600 },
-    sectionBody: { padding: 16, position: "relative" },
-    label: {
-        fontSize: 14,
-        fontWeight: 500,
-        marginBottom: 4,
-        display: "block",
-    },
-    modeContainer: {
-        display: "flex",
-        gap: 24,
-        marginTop: 4,
-    },
-    radioLabel: {
-        display: "flex",
-        alignItems: "center",
-        gap: 8,
-        cursor: "pointer",
-        fontSize: 14,
-    },
-    radioInput: {
-        width: 18,
-        height: 18,
-        accentColor: theme.colors.secondary,
-        cursor: "pointer",
-    },
-    rupee: {
-        fontWeight: 600,
-        fontSize: 16,
-        marginRight: 6,
-    },
-    dateTimeContainer: { display: "flex", gap: 24 },
-    calendarBox: {
-        border: `1px solid ${theme.colors.border}`,
-        borderRadius: theme.radii.lg,
-        padding: 8,
-    },
-    timesContainer: { flexGrow: 1 },
-    timesLabel: { fontWeight: 500 },
-    dateLabel: {
-        color: theme.colors.textSecondary,
-        fontSize: 13,
-    },
-    noSlots: {
-        color: theme.colors.textSecondary,
-        fontSize: 14,
-        marginTop: 8,
-    },
-    slotGrid: {
-        display: "grid",
-        gridTemplateColumns: "repeat(auto-fit,minmax(100px,1fr))",
-        gap: 8,
-        marginTop: 12,
-    },
-    slotButton: {
-        borderRadius: theme.radii.md,
-        padding: "8px 10px",
-        border: `1px solid ${theme.colors.secondary}`,
-        fontSize: 13,
-        fontWeight: 500,
-        cursor: "pointer",
-        transition: "0.2s",
-    },
-    footer: {
-        display: "flex",
-        justifyContent: "flex-end",
-        alignItems: "center",
-        marginTop: 20,
-        gap: 12,
-    },
-    backBtn: {
-        border: `1px solid ${theme.colors.primary}`,
-        background: theme.colors.background,
-        color: theme.colors.primary,
-        borderRadius: theme.radii.md,
-        fontWeight: 600,
-        padding: "8px 20px",
-        cursor: "pointer",
-    },
-    continueBtn: {
-        background: theme.colors.secondary,
-        color: theme.colors.textOnSecondary,
-        border: "none",
-        borderRadius: theme.radii.md,
-        fontWeight: 600,
-        padding: "8px 20px",
-        cursor: "pointer",
-    },
-});

package/dist/components/AppointmentSummaryStep.d.ts

@@ -0,0 +1,12 @@
+import React from "react";
+import { AppointmentState } from "./appointment-booking/types";
+import { Doctor, AddressItem } from "../services/AppointmentService";
+export interface AppointmentSummaryStepProps {
+    state: AppointmentState;
+    selectedDoctor: Doctor | null;
+    selectedAddress: AddressItem | null;
+    onBack: () => void;
+    onConfirm: () => void;
+}
+export declare const AppointmentSummaryStep: React.FC<AppointmentSummaryStepProps>;
+export default AppointmentSummaryStep;

package/dist/components/AppointmentSummaryStep.js

@@ -0,0 +1,168 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useTheme } from "../react/hooks/useTheme";
+import { useBreakpoint } from "../core/theme/responsive";
+import { formatDate, formatTime, calculateDuration } from "./utils";
+export const AppointmentSummaryStep = ({ state, selectedDoctor, selectedAddress, onBack, onConfirm, }) => {
+    const theme = useTheme();
+    const breakpoint = useBreakpoint(theme);
+    const styles = getStyles(theme, breakpoint);
+    const usingSessionPack = state.bookingOptionType === "session-pack" && state.selectedSessionPack;
+    const usingNewPackage = state.bookingOptionType === "explore-packages" && state.selectedNewPackage;
+    const getDuration = () => {
+        if (state.selectedSlot) {
+            return calculateDuration(state.selectedSlot.start, state.selectedSlot.end);
+        }
+        return 60;
+    };
+    const getPaymentInfo = () => {
+        if (usingSessionPack) {
+            return {
+                type: "Session Pack",
+                name: state.selectedSessionPack?.name || "Session Pack",
+                amount: "Prepaid",
+                remaining: `${(state.selectedSessionPack?.remainingSessions || 1) - 1} sessions remaining after this appointment`,
+            };
+        }
+        else if (usingNewPackage) {
+            return {
+                type: "New Package",
+                name: state.selectedNewPackage?.name || "Package",
+                amount: `₹${state.selectedNewPackage?.price?.toLocaleString() || 0}`,
+                remaining: `${state.selectedNewPackage?.totalSessions ||
+                    state.selectedNewPackage?.sessions ||
+                    1} sessions included`,
+            };
+        }
+        else {
+            return {
+                type: "Single Appointment",
+                name: state.consultationMode === "ONLINE"
+                    ? "Online Consultation"
+                    : "In-Person Visit",
+                amount: state.consultationCharge
+                    ? `₹${state.consultationCharge}`
+                    : "Pay at clinic",
+                remaining: null,
+            };
+        }
+    };
+    const paymentInfo = getPaymentInfo();
+    const patient = state.selectedPatient;
+    return (_jsxs("div", { style: styles.container, children: [_jsx("h3", { style: styles.title, children: "Appointment Summary" }), _jsx("p", { style: styles.subtitle, children: "Please review your appointment details before confirming" }), _jsxs("div", { style: styles.section, children: [_jsx("h4", { style: styles.sectionTitle, children: "\uD83D\uDC64 Patient Information" }), _jsxs("div", { style: styles.summaryCard, children: [_jsxs("div", { style: styles.summaryRow, children: [_jsx("span", { style: styles.label, children: "Name" }), _jsx("span", { style: styles.value, children: patient
+                                            ? `${patient.firstName} ${patient.lastName}`
+                                            : state.patientName || "New Patient" })] }), (patient?.email || state.patientEmail) && (_jsxs("div", { style: styles.summaryRow, children: [_jsx("span", { style: styles.label, children: "Email" }), _jsx("span", { style: styles.value, children: patient?.email || state.patientEmail })] })), _jsxs("div", { style: styles.summaryRow, children: [_jsx("span", { style: styles.label, children: "Phone" }), _jsxs("span", { style: styles.value, children: [state.countryCode, " ", state.patientPhone] })] }), (patient?.age || state.patientAge) && (_jsxs("div", { style: styles.summaryRow, children: [_jsx("span", { style: styles.label, children: "Age" }), _jsxs("span", { style: styles.value, children: [patient?.age || state.patientAge, " years"] })] })), (patient?.bloodGroup || state.bloodGroup) && (_jsxs("div", { style: styles.summaryRow, children: [_jsx("span", { style: styles.label, children: "Blood Group" }), _jsx("span", { style: styles.value, children: patient?.bloodGroup || state.bloodGroup })] }))] })] }), _jsxs("div", { style: styles.section, children: [_jsx("h4", { style: styles.sectionTitle, children: "\uD83D\uDCC5 Appointment Details" }), _jsxs("div", { style: styles.summaryCard, children: [_jsxs("div", { style: styles.summaryRow, children: [_jsx("span", { style: styles.label, children: "Date" }), _jsx("span", { style: styles.value, children: formatDate(state.selectedDate) })] }), _jsxs("div", { style: styles.summaryRow, children: [_jsx("span", { style: styles.label, children: "Time" }), _jsx("span", { style: styles.value, children: state.selectedSlot
+                                            ? `${formatTime(state.selectedSlot.start)} - ${formatTime(state.selectedSlot.end)}`
+                                            : "Not selected" })] }), _jsxs("div", { style: styles.summaryRow, children: [_jsx("span", { style: styles.label, children: "Duration" }), _jsxs("span", { style: styles.value, children: ["~", getDuration(), " minutes"] })] }), _jsxs("div", { style: styles.summaryRow, children: [_jsx("span", { style: styles.label, children: "Type" }), _jsx("span", { style: styles.value, children: state.consultationMode === "ONLINE"
+                                            ? "Online Consultation"
+                                            : "In-Person Visit" })] })] })] }), _jsxs("div", { style: styles.section, children: [_jsx("h4", { style: styles.sectionTitle, children: "\uD83C\uDFE5 Doctor & Location" }), _jsxs("div", { style: styles.summaryCard, children: [selectedDoctor && (_jsxs("div", { style: styles.summaryRow, children: [_jsx("span", { style: styles.label, children: "Doctor" }), _jsxs("span", { style: styles.value, children: [selectedDoctor.name, selectedDoctor.specialty && ` • ${selectedDoctor.specialty}`] })] })), selectedAddress && (_jsxs(_Fragment, { children: [_jsxs("div", { style: styles.summaryRow, children: [_jsx("span", { style: styles.label, children: "Location" }), _jsx("span", { style: styles.value, children: selectedAddress.completeAddress || "Unknown Location" })] }), selectedAddress.address && (_jsxs("div", { style: styles.summaryRow, children: [_jsx("span", { style: styles.label, children: "Address" }), _jsx("span", { style: styles.value, children: selectedAddress.address })] }))] }))] })] }), _jsxs("div", { style: styles.section, children: [_jsx("h4", { style: styles.sectionTitle, children: "\uD83D\uDCB3 Payment" }), _jsxs("div", { style: styles.summaryCard, children: [_jsxs("div", { style: styles.summaryRow, children: [_jsx("span", { style: styles.label, children: "Booking Type" }), _jsx("span", { style: styles.value, children: paymentInfo.type })] }), _jsxs("div", { style: styles.summaryRow, children: [_jsx("span", { style: styles.label, children: usingSessionPack ? "Pack" : "Service" }), _jsx("span", { style: styles.value, children: paymentInfo.name })] }), _jsxs("div", { style: { ...styles.summaryRow, ...styles.totalRow }, children: [_jsx("span", { style: styles.totalLabel, children: "Amount" }), _jsx("span", { style: styles.totalValue, children: paymentInfo.amount })] }), paymentInfo.remaining && (_jsx("div", { style: styles.remainingInfo, children: paymentInfo.remaining }))] })] }), _jsxs("div", { style: styles.actions, children: [_jsx("button", { style: styles.backBtn, onClick: onBack, children: "Back" }), _jsx("button", { style: styles.confirmBtn, onClick: onConfirm, disabled: state.loading, children: state.loading ? "Confirming..." : "Confirm Appointment" })] })] }));
+};
+const getStyles = (theme, breakpoint) => {
+    const isMobile = breakpoint === "mobile";
+    return {
+        container: {
+            display: "flex",
+            flexDirection: "column",
+            gap: 20,
+        },
+        title: {
+            margin: 0,
+            fontSize: isMobile ? 18 : 20,
+            fontWeight: 600,
+            color: theme.colors.text,
+        },
+        subtitle: {
+            margin: 0,
+            fontSize: 14,
+            color: theme.colors.textSecondary,
+        },
+        section: {
+            display: "flex",
+            flexDirection: "column",
+            gap: 12,
+        },
+        sectionTitle: {
+            margin: 0,
+            fontSize: 16,
+            fontWeight: 600,
+            color: theme.colors.text,
+            display: "flex",
+            alignItems: "center",
+            gap: 8,
+        },
+        summaryCard: {
+            display: "flex",
+            flexDirection: "column",
+            gap: 12,
+            padding: 16,
+            backgroundColor: theme.colors.backgroundSecondary || "#f9fafb",
+            borderRadius: theme.radii.md,
+            border: `1px solid ${theme.colors.border}`,
+        },
+        summaryRow: {
+            display: "flex",
+            justifyContent: "space-between",
+            alignItems: "center",
+        },
+        label: {
+            fontSize: 14,
+            color: theme.colors.textSecondary,
+        },
+        value: {
+            fontSize: 14,
+            fontWeight: 500,
+            color: theme.colors.text,
+            textAlign: "right",
+        },
+        totalRow: {
+            paddingTop: 12,
+            borderTop: `1px solid ${theme.colors.border}`,
+            marginTop: 4,
+        },
+        totalLabel: {
+            fontSize: 16,
+            fontWeight: 600,
+            color: theme.colors.text,
+        },
+        totalValue: {
+            fontSize: 18,
+            fontWeight: 600,
+            color: theme.colors.primary,
+        },
+        remainingInfo: {
+            padding: "8px 12px",
+            backgroundColor: "#fef3c7",
+            color: "#92400e",
+            borderRadius: theme.radii.sm,
+            fontSize: 13,
+            textAlign: "center",
+        },
+        actions: {
+            display: "flex",
+            gap: 12,
+            marginTop: 24,
+        },
+        backBtn: {
+            flex: 1,
+            padding: "14px 24px",
+            border: `1px solid ${theme.colors.border}`,
+            borderRadius: theme.radii.md,
+            backgroundColor: "transparent",
+            color: theme.colors.text,
+            cursor: "pointer",
+            fontSize: 14,
+            fontWeight: 500,
+        },
+        confirmBtn: {
+            flex: 1,
+            padding: "14px 24px",
+            border: "none",
+            borderRadius: theme.radii.md,
+            backgroundColor: theme.colors.primary,
+            color: "#ffffff",
+            cursor: "pointer",
+            fontSize: 14,
+            fontWeight: 600,
+        },
+    };
+};
+export default AppointmentSummaryStep;

package/dist/components/BookingOptionStep.d.ts

@@ -0,0 +1,14 @@
+import React from "react";
+import { SessionPack, AvailablePackage } from "./appointment-booking/types";
+export interface BookingOptionStepProps {
+    userSessionPacks: SessionPack[];
+    availablePackages: AvailablePackage[];
+    showPackageExplorer: boolean;
+    selectedSessionPack: SessionPack | null;
+    selectedNewPackage: AvailablePackage | null;
+    onSelectOption: (optionType: "session-pack" | "new-appointment" | "explore-packages", sessionPack?: SessionPack, newPackage?: AvailablePackage) => void;
+    onSelectPackage: (pkg: AvailablePackage) => void;
+    onBack: () => void;
+}
+export declare const BookingOptionStep: React.FC<BookingOptionStepProps>;
+export default BookingOptionStep;