medos-sdk 1.1.10 → 1.1.12

package/dist/components/appointment-booking/components/AppointmentDateTimeModal.js

@@ -0,0 +1,306 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useState, useCallback, useMemo } from "react";
+import { CustomCalendarWithDateSelector } from "../../shared/ui/Calendar";
+import { PaymentMethodIcon, DateTimeIcon, ConsultationTypeIcon, ChevronLeft as ChevronLeftIcon, ChevronRight as ChevronRightIcon, } from "../../shared/icons";
+import { useTheme } from "../../../react/hooks/useTheme";
+import { useBreakpoint } from "../../../core/theme/responsive";
+import { MONTHS, WEEKDAYS } from "../../constants";
+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";
+    switch (day % 10) {
+        case 1:
+            return "st";
+        case 2:
+            return "nd";
+        case 3:
+            return "rd";
+        default:
+            return "th";
+    }
+};
+const formatDesktopDate = (date) => {
+    const day = date.getDate();
+    const month = MONTHS[date.getMonth()];
+    const year = date.getFullYear();
+    return `${day}${getOrdinalSuffix(day)} ${month} ${year}`;
+};
+const getSlotPeriod = (dateStr) => {
+    const date = new Date(dateStr);
+    const hours = date.getHours();
+    if (hours < 12)
+        return "Morning";
+    if (hours < 17)
+        return "Afternoon";
+    return "Evening";
+};
+export const AppointmentDateTimeModal = (props) => {
+    const theme = useTheme();
+    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(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);
+        if (dateChanged)
+            setSelectedSlot(null);
+        onDateChange?.(date);
+    }, [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 slotsByPeriod = useMemo(() => {
+        const groups = {
+            Morning: [],
+            Afternoon: [],
+            Evening: [],
+        };
+        slots.forEach((slot) => {
+            const period = getSlotPeriod(slot.start);
+            if (groups[period])
+                groups[period].push(slot);
+        });
+        return groups;
+    }, [slots]);
+    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: { display: 'flex', flexDirection: 'column', gap: '20px' }, children: ["Morning", "Afternoon", "Evening"].map((period) => {
+                        const periodSlots = slotsByPeriod[period];
+                        if (periodSlots.length === 0)
+                            return null;
+                        return (_jsxs("div", { children: [_jsx("h4", { style: {
+                                        fontSize: "13px",
+                                        fontWeight: 700,
+                                        color: theme.colors.textSecondary,
+                                        marginBottom: "12px",
+                                        marginTop: 0,
+                                        textTransform: 'uppercase',
+                                        letterSpacing: '0.5px'
+                                    }, children: period }), _jsx("div", { style: STYLES.slotGrid, children: periodSlots.map((slot) => {
+                                        const startTime = new Date(slot.start).toLocaleTimeString([], {
+                                            hour: "2-digit",
+                                            minute: "2-digit",
+                                        });
+                                        const selected = isSlotSelected(slot);
+                                        return (_jsx("button", { onClick: () => setSelectedSlot(slot), style: {
+                                                ...STYLES.slotButton,
+                                                ...(selected ? STYLES.slotButtonSelected : {}),
+                                            }, children: startTime }, slot.id));
+                                    }) })] }, period));
+                    }) })) }), _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)
+            : mode === "OFFLINE" && offlineFee
+                ? String(offlineFee)
+                : "";
+        setConsultationCharge(charge);
+    }, [mode, onlineFee, offlineFee]);
+    const handleContinue = 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 formattedDate = useMemo(() => formatDesktopDate(selectedDate), [selectedDate]);
+    const isFormValid = selectedDate && selectedSlot && consultationCharge;
+    const STYLES = getDesktopStyles(theme, breakpoint);
+    const slotsByPeriod = useMemo(() => {
+        const groups = {
+            Morning: [],
+            Afternoon: [],
+            Evening: [],
+        };
+        slots.forEach((slot) => {
+            const period = getSlotPeriod(slot.start);
+            if (groups[period])
+                groups[period].push(slot);
+        });
+        return groups;
+    }, [slots]);
+    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, display: 'flex', flexDirection: 'column', gap: '24px', overflowY: 'auto', maxHeight: '350px', paddingRight: '12px' }, children: ["Morning", "Afternoon", "Evening"].map((period) => {
+                                                const periodSlots = slotsByPeriod[period];
+                                                if (periodSlots.length === 0)
+                                                    return null;
+                                                return (_jsxs("div", { children: [_jsxs("div", { style: {
+                                                                display: 'flex',
+                                                                alignItems: 'center',
+                                                                gap: '8px',
+                                                                marginBottom: '12px',
+                                                                paddingBottom: '4px',
+                                                                borderBottom: `1px dashed ${theme.colors.border}`
+                                                            }, children: [_jsx("span", { style: {
+                                                                        fontSize: '12px',
+                                                                        fontWeight: 700,
+                                                                        color: theme.colors.primary,
+                                                                        textTransform: 'uppercase',
+                                                                        letterSpacing: '0.5px'
+                                                                    }, children: period }), _jsxs("span", { style: { fontSize: '12px', color: theme.colors.textSecondary }, children: [periodSlots.length, " slots"] })] }), _jsx("div", { style: {
+                                                                display: 'grid',
+                                                                gridTemplateColumns: 'repeat(auto-fill, minmax(90px, 1fr))',
+                                                                gap: '10px'
+                                                            }, children: periodSlots.map((slot) => {
+                                                                const selected = isSlotSelected(slot);
+                                                                return (_jsx("button", { onClick: () => setSelectedSlot(slot), style: {
+                                                                        ...STYLES.slotButton,
+                                                                        background: selected
+                                                                            ? theme.colors.primary
+                                                                            : theme.colors.surface,
+                                                                        color: selected
+                                                                            ? theme.colors.textOnPrimary
+                                                                            : theme.colors.text,
+                                                                        borderColor: selected
+                                                                            ? theme.colors.primary
+                                                                            : theme.colors.border,
+                                                                        boxShadow: selected
+                                                                            ? `0 4px 12px ${theme.colors.primary}40`
+                                                                            : "0 1px 2px rgba(0,0,0,0.05)",
+                                                                        transform: selected
+                                                                            ? "translateY(-1px)"
+                                                                            : "none",
+                                                                        minHeight: '38px',
+                                                                        fontSize: '13px',
+                                                                        padding: '8px 4px',
+                                                                    }, children: new Date(slot.start).toLocaleTimeString([], {
+                                                                        hour: "2-digit",
+                                                                        minute: "2-digit",
+                                                                    }) }, slot.id));
+                                                            }) })] }, period));
+                                            }) }))] })] }) })] }), _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" })] })] }));
+};

package/dist/components/appointment-booking/components/AppointmentSummaryStep.d.ts

@@ -0,0 +1,12 @@
+import React from "react";
+import { AppointmentState } from "../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/appointment-booking/components/AppointmentSummaryStep.js

@@ -0,0 +1,194 @@
+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/date";
+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 isPackageBooking = state.bookingType === "PACKAGE_PURCHASE" ||
+        state.bookingType === "USE_ACTIVE_PACKAGE";
+    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 })] }), isPackageBooking && state.selectedNewPackage ? (_jsxs("div", { style: { ...styles.summaryRow, ...styles.totalRow }, children: [_jsx("span", { style: styles.totalLabel, children: "Amount" }), _jsx("div", { style: styles.priceContainer, children: state.selectedNewPackage.discountedPrice &&
+                                            state.selectedNewPackage.discountedPrice <
+                                                state.selectedNewPackage.price ? (_jsxs(_Fragment, { children: [_jsxs("span", { style: styles.strikethroughPrice, children: ["\u20B9", state.selectedNewPackage.price.toLocaleString()] }), _jsxs("span", { style: styles.totalValue, children: ["\u20B9", state.selectedNewPackage.discountedPrice.toLocaleString()] }), state.selectedNewPackage.discount && (_jsx("span", { style: styles.discountBadge, children: state.selectedNewPackage.discountType === "PERCENTAGE"
+                                                        ? `${state.selectedNewPackage.discount}% OFF`
+                                                        : `₹${state.selectedNewPackage.discount} OFF` }))] })) : (_jsxs("span", { style: styles.totalValue, children: ["\u20B9", state.selectedNewPackage.price.toLocaleString()] })) })] })) : (!usingSessionPack && (_jsxs("div", { style: { ...styles.summaryRow, ...styles.totalRow }, children: [_jsx("span", { style: styles.totalLabel, children: "Amount" }), _jsx("span", { style: styles.totalValue, children: paymentInfo.amount })] }))), usingSessionPack && (_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,
+        },
+        priceContainer: {
+            display: "flex",
+            alignItems: "center",
+            gap: 8,
+            flexWrap: "wrap",
+            justifyContent: "flex-end",
+        },
+        strikethroughPrice: {
+            fontSize: 14,
+            color: theme.colors.textSecondary,
+            textDecoration: "line-through",
+        },
+        discountBadge: {
+            padding: "4px 8px",
+            backgroundColor: "#dcfce7",
+            color: "#166534",
+            borderRadius: theme.radii.sm,
+            fontSize: 12,
+            fontWeight: 600,
+        },
+        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/appointment-booking/components/BookingOptionStep.d.ts

@@ -0,0 +1,14 @@
+import React from "react";
+import { SessionPack, AvailablePackage } from "../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;