medos-sdk 1.1.10 → 1.1.12

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

@@ -0,0 +1,350 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import React from "react";
+import { useTheme } from "../../../react/hooks/useTheme";
+import { useBreakpoint } from "../../../core/theme/responsive";
+export const BookingOptionStep = ({ userSessionPacks, availablePackages, showPackageExplorer, selectedNewPackage, onSelectOption, onSelectPackage, onBack, }) => {
+    const theme = useTheme();
+    const breakpoint = useBreakpoint(theme);
+    const styles = getStyles(theme, breakpoint);
+    const [tempSelectedOption, setTempSelectedOption] = React.useState(null);
+    const [tempSelectedPackage, setTempSelectedPackage] = React.useState(null);
+    const activePack = userSessionPacks.find((pack) => pack.remainingSessions > 0);
+    const hasAvailablePackages = availablePackages.length > 0;
+    const handleOptionClick = (optionType, sessionPack) => {
+        setTempSelectedOption({ type: optionType, sessionPack });
+    };
+    const handlePackageSelect = (pkg) => {
+        setTempSelectedPackage(pkg);
+    };
+    const handlePackageNext = () => {
+        if (tempSelectedPackage) {
+            onSelectPackage(tempSelectedPackage);
+        }
+    };
+    const handleNext = () => {
+        if (tempSelectedOption) {
+            onSelectOption(tempSelectedOption.type, tempSelectedOption.sessionPack, undefined);
+        }
+    };
+    if (showPackageExplorer) {
+        return (_jsxs("div", { style: styles.container, children: [_jsx("div", { style: styles.header, children: _jsx("h3", { style: styles.title, children: "Explore Packages" }) }), _jsx("p", { style: styles.subtitle, children: "Choose a package that suits your needs" }), hasAvailablePackages ? (_jsx("div", { style: styles.packagesGrid, children: availablePackages.map((pkg) => (_jsxs("div", { style: {
+                            ...styles.packageCard,
+                            ...(tempSelectedPackage?.id === pkg.id
+                                ? styles.packageCardSelected
+                                : {}),
+                        }, onClick: () => handlePackageSelect(pkg), children: [_jsx("h4", { style: styles.packageName, children: pkg.name }), _jsx("p", { style: styles.packageDescription, children: pkg.description }), pkg.allowedDoctors && pkg.allowedDoctors.length > 0 && (_jsx("div", { style: styles.packageDoctors, children: pkg.allowedDoctors.map((doc) => (_jsx("span", { style: styles.doctorBadge, children: doc.fullName }, doc.id))) })), pkg.allowedConsultationModes &&
+                                pkg.allowedConsultationModes.length > 0 && (_jsx("div", { style: styles.consultationModes, children: pkg.allowedConsultationModes.map((mode) => (_jsx("span", { style: styles.modeBadge, children: mode === "ONLINE" ? "🌐 Online" : "🏥 In-Person" }, mode))) })), _jsxs("div", { style: styles.packageDetails, children: [_jsxs("span", { style: styles.packageSessions, children: [pkg.totalSessions || pkg.sessions, " session", (pkg.totalSessions || pkg.sessions || 1) > 1 ? "s" : ""] }), _jsx("div", { style: styles.priceContainer, children: pkg.discountedPrice && pkg.discountedPrice < pkg.price ? (_jsxs(_Fragment, { children: [_jsxs("span", { style: styles.originalPrice, children: ["\u20B9", pkg.price.toLocaleString()] }), _jsxs("span", { style: styles.packagePrice, children: ["\u20B9", pkg.discountedPrice.toLocaleString()] }), _jsxs("span", { style: styles.perSessionPrice, children: ["\u20B9", Math.round(pkg.discountedPrice /
+                                                            (pkg.totalSessions || pkg.sessions || 1)).toLocaleString(), "/session"] }), pkg.discount && (_jsx("span", { style: styles.discountBadge, children: pkg.discountType === "PERCENTAGE"
+                                                        ? `${pkg.discount}% OFF`
+                                                        : `₹${pkg.discount} OFF` }))] })) : (_jsxs(_Fragment, { children: [_jsxs("span", { style: styles.packagePrice, children: ["\u20B9", pkg.price.toLocaleString()] }), _jsxs("span", { style: styles.perSessionPrice, children: ["\u20B9", Math.round(pkg.price / (pkg.totalSessions || pkg.sessions || 1)).toLocaleString(), "/session"] })] })) })] }), _jsxs("div", { style: styles.packageValidity, children: ["Valid for ", pkg.validityDays, " days"] })] }, pkg.id))) })) : (_jsx("div", { style: styles.emptyState, children: _jsx("p", { children: "No packages available at the moment." }) })), _jsxs("div", { style: styles.actions, children: [_jsx("button", { style: styles.backBtn, onClick: onBack, children: "Back" }), _jsx("button", { style: {
+                                ...styles.nextBtn,
+                                ...(tempSelectedPackage ? {} : styles.nextBtnDisabled),
+                            }, onClick: handlePackageNext, disabled: !tempSelectedPackage, children: "Next" })] })] }));
+    }
+    return (_jsxs("div", { style: styles.container, children: [_jsx("h3", { style: styles.title, children: "Choose Booking Option" }), _jsx("p", { style: styles.subtitle, children: "How would you like to book your appointment?" }), userSessionPacks.filter((p) => p.remainingSessions > 0).length > 1 && (_jsxs("div", { style: styles.sessionPacksSection, children: [_jsx("h4", { style: styles.sectionTitle, children: "Your Active Session Packs" }), _jsx("div", { style: styles.sessionPacksList, children: userSessionPacks
+                            .filter((pack) => pack.remainingSessions > 0)
+                            .map((pack) => (_jsxs("div", { style: {
+                                ...styles.sessionPackCard,
+                                ...(tempSelectedOption?.type === "session-pack" &&
+                                    tempSelectedOption?.sessionPack?.id === pack.id
+                                    ? styles.sessionPackCardSelected
+                                    : {}),
+                            }, onClick: () => handleOptionClick("session-pack", pack), children: [_jsxs("div", { style: styles.sessionPackInfo, children: [_jsx("span", { style: styles.sessionPackName, children: pack.name }), _jsxs("span", { style: styles.sessionPackRemaining, children: [pack.remainingSessions, "/", pack.totalSessions, " sessions"] }), pack.doctorName && (_jsx("span", { style: styles.sessionPackDoctor, children: pack.doctorName }))] }), _jsxs("div", { style: styles.sessionPackExpiry, children: ["Expires: ", new Date(pack.expiryDate).toLocaleDateString()] })] }, pack.id))) })] })), userSessionPacks.length > 0 && _jsx("hr", { style: { margin: "6px 0 6px 0" } }), _jsxs("div", { style: styles.optionsGrid, children: [activePack && (_jsxs("div", { style: {
+                            ...styles.optionCard,
+                            ...(tempSelectedOption?.type === "session-pack" &&
+                                tempSelectedOption?.sessionPack?.id === activePack.id
+                                ? styles.optionCardSelected
+                                : {}),
+                        }, onClick: () => handleOptionClick("session-pack", activePack), children: [_jsx("div", { style: styles.optionIcon, children: "\uD83D\uDCCB" }), _jsx("h4", { style: styles.optionTitle, children: "Use Session Pack" }), _jsxs("p", { style: styles.optionDescription, children: ["You have ", activePack.remainingSessions, " session", activePack.remainingSessions > 1 ? "s" : "", " remaining"] }), _jsx("div", { style: styles.sessionPackBadge, children: activePack.name })] })), _jsxs("div", { style: {
+                            ...styles.optionCard,
+                            ...(tempSelectedOption?.type === "new-appointment"
+                                ? styles.optionCardSelected
+                                : {}),
+                        }, onClick: () => handleOptionClick("new-appointment"), children: [_jsx("div", { style: styles.optionIcon, children: "\uD83D\uDCC5" }), _jsx("h4", { style: styles.optionTitle, children: "Book New Appointment" }), _jsx("p", { style: styles.optionDescription, children: "Schedule a single consultation visit" })] }), hasAvailablePackages && (_jsxs("div", { style: {
+                            ...styles.optionCard,
+                            ...(tempSelectedOption?.type === "explore-packages"
+                                ? styles.optionCardSelected
+                                : {}),
+                        }, onClick: () => handleOptionClick("explore-packages"), children: [_jsx("div", { style: styles.optionIcon, children: "\uD83C\uDF81" }), _jsx("h4", { style: styles.optionTitle, children: "Explore Packages" }), _jsx("p", { style: styles.optionDescription, children: "View and purchase consultation packages" })] }))] }), _jsxs("div", { style: styles.actions, children: [_jsx("button", { style: styles.backBtn, onClick: onBack, children: "Back" }), _jsx("button", { style: {
+                            ...styles.nextBtn,
+                            ...(tempSelectedOption ? {} : styles.nextBtnDisabled),
+                        }, onClick: handleNext, disabled: !tempSelectedOption, children: "Next" })] })] }));
+};
+const getStyles = (theme, breakpoint) => {
+    const isMobile = breakpoint === "mobile";
+    const borderRadius = "12px";
+    const buttonRadius = "8px";
+    const cardBorder = `1px solid ${theme.colors.border}`;
+    return {
+        container: {
+            display: "flex",
+            flexDirection: "column",
+            gap: 20,
+        },
+        header: {
+            marginBottom: 4,
+        },
+        title: {
+            margin: 0,
+            fontSize: isMobile ? 18 : 20,
+            fontWeight: 600,
+            color: theme.colors.text,
+        },
+        subtitle: {
+            margin: 0,
+            fontSize: 14,
+            color: theme.colors.textSecondary,
+            lineHeight: 1.5,
+        },
+        optionsGrid: {
+            display: "grid",
+            gridTemplateColumns: isMobile
+                ? "1fr"
+                : "repeat(auto-fit, minmax(200px, 1fr))",
+            gap: 16,
+        },
+        optionCard: {
+            display: "flex",
+            flexDirection: "column",
+            alignItems: "center",
+            padding: 24,
+            border: cardBorder,
+            borderRadius,
+            cursor: "pointer",
+            transition: "all 0.2s ease",
+            textAlign: "center",
+            backgroundColor: theme.colors.surface,
+            boxShadow: "0 1px 3px rgba(0, 0, 0, 0.04)",
+        },
+        optionCardSelected: {
+            borderColor: theme.colors.primary,
+            backgroundColor: `${theme.colors.primary}08`,
+            boxShadow: `0 0 0 1px ${theme.colors.primary}`,
+        },
+        optionIcon: {
+            fontSize: 32,
+            marginBottom: 12,
+        },
+        optionTitle: {
+            margin: "0 0 8px 0",
+            fontSize: 16,
+            fontWeight: 600,
+            color: theme.colors.text,
+        },
+        optionDescription: {
+            margin: 0,
+            fontSize: 14,
+            color: theme.colors.textSecondary,
+            lineHeight: 1.5,
+        },
+        sessionPackBadge: {
+            marginTop: 12,
+            padding: "6px 14px",
+            backgroundColor: theme.colors.successBackground || "#dcfce7",
+            color: theme.colors.success || "#166534",
+            borderRadius: 999,
+            fontSize: 12,
+            fontWeight: 500,
+        },
+        sessionPacksSection: {
+            marginBottom: 8,
+        },
+        sectionTitle: {
+            margin: "0 0 16px 0",
+            fontSize: 15,
+            fontWeight: 600,
+            color: theme.colors.text,
+        },
+        sessionPacksList: {
+            display: "flex",
+            flexDirection: "column",
+            gap: 12,
+        },
+        sessionPackCard: {
+            display: "flex",
+            justifyContent: "space-between",
+            alignItems: "center",
+            padding: 16,
+            border: cardBorder,
+            borderRadius,
+            cursor: "pointer",
+            transition: "all 0.2s ease",
+            backgroundColor: theme.colors.surface,
+        },
+        sessionPackCardSelected: {
+            borderColor: theme.colors.primary,
+            backgroundColor: `${theme.colors.primary}08`,
+        },
+        sessionPackInfo: {
+            display: "flex",
+            flexDirection: "column",
+            gap: 4,
+        },
+        sessionPackName: {
+            fontSize: 14,
+            fontWeight: 600,
+            color: theme.colors.text,
+        },
+        sessionPackRemaining: {
+            fontSize: 13,
+            color: theme.colors.textSecondary,
+        },
+        sessionPackDoctor: {
+            fontSize: 13,
+            color: theme.colors.textSecondary,
+        },
+        sessionPackExpiry: {
+            fontSize: 12,
+            color: theme.colors.error || "#dc2626",
+            fontWeight: 500,
+        },
+        packagesGrid: {
+            display: "grid",
+            gridTemplateColumns: isMobile
+                ? "1fr"
+                : "repeat(auto-fit, minmax(250px, 1fr))",
+            gap: 16,
+        },
+        packageCard: {
+            display: "flex",
+            flexDirection: "column",
+            padding: 20,
+            border: cardBorder,
+            borderRadius,
+            cursor: "pointer",
+            transition: "all 0.2s ease",
+            backgroundColor: theme.colors.surface,
+            boxShadow: "0 1px 3px rgba(0, 0, 0, 0.04)",
+        },
+        packageCardSelected: {
+            borderColor: theme.colors.primary,
+            backgroundColor: `${theme.colors.primary}08`,
+            boxShadow: `0 0 0 1px ${theme.colors.primary}`,
+        },
+        packageName: {
+            margin: "0 0 8px 0",
+            fontSize: 16,
+            fontWeight: 600,
+            color: theme.colors.text,
+        },
+        packageDescription: {
+            margin: "0 0 16px 0",
+            fontSize: 14,
+            color: theme.colors.textSecondary,
+            lineHeight: 1.5,
+            flex: 1,
+        },
+        packageDetails: {
+            display: "flex",
+            justifyContent: "space-between",
+            alignItems: "center",
+            paddingTop: 16,
+            borderTop: cardBorder,
+        },
+        packageSessions: {
+            fontSize: 13,
+            color: theme.colors.textSecondary,
+        },
+        priceContainer: {
+            display: "flex",
+            flexDirection: "column",
+            alignItems: "flex-end",
+            gap: 4,
+        },
+        originalPrice: {
+            fontSize: 14,
+            color: theme.colors.textSecondary,
+            textDecoration: "line-through",
+        },
+        packagePrice: {
+            fontSize: 18,
+            fontWeight: 600,
+            color: theme.colors.primary,
+        },
+        perSessionPrice: {
+            fontSize: 12,
+            color: theme.colors.textSecondary,
+            fontWeight: 500,
+        },
+        discountBadge: {
+            fontSize: 11,
+            fontWeight: 600,
+            color: "#fff",
+            backgroundColor: theme.colors.success || "#16a34a",
+            padding: "2px 8px",
+            borderRadius: 999,
+        },
+        packageValidity: {
+            marginTop: 8,
+            fontSize: 12,
+            color: theme.colors.textSecondary,
+        },
+        packageDoctors: {
+            display: "flex",
+            flexWrap: "wrap",
+            gap: 6,
+            marginBottom: 12,
+        },
+        doctorBadge: {
+            fontSize: 12,
+            color: theme.colors.text,
+            backgroundColor: theme.colors.backgroundSecondary || "#f1f5f9",
+            padding: "4px 10px",
+            borderRadius: 999,
+        },
+        consultationModes: {
+            display: "flex",
+            gap: 8,
+            marginBottom: 12,
+        },
+        modeBadge: {
+            fontSize: 11,
+            color: theme.colors.textSecondary,
+            backgroundColor: theme.colors.backgroundSecondary || "#f1f5f9",
+            padding: "4px 8px",
+            borderRadius: 6,
+        },
+        emptyState: {
+            textAlign: "center",
+            padding: "40px 20px",
+            color: theme.colors.textSecondary,
+            fontSize: 14,
+        },
+        actions: {
+            display: "flex",
+            gap: 12,
+            paddingTop: 20,
+            justifyContent: "flex-end",
+        },
+        backBtn: {
+            padding: "10px 20px",
+            border: cardBorder,
+            borderRadius: buttonRadius,
+            backgroundColor: theme.colors.surface,
+            color: theme.colors.text,
+            cursor: "pointer",
+            fontSize: 14,
+            fontWeight: 600,
+            transition: "all 0.2s ease",
+            minHeight: 40,
+        },
+        nextBtn: {
+            padding: "10px 24px",
+            border: "none",
+            borderRadius: buttonRadius,
+            backgroundColor: theme.colors.primary,
+            color: "#fff",
+            cursor: "pointer",
+            fontSize: 14,
+            fontWeight: 600,
+            transition: "all 0.2s ease",
+            minHeight: 40,
+        },
+        nextBtnDisabled: {
+            backgroundColor: theme.colors.textSecondary || "#9ca3af",
+            cursor: "not-allowed",
+            opacity: 0.6,
+        },
+    };
+};
+export default BookingOptionStep;

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

@@ -0,0 +1,14 @@
+import React from "react";
+import { Doctor, AddressItem } from "../../../services/AppointmentService";
+import { AvailablePackage } from "../types";
+type DoctorSelectModalProps = {
+    addresses?: AddressItem[];
+    addressDoctorsMap?: Record<number, Doctor[]>;
+    selectedAddressId?: number | null;
+    selectedDoctorId?: number | null;
+    selectedNewPackage?: AvailablePackage | null;
+    onCancel: () => void;
+    onContinue: (addressId: number, doctorId: number, notes?: string) => void;
+};
+export declare const DoctorSelectModal: React.FC<DoctorSelectModalProps>;
+export {};

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

@@ -0,0 +1,213 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useEffect } from "react";
+import { AppointmentService, } from "../../../services/AppointmentService";
+import { Select, SelectTrigger, SelectContent, SelectItem, } from "../../shared/ui/SelectDropdown";
+import { useTheme } from "../../../react/hooks/useTheme";
+import { useBreakpoint } from "../../../core/theme/responsive";
+const getFilteredAddresses = (addresses, selectedPackage) => {
+    if (!selectedPackage ||
+        !selectedPackage.doctorIds ||
+        selectedPackage.doctorIds.length === 0) {
+        return addresses;
+    }
+    return addresses.filter((address) => {
+        const doctors = address.doctors || [];
+        return doctors.some((doctor) => selectedPackage.doctorIds.includes(doctor.id));
+    });
+};
+const getFilteredDoctors = (doctors, selectedPackage) => {
+    if (!selectedPackage ||
+        !selectedPackage.doctorIds ||
+        selectedPackage.doctorIds.length === 0) {
+        return doctors;
+    }
+    return doctors.filter((doctor) => selectedPackage.doctorIds.includes(doctor.id));
+};
+export const DoctorSelectModal = ({ addresses: initialAddresses, addressDoctorsMap: initialAddressDoctorsMap, selectedAddressId: initialSelectedAddressId, selectedDoctorId: initialSelectedDoctorId, selectedNewPackage, onCancel, onContinue, }) => {
+    const theme = useTheme();
+    const breakpoint = useBreakpoint(theme);
+    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(() => {
+        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 filteredAddresses = getFilteredAddresses(addresses, selectedNewPackage || null);
+    const doctorsForAddress = selectedAddressId
+        ? addressDoctorsMap[Number(selectedAddressId)] || []
+        : [];
+    const filteredDoctors = getFilteredDoctors(doctorsForAddress, selectedNewPackage || null);
+    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, breakpoint);
+    return (_jsx("div", { style: {
+            border: `1px solid ${theme.colors.border}`,
+            borderRadius: "2px",
+        }, 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: "*" })] }), filteredAddresses.length === 0 ? (_jsx("div", { style: {
+                                        padding: "12px 14px",
+                                        border: `1px solid ${theme.colors.border}`,
+                                        borderRadius: "8px",
+                                        backgroundColor: theme.colors.surface,
+                                        color: theme.colors.textSecondary,
+                                        fontSize: 14,
+                                    }, children: "No locations available for this package" })) : (_jsxs(Select, { value: selectedAddressId, onValueChange: (value) => {
+                                        setSelectedAddressId(value);
+                                        setSelectedDoctorId("");
+                                    }, 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: filteredAddresses.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: filteredDoctors.length > 0 ? (filteredDoctors.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) })] }), _jsxs("div", { style: styles.footer, children: [_jsx("button", { style: styles.backBtn, onClick: onCancel, children: "Back" }), _jsx("button", { style: {
+                                        ...styles.continueBtn,
+                                        opacity: canContinue ? 1 : 0.6,
+                                    }, disabled: !canContinue, onClick: () => onContinue(Number(selectedAddressId), Number(selectedDoctorId), appointmentNotes), children: "Next" })] })] })] }) }));
+};
+const getStyles = (theme, breakpoint) => {
+    const isMobile = breakpoint === "mobile";
+    const isTablet = breakpoint === "tablet";
+    const borderRadius = "12px";
+    const buttonRadius = "8px";
+    const cardBorder = `1px solid ${theme.colors.border}`;
+    return {
+        modalWrapper: {
+            borderRadius,
+            maxWidth: isMobile || isTablet ? "100%" : 840,
+            margin: "0 auto",
+            fontFamily: theme.typography.fontFamily,
+            color: theme.colors.text,
+        },
+        headerWrapper: {
+            padding: isMobile ? "16px 20px" : "18px 24px",
+            backgroundColor: theme.colors.primary,
+            color: theme.colors.textOnPrimary,
+        },
+        contentWrapper: {
+            padding: isMobile ? "20px" : "24px",
+        },
+        title: {
+            fontSize: isMobile ? 16 : 18,
+            fontWeight: 600,
+            margin: 0,
+            color: theme.colors.textOnPrimary,
+        },
+        fieldGroup: { marginBottom: isMobile ? 18 : 20 },
+        label: {
+            fontSize: 14,
+            fontWeight: 500,
+            marginBottom: 8,
+            display: "block",
+            color: theme.colors.text,
+        },
+        mandatory: { color: theme.colors.error, marginLeft: 4 },
+        optional: {
+            color: theme.colors.textSecondary,
+            fontWeight: 400,
+            marginLeft: 4,
+            fontSize: 13,
+        },
+        textarea: {
+            width: "100%",
+            border: cardBorder,
+            borderRadius: buttonRadius,
+            minHeight: 100,
+            padding: "12px 14px",
+            fontSize: 14,
+            resize: "vertical",
+            boxSizing: "border-box",
+            transition: "border-color 0.2s ease, box-shadow 0.2s ease",
+            outline: "none",
+            backgroundColor: theme.colors.surface,
+            color: theme.colors.text,
+        },
+        footer: {
+            marginTop: isMobile ? 20 : 24,
+            display: "flex",
+            justifyContent: isMobile ? "stretch" : "flex-end",
+            alignItems: "center",
+            gap: 12,
+            flexDirection: isMobile ? "column" : "row",
+        },
+        brand: { color: theme.colors.primary, fontWeight: 600 },
+        backBtn: {
+            background: theme.colors.surface,
+            color: theme.colors.text,
+            border: cardBorder,
+            borderRadius: buttonRadius,
+            fontWeight: 600,
+            padding: isMobile ? "12px 20px" : "10px 20px",
+            cursor: "pointer",
+            width: isMobile ? "100%" : "auto",
+            minHeight: isMobile ? "44px" : "40px",
+            fontSize: 14,
+            transition: "all 0.2s ease",
+        },
+        continueBtn: {
+            background: theme.colors.secondary,
+            color: theme.colors.textOnSecondary,
+            border: "none",
+            borderRadius: buttonRadius,
+            fontWeight: 600,
+            padding: isMobile ? "12px 20px" : "10px 20px",
+            cursor: "pointer",
+            width: isMobile ? "100%" : "auto",
+            minHeight: isMobile ? "44px" : "40px",
+            fontSize: 14,
+            transition: "all 0.2s ease",
+            boxShadow: "0 1px 2px rgba(0, 0, 0, 0.05)",
+        },
+    };
+};

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

@@ -0,0 +1,3 @@
+import React from "react";
+import { PatientDetailsStepProps } from "../../types/appointment";
+export declare const PatientDetailsStep: React.FC<PatientDetailsStepProps>;