medos-sdk 1.1.11 → 1.1.12

package/dist/components/appointment-booking/appointment-modal-styles.js

@@ -0,0 +1,419 @@
+export const getMobileStyles = (theme, breakpoint) => {
+    const borderRadius = "12px";
+    const cardBorder = `1px solid ${theme.colors.border}`;
+    const buttonRadius = "8px";
+    return {
+        container: {
+            backgroundColor: theme.colors.background,
+            padding: "20px 16px",
+            maxWidth: "100%",
+            fontFamily: theme.typography.fontFamily,
+            color: theme.colors.text,
+            minHeight: "100vh",
+            boxSizing: "border-box",
+        },
+        header: { marginBottom: 24 },
+        title: {
+            fontSize: 18,
+            fontWeight: 600,
+            margin: 0,
+            color: theme.colors.text,
+        },
+        section: { marginBottom: 24 },
+        sectionTitle: {
+            fontSize: 15,
+            fontWeight: 600,
+            marginBottom: 12,
+            color: theme.colors.text,
+        },
+        required: { color: theme.colors.error, marginLeft: 4 },
+        modeContainer: {
+            display: "flex",
+            flexDirection: "column",
+            gap: 10,
+        },
+        modeOption: {
+            display: "flex",
+            alignItems: "center",
+            gap: 12,
+            padding: "14px 16px",
+            border: cardBorder,
+            borderRadius,
+            cursor: "pointer",
+            fontSize: 15,
+            transition: "all 0.2s ease",
+            backgroundColor: theme.colors.surface,
+        },
+        radioInput: { width: 18, height: 18, accentColor: theme.colors.primary },
+        chargeAmount: { fontSize: 18, fontWeight: 600, color: theme.colors.text },
+        paymentOption: {
+            padding: "14px 16px",
+            border: cardBorder,
+            borderRadius,
+            fontSize: 15,
+            color: theme.colors.textSecondary,
+            backgroundColor: theme.colors.surface,
+        },
+        dateSection: {
+            marginBottom: 24,
+            padding: "16px",
+            backgroundColor: theme.colors.backgroundSecondary,
+            borderRadius,
+            border: cardBorder,
+        },
+        dateSectionHeader: { marginBottom: 12 },
+        dateSectionTitle: {
+            fontSize: 12,
+            fontWeight: 600,
+            color: theme.colors.textSecondary,
+            margin: 0,
+            letterSpacing: "0.5px",
+            textTransform: "uppercase",
+        },
+        monthNavigationContainer: {
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "space-between",
+            marginBottom: 16,
+            position: "relative",
+        },
+        monthYearDisplay: {
+            fontSize: 16,
+            fontWeight: 600,
+            color: theme.colors.text,
+            textAlign: "center",
+            flex: 1,
+        },
+        navButton: {
+            background: "none",
+            border: "none",
+            color: theme.colors.text,
+            cursor: "pointer",
+            padding: 8,
+            borderRadius: buttonRadius,
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+            transition: "all 0.2s ease",
+            minWidth: 36,
+            minHeight: 36,
+            flexShrink: 0,
+        },
+        dateCardsContainer: {
+            display: "flex",
+            justifyContent: "space-around",
+            alignItems: "center",
+            gap: 8,
+            width: "100%",
+            maxWidth: "100%",
+            overflow: "hidden",
+        },
+        dateCard: {
+            width: 56,
+            height: 56,
+            border: `2px solid ${theme.colors.border}`,
+            borderRadius: "50%",
+            display: "flex",
+            flexDirection: "column",
+            alignItems: "center",
+            justifyContent: "center",
+            cursor: "pointer",
+            transition: "all 0.2s ease",
+            backgroundColor: theme.colors.surface,
+            position: "relative",
+            flex: "0 0 auto",
+        },
+        dateCardSelected: {
+            borderColor: theme.colors.primary,
+            backgroundColor: theme.colors.primary,
+            color: theme.colors.textOnPrimary,
+        },
+        dateCardWeekday: {
+            fontSize: 9,
+            fontWeight: 500,
+            textTransform: "uppercase",
+            marginBottom: 2,
+            letterSpacing: "0.3px",
+            lineHeight: 1,
+        },
+        dateCardDay: { fontSize: 14, fontWeight: 700, lineHeight: 1 },
+        slotsContainer: {
+            marginBottom: 24,
+            width: "100%",
+            boxSizing: "border-box",
+        },
+        slotGrid: {
+            display: "grid",
+            gridTemplateColumns: "1fr 1fr",
+            gap: 12,
+            marginTop: 12,
+            maxHeight: "280px",
+            overflowY: "auto",
+            paddingRight: "8px",
+            paddingBottom: "4px",
+            scrollbarWidth: "thin",
+            scrollbarColor: `${theme.colors.primary}40 ${theme.colors.surface}`,
+            width: "100%",
+            boxSizing: "border-box",
+        },
+        slotButton: {
+            padding: "12px 8px",
+            border: `2px solid ${theme.colors.border}`,
+            borderRadius: buttonRadius,
+            backgroundColor: theme.colors.surface,
+            color: theme.colors.text,
+            fontSize: 12,
+            fontWeight: 600,
+            cursor: "pointer",
+            transition: "all 0.25s cubic-bezier(0.4, 0, 0.2, 1)",
+            minHeight: 48,
+            boxShadow: "0 1px 2px rgba(0, 0, 0, 0.03)",
+            position: "relative",
+            letterSpacing: "0.3px",
+            width: "100%",
+            boxSizing: "border-box",
+            textAlign: "center",
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+            whiteSpace: "nowrap",
+            overflow: "hidden",
+            textOverflow: "ellipsis",
+        },
+        slotButtonSelected: {
+            borderColor: theme.colors.primary,
+            backgroundColor: theme.colors.primary,
+            color: theme.colors.textOnPrimary,
+            boxShadow: `0 4px 12px ${theme.colors.primary}30, 0 2px 4px ${theme.colors.primary}20`,
+            transform: "translateY(-1px)",
+        },
+        noSlots: {
+            textAlign: "center",
+            color: theme.colors.textSecondary,
+            fontSize: 14,
+            marginTop: 16,
+            padding: "20px",
+        },
+        footer: {
+            display: "flex",
+            gap: 12,
+            marginTop: "auto",
+            paddingTop: 20,
+            borderTop: cardBorder,
+        },
+        backButton: {
+            flex: 1,
+            padding: "12px 20px",
+            border: cardBorder,
+            borderRadius: buttonRadius,
+            backgroundColor: theme.colors.surface,
+            color: theme.colors.text,
+            fontSize: 14,
+            fontWeight: 600,
+            cursor: "pointer",
+            transition: "all 0.2s ease",
+            minHeight: 44,
+        },
+        nextButton: {
+            flex: 1,
+            padding: "12px 20px",
+            border: "none",
+            borderRadius: buttonRadius,
+            backgroundColor: theme.colors.secondary,
+            color: theme.colors.textOnSecondary,
+            fontSize: 14,
+            fontWeight: 600,
+            cursor: "pointer",
+            transition: "all 0.2s ease",
+            minHeight: 44,
+            boxShadow: "0 1px 2px rgba(0, 0, 0, 0.05)",
+        },
+    };
+};
+export const getDesktopStyles = (theme, breakpoint) => {
+    const borderRadius = "12px";
+    const buttonRadius = "8px";
+    const cardBorder = `1px solid ${theme.colors.border}`;
+    return {
+        modalWrapper: {
+            borderRadius,
+            maxWidth: 850,
+            margin: "0 auto",
+            fontFamily: theme.typography.fontFamily,
+            color: theme.colors.text,
+            boxSizing: "border-box",
+        },
+        sectionCard: {
+            border: cardBorder,
+            borderRadius,
+            marginBottom: 20,
+            position: "relative",
+            overflow: "hidden",
+            boxShadow: "0 1px 3px rgba(0, 0, 0, 0.04)",
+        },
+        sectionHeader: {
+            background: theme.colors.primary,
+            color: theme.colors.textOnPrimary,
+            borderBottom: cardBorder,
+            padding: "14px 20px",
+            display: "flex",
+            alignItems: "center",
+            gap: 10,
+        },
+        sectionTitle: { fontSize: 16, fontWeight: 600 },
+        sectionBody: {
+            padding: "20px",
+            position: "relative",
+        },
+        label: {
+            fontSize: 14,
+            fontWeight: 500,
+            marginBottom: 8,
+            display: "block",
+            color: theme.colors.text,
+        },
+        modeContainer: {
+            display: "flex",
+            gap: 20,
+            marginTop: 8,
+            flexDirection: "row",
+        },
+        radioLabel: {
+            display: "flex",
+            alignItems: "center",
+            gap: 10,
+            cursor: "pointer",
+            fontSize: 14,
+            padding: "8px 16px",
+            borderRadius: buttonRadius,
+            border: cardBorder,
+            transition: "all 0.2s ease",
+            backgroundColor: theme.colors.surface,
+        },
+        radioInput: {
+            width: 18,
+            height: 18,
+            accentColor: theme.colors.secondary,
+            cursor: "pointer",
+        },
+        rupee: {
+            fontWeight: 600,
+            fontSize: 18,
+            color: theme.colors.text,
+        },
+        dateTimeContainer: {
+            display: "flex",
+            gap: 24,
+            flexDirection: "row",
+            alignItems: "flex-start",
+        },
+        calendarBox: {
+            border: cardBorder,
+            borderRadius,
+            padding: 0,
+            width: "320px",
+            minWidth: "320px",
+            overflow: "visible",
+            backgroundColor: theme.colors.surface,
+        },
+        timesContainer: {
+            flex: 1,
+            minWidth: "300px",
+            maxWidth: "400px",
+            width: "100%",
+            boxSizing: "border-box",
+        },
+        timesLabel: {
+            fontWeight: 600,
+            fontSize: 15,
+            color: theme.colors.text,
+            marginBottom: 4,
+        },
+        dateLabel: {
+            color: theme.colors.textSecondary,
+            fontSize: 13,
+            fontWeight: 400,
+        },
+        noSlots: {
+            color: theme.colors.textSecondary,
+            fontSize: 14,
+            marginTop: 12,
+            padding: "16px",
+            textAlign: "center",
+            backgroundColor: theme.colors.backgroundSecondary,
+            borderRadius: buttonRadius,
+        },
+        slotGrid: {
+            display: "grid",
+            gridTemplateColumns: "1fr 1fr",
+            gap: 12,
+            marginTop: 16,
+            maxHeight: "240px",
+            overflowY: "auto",
+            paddingRight: "8px",
+            paddingBottom: "4px",
+            scrollbarWidth: "thin",
+            scrollbarColor: `${theme.colors.secondary}40 ${theme.colors.surface}`,
+            width: "100%",
+            boxSizing: "border-box",
+        },
+        slotButton: {
+            borderRadius: buttonRadius,
+            padding: "12px 8px",
+            border: `2px solid ${theme.colors.border}`,
+            fontSize: 13,
+            fontWeight: 600,
+            cursor: "pointer",
+            transition: "all 0.25s cubic-bezier(0.4, 0, 0.2, 1)",
+            minHeight: 48,
+            backgroundColor: theme.colors.surface,
+            boxShadow: "0 1px 3px rgba(0, 0, 0, 0.04)",
+            position: "relative",
+            letterSpacing: "0.3px",
+            textAlign: "center",
+            width: "100%",
+            boxSizing: "border-box",
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+            whiteSpace: "nowrap",
+            overflow: "hidden",
+            textOverflow: "ellipsis",
+        },
+        footer: {
+            display: "flex",
+            justifyContent: "flex-end",
+            alignItems: "center",
+            paddingTop: 20,
+            gap: 12,
+            flexDirection: "row",
+        },
+        backBtn: {
+            border: cardBorder,
+            background: theme.colors.surface,
+            color: theme.colors.text,
+            borderRadius: buttonRadius,
+            fontWeight: 600,
+            padding: "10px 20px",
+            cursor: "pointer",
+            width: "auto",
+            minHeight: 40,
+            fontSize: 14,
+            transition: "all 0.2s ease",
+        },
+        continueBtn: {
+            background: theme.colors.secondary,
+            color: theme.colors.textOnSecondary,
+            border: "none",
+            borderRadius: buttonRadius,
+            fontWeight: 600,
+            padding: "10px 20px",
+            cursor: "pointer",
+            width: "auto",
+            minHeight: 40,
+            fontSize: 14,
+            transition: "all 0.2s ease",
+            boxShadow: "0 1px 2px rgba(0, 0, 0, 0.05)",
+        },
+    };
+};

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

@@ -0,0 +1,28 @@
+import React from "react";
+import { Doctor, AddressItem } from "../../../services/AppointmentService";
+interface AppointmentDetails {
+    patientName?: string;
+    visitationType?: string;
+    appointmentDate?: string;
+    fromTime?: string;
+    toTime?: string;
+    duration?: number;
+    location?: string;
+    mode?: string;
+    paymentMode?: string;
+}
+interface AppointmentConfirmationStepProps {
+    appointment: AppointmentDetails;
+    patient: {
+        firstName?: string;
+        middleName?: string;
+        lastName?: string;
+        patientName?: string;
+    };
+    selectedDoctor?: Doctor | null;
+    selectedAddress?: AddressItem | null;
+    onClose: () => void;
+    onGoBackToSlots?: () => void;
+}
+declare const AppointmentConfirmationStep: React.FC<AppointmentConfirmationStepProps>;
+export default AppointmentConfirmationStep;

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

@@ -0,0 +1,107 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useTheme } from "../../../react/hooks/useTheme";
+import { SuccessIcon, CloseIcon } from "../../shared/icons";
+import { formatDate, formatTime, calculateDuration } from "../../utils/date";
+const AppointmentConfirmationStep = ({ appointment, patient, selectedDoctor, selectedAddress, onClose, onGoBackToSlots, }) => {
+    const theme = useTheme();
+    const getDuration = () => {
+        if (appointment.duration)
+            return appointment.duration;
+        if (appointment.fromTime && appointment.toTime) {
+            return calculateDuration(`2000-01-01T${appointment.fromTime}`, `2000-01-01T${appointment.toTime}`);
+        }
+        return 60;
+    };
+    const getPatientName = () => {
+        if (appointment.patientName)
+            return appointment.patientName;
+        if (patient.patientName)
+            return patient.patientName;
+        const parts = [
+            patient.firstName,
+            patient.middleName,
+            patient.lastName,
+        ].filter(Boolean);
+        return parts.join(" ") || "Patient";
+    };
+    const duration = getDuration();
+    const patientName = getPatientName();
+    return (_jsxs("div", { style: {
+            display: "flex",
+            flexDirection: "column",
+            padding: "0",
+            fontFamily: theme.typography.fontFamily,
+            background: theme.colors.background,
+            minHeight: "500px",
+            position: "relative",
+        }, children: [_jsxs("div", { style: {
+                    display: "flex",
+                    justifyContent: "space-between",
+                    alignItems: "center",
+                    padding: "20px 24px",
+                    borderBottom: `2px solid ${theme.colors.border}`,
+                    background: theme.colors.surface,
+                }, children: [_jsx("h2", { style: {
+                            fontSize: 24,
+                            fontWeight: "bold",
+                            color: theme.colors.text,
+                            margin: 0,
+                        }, children: "Appointment Confirmed" }), _jsx("button", { onClick: onGoBackToSlots || onClose, style: {
+                            background: "none",
+                            border: "none",
+                            cursor: "pointer",
+                            padding: "8px",
+                            borderRadius: "6px",
+                            display: "flex",
+                            alignItems: "center",
+                            justifyContent: "center",
+                            transition: "background-color 0.2s ease",
+                            backgroundColor: "transparent",
+                        }, onMouseEnter: (e) => {
+                            e.currentTarget.style.backgroundColor = theme.colors.border;
+                        }, onMouseLeave: (e) => {
+                            e.currentTarget.style.backgroundColor = "transparent";
+                        }, title: "Close and select new slot", children: _jsx(CloseIcon, { size: 16, color: theme.colors.text }) })] }), _jsxs("div", { style: {
+                    flex: 1,
+                    display: "flex",
+                    flexDirection: "column",
+                    alignItems: "center",
+                    justifyContent: "center",
+                    padding: "40px 24px",
+                    border: `2px solid ${theme.colors.border}`,
+                    borderTop: "none",
+                    background: theme.colors.surface,
+                    textAlign: "center",
+                }, children: [_jsx("h3", { style: {
+                            fontSize: 20,
+                            fontWeight: "600",
+                            color: theme.colors.success,
+                            margin: "0 0 24px 0",
+                        }, children: "Appointment Confirmed" }), _jsx("div", { style: { marginBottom: 32 }, children: _jsx(SuccessIcon, { size: 64, checkColor: "white", shapeColor: theme.colors.success }) }), _jsxs("div", { style: {
+                            width: "100%",
+                            maxWidth: 500,
+                            marginBottom: 32,
+                        }, children: [_jsx("h4", { style: {
+                                    fontSize: 18,
+                                    fontWeight: "600",
+                                    color: theme.colors.success,
+                                    marginBottom: 24,
+                                }, children: "Appointment Details" }), _jsxs("div", { style: {
+                                    display: "flex",
+                                    flexDirection: "column",
+                                    gap: 12,
+                                    fontSize: 16,
+                                    lineHeight: 1.6,
+                                    color: theme.colors.text,
+                                }, children: [_jsxs("div", { children: [_jsx("strong", { style: { color: theme.colors.success }, children: "Patient:" }), " ", patientName] }), selectedDoctor && (_jsxs("div", { children: [_jsx("strong", { style: { color: theme.colors.success }, children: "Doctor:" }), " ", selectedDoctor.name] })), appointment.visitationType && (_jsxs("div", { children: [_jsx("strong", { style: { color: theme.colors.success }, children: "Visitation Type:" }), " ", appointment.visitationType] })), appointment.appointmentDate && (_jsxs("div", { children: [_jsx("strong", { style: { color: theme.colors.success }, children: "Date:" }), " ", formatDate(appointment.appointmentDate)] })), appointment.fromTime && (_jsxs("div", { children: [_jsx("strong", { style: { color: theme.colors.success }, children: "Time:" }), " ", formatTime(appointment.fromTime)] })), _jsxs("div", { children: [_jsx("strong", { style: { color: theme.colors.success }, children: "Duration:" }), " ", "~", duration, " minutes"] }), selectedAddress && (_jsxs("div", { children: [_jsx("strong", { style: { color: theme.colors.success }, children: "Location:" }), " ", selectedAddress.completeAddress ||
+                                                selectedAddress.address ||
+                                                "Address not available"] })), appointment.location && !selectedAddress && (_jsxs("div", { children: [_jsx("strong", { style: { color: theme.colors.success }, children: "Location:" }), " ", appointment.location] }))] })] }), _jsx("div", { style: {
+                            fontSize: 16,
+                            fontStyle: "italic",
+                            color: theme.colors.textSecondary,
+                            textAlign: "center",
+                            maxWidth: 600,
+                            lineHeight: 1.5,
+                        }, children: "A confirmation email has been sent to the Patient's Email address." })] })] }));
+};
+export default AppointmentConfirmationStep;

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

@@ -0,0 +1,18 @@
+import React from "react";
+import { Slot } from "../../../services/AppointmentService";
+export type AppointmentMode = "ONLINE" | "OFFLINE";
+export type PaymentMode = "CASH" | "CARD" | "UPI";
+type AppointmentModalProps = {
+    onlineFee?: number | null;
+    offlineFee?: number | null;
+    slots: Slot[];
+    selectedDate?: Date;
+    selectedSlot?: Slot | null;
+    consultationMode?: AppointmentMode;
+    onCancel: () => void;
+    onContinue: (mode: AppointmentMode, date: Date, slot: Slot, charge: string, paymentMode: PaymentMode) => void;
+    onDateChange?: (date: Date) => void;
+    initialStep?: "consultation" | "datetime";
+};
+export declare const AppointmentDateTimeModal: React.FC<AppointmentModalProps>;
+export {};