medos-sdk 1.1.9 → 1.1.11

package/dist/components/PatientSelectionStep.js

@@ -0,0 +1,254 @@
+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 { getButtonStyles } from "./theme-styles";
+export const PatientSelectionStep = ({ verifiedPatients, selectedPatient, onSelectPatient, onProceedAsNewPatient, onBack, isFirstStep = false, }) => {
+    const theme = useTheme();
+    const BUTTON_STYLES = getButtonStyles(theme);
+    const styles = getPatientSelectionStyles(theme);
+    const [tempSelection, setTempSelection] = React.useState(null);
+    const handlePatientSelect = (patient) => {
+        setTempSelection({ type: "existing", patient });
+    };
+    const handleNewPatientSelect = () => {
+        setTempSelection({ type: "new" });
+    };
+    const handleNext = () => {
+        if (tempSelection) {
+            if (tempSelection.type === "existing" && tempSelection.patient) {
+                onSelectPatient(tempSelection.patient);
+            }
+            else if (tempSelection.type === "new") {
+                onProceedAsNewPatient();
+            }
+        }
+    };
+    return (_jsxs("div", { style: styles.container, children: [_jsxs("div", { style: styles.header, children: [_jsx("h3", { style: styles.title, children: "Select Patient" }), verifiedPatients.length > 0 ? (_jsxs("p", { style: styles.subtitle, children: ["We found ", verifiedPatients.length, " registered patient", verifiedPatients.length > 1 ? "s" : "", " with this number"] })) : (_jsx("p", { style: styles.subtitle, children: "No registered patients found with this number" }))] }), _jsxs("div", { style: styles.content, children: [verifiedPatients.length > 0 && (_jsxs(_Fragment, { children: [_jsx("div", { style: styles.patientList, children: verifiedPatients.map((patient) => (_jsx(PatientCard, { patient: patient, isSelected: tempSelection?.type === "existing" &&
+                                        tempSelection?.patient?.id === patient.id, onSelect: () => handlePatientSelect(patient), theme: theme }, patient.id))) }), _jsx("div", { style: styles.divider, children: _jsx("span", { style: styles.dividerText, children: "OR" }) })] })), _jsxs("button", { style: {
+                            ...styles.newPatientButton,
+                            ...(tempSelection?.type === "new"
+                                ? styles.newPatientButtonSelected
+                                : {}),
+                        }, onClick: handleNewPatientSelect, children: [_jsx("div", { style: styles.newPatientIcon, children: "+" }), _jsxs("div", { style: styles.newPatientContent, children: [_jsx("div", { style: styles.newPatientTitle, children: "Register as New Patient" }), _jsx("div", { style: styles.newPatientSubtitle, children: "Fill out the form to create a new patient profile" })] })] })] }), _jsxs("div", { style: {
+                    ...styles.footer,
+                    justifyContent: "flex-end",
+                }, children: [!isFirstStep && (_jsx("button", { style: BUTTON_STYLES.secondary, onClick: onBack, children: "Back" })), _jsx("button", { style: {
+                            ...BUTTON_STYLES.primary,
+                            opacity: tempSelection ? 1 : 0.6,
+                        }, onClick: handleNext, disabled: !tempSelection, children: "Next" })] })] }));
+};
+const PatientCard = ({ patient, isSelected, onSelect, theme }) => {
+    const styles = getPatientCardStyles(theme, isSelected);
+    const formatDate = (dateStr) => {
+        const date = new Date(dateStr);
+        return date.toLocaleDateString("en-US", {
+            year: "numeric",
+            month: "short",
+            day: "numeric",
+        });
+    };
+    return (_jsxs("button", { style: styles.card, onClick: onSelect, type: "button", children: [_jsx("div", { style: styles.radioContainer, children: _jsx("div", { style: styles.radio, children: isSelected && _jsx("div", { style: styles.radioInner }) }) }), _jsxs("div", { style: styles.content, children: [_jsxs("div", { style: styles.header, children: [_jsxs("div", { style: styles.name, children: [patient.firstName, " ", patient.lastName] }), _jsxs("div", { style: styles.mrn, children: ["MRN: ", patient.mrn] })] }), _jsxs("div", { style: styles.details, children: [_jsxs("div", { style: styles.detailRow, children: [_jsx("span", { style: styles.detailLabel, children: "Email:" }), _jsx("span", { style: styles.detailValue, children: patient.email })] }), _jsxs("div", { style: styles.detailRow, children: [_jsx("span", { style: styles.detailLabel, children: "Phone:" }), _jsxs("span", { style: styles.detailValue, children: [patient.countryCode, " ", patient.phoneNumber] })] }), _jsxs("div", { style: styles.detailRow, children: [_jsx("span", { style: styles.detailLabel, children: "DOB:" }), _jsx("span", { style: styles.detailValue, children: formatDate(patient.dob) })] }), _jsxs("div", { style: styles.detailRow, children: [_jsx("span", { style: styles.detailLabel, children: "Gender:" }), _jsx("span", { style: styles.detailValue, children: patient.gender })] }), _jsxs("div", { style: styles.detailRow, children: [_jsx("span", { style: styles.detailLabel, children: "Blood Group:" }), _jsx("span", { style: styles.detailValue, children: patient.bloodGroup })] }), patient.address && (_jsxs("div", { style: styles.detailRow, children: [_jsx("span", { style: styles.detailLabel, children: "Address:" }), _jsxs("span", { style: styles.detailValue, children: [patient.address.city, ", ", patient.address.state] })] }))] })] })] }));
+};
+const getPatientSelectionStyles = (theme) => ({
+    container: {
+        display: "flex",
+        flexDirection: "column",
+        height: "100%",
+        gap: "20px",
+    },
+    header: {
+        textAlign: "center",
+        marginBottom: "4px",
+    },
+    title: {
+        fontSize: "24px",
+        fontWeight: "600",
+        color: theme.colors.text,
+        marginBottom: "8px",
+    },
+    subtitle: {
+        fontSize: "14px",
+        color: theme.colors.textSecondary,
+        margin: 0,
+    },
+    content: {
+        flex: 1,
+        overflowY: "auto",
+        display: "flex",
+        flexDirection: "column",
+        gap: "20px",
+    },
+    patientList: {
+        display: "flex",
+        flexDirection: "column",
+        gap: "12px",
+    },
+    divider: {
+        display: "flex",
+        alignItems: "center",
+        textAlign: "center",
+        margin: "16px 0",
+        position: "relative",
+        "&::before": {
+            content: '""',
+            flex: 1,
+            borderBottom: `1px solid ${theme.colors.border}`,
+        },
+        "&::after": {
+            content: '""',
+            flex: 1,
+            borderBottom: `1px solid ${theme.colors.border}`,
+        },
+    },
+    dividerText: {
+        padding: "0 16px",
+        color: theme.colors.textSecondary,
+        fontSize: "14px",
+        fontWeight: "500",
+        backgroundColor: theme.colors.background,
+    },
+    newPatientButton: {
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        gap: "16px",
+        padding: "14px",
+        border: `2px dashed ${theme.colors.border}`,
+        borderRadius: theme.radii.md,
+        background: theme.colors.background,
+        cursor: "pointer",
+        transition: "all 0.2s ease",
+        textAlign: "center",
+        "&:hover": {
+            borderColor: theme.colors.primary,
+            background: `${theme.colors.primary}10`,
+        },
+    },
+    newPatientIcon: {
+        width: "48px",
+        height: "48px",
+        borderRadius: "50%",
+        background: theme.colors.primary,
+        color: "white",
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        fontSize: "24px",
+        fontWeight: "400",
+        flexShrink: 0,
+        lineHeight: "1",
+    },
+    newPatientContent: {
+        display: "flex",
+        flexDirection: "column",
+        alignItems: "center",
+        justifyContent: "center",
+        textAlign: "center",
+    },
+    newPatientTitle: {
+        fontSize: "16px",
+        fontWeight: "600",
+        color: theme.colors.text,
+        marginBottom: "4px",
+        textAlign: "center",
+    },
+    newPatientSubtitle: {
+        fontSize: "14px",
+        color: theme.colors.textSecondary,
+        textAlign: "center",
+    },
+    newPatientButtonSelected: {
+        borderColor: theme.colors.primary,
+        background: `${theme.colors.primary}08`,
+    },
+    footer: {
+        display: "flex",
+        justifyContent: "space-between",
+        gap: "12px",
+        paddingTop: "16px",
+        borderTop: `1px solid ${theme.colors.border}`,
+    },
+    nextBtnDisabled: {
+        backgroundColor: theme.colors.textSecondary || "#9ca3af",
+        cursor: "not-allowed",
+        opacity: 0.6,
+        color: "white",
+    },
+});
+const getPatientCardStyles = (theme, isSelected) => ({
+    card: {
+        display: "flex",
+        gap: "16px",
+        padding: "16px",
+        border: `2px solid ${isSelected ? theme.colors.primary : theme.colors.border}`,
+        borderRadius: theme.radii.md,
+        background: isSelected
+            ? `${theme.colors.primary}08`
+            : theme.colors.background,
+        cursor: "pointer",
+        transition: "all 0.2s ease",
+        "&:hover": {
+            borderColor: theme.colors.primary,
+            background: `${theme.colors.primary}05`,
+        },
+    },
+    radioContainer: {
+        paddingTop: "2px",
+    },
+    radio: {
+        width: "20px",
+        height: "20px",
+        borderRadius: "50%",
+        border: `2px solid ${isSelected ? theme.colors.primary : theme.colors.border}`,
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        transition: "all 0.2s ease",
+    },
+    radioInner: {
+        width: "10px",
+        height: "10px",
+        borderRadius: "50%",
+        background: theme.colors.primary,
+    },
+    content: {
+        flex: 1,
+    },
+    header: {
+        display: "flex",
+        justifyContent: "space-between",
+        alignItems: "center",
+        marginBottom: "12px",
+    },
+    name: {
+        fontSize: "18px",
+        fontWeight: "600",
+        color: theme.colors.text,
+    },
+    mrn: {
+        fontSize: "13px",
+        color: theme.colors.textSecondary,
+        fontWeight: "500",
+        padding: "4px 8px",
+        background: theme.colors.border,
+        borderRadius: theme.radii.sm,
+    },
+    details: {
+        display: "flex",
+        flexDirection: "column",
+        gap: "6px",
+    },
+    detailRow: {
+        display: "flex",
+        fontSize: "14px",
+        gap: "8px",
+    },
+    detailLabel: {
+        color: theme.colors.textSecondary,
+        fontWeight: "500",
+        minWidth: "100px",
+    },
+    detailValue: {
+        color: theme.colors.text,
+    },
+});

package/dist/components/PhoneVerificationStep.js

@@ -21,7 +21,7 @@ export const PhoneVerificationStep = ({ state, dispatch, onSendOtp, onVerifyOtp,
                             }, children: "Change Number" }), _jsx("button", { style: {
                                 ...BUTTON_STYLES.primary,
                                 opacity: state.otpCode.length === 6 ? 1 : 0.6,
-                            }, disabled: state.otpCode.length !== 6 || state.otpVerifying, onClick: onVerifyOtp, children: state.otpVerifying ? "Verifying..." : "Verify OTP" })] })) : (_jsxs(_Fragment, { children: [_jsx("button", { style: BUTTON_STYLES.secondary, onClick: onBack, children: "Back" }), _jsx("button", { style: BUTTON_STYLES.primary, onClick: onContinue, children: "Continue to Details" })] })) })] }));
+                            }, disabled: state.otpCode.length !== 6 || state.otpVerifying, onClick: onVerifyOtp, children: state.otpVerifying ? "Verifying..." : "Verify OTP" })] })) : (_jsxs(_Fragment, { children: [_jsx("button", { style: BUTTON_STYLES.secondary, onClick: onBack, children: "Back" }), _jsx("button", { style: BUTTON_STYLES.primary, onClick: onContinue, children: "Continue" })] })) })] }));
 };
 const PhoneInputSection = ({ countryCode, patientPhone, onCountryCodeChange, onPhoneChange }) => {
     const theme = useTheme();

package/dist/components/SuccessStep.js

@@ -5,5 +5,5 @@ export const SuccessStep = ({ onReset }) => {
     const theme = useTheme();
     const SUCCESS_STYLES = getSuccessStyles(theme);
     const BUTTON_STYLES = getButtonStyles(theme);
-    return (_jsxs("div", { style: SUCCESS_STYLES.container, children: [_jsx("div", { style: SUCCESS_STYLES.iconContainer, children: _jsx("div", { style: { fontSize: "48px", color: theme.colors.success }, children: "\u2713" }) }), _jsxs("div", { style: SUCCESS_STYLES.detailsContainer, children: [_jsx("h3", { style: SUCCESS_STYLES.detailsTitle, children: "Inquiry Submitted Successfully" }), _jsx("p", { style: SUCCESS_STYLES.confirmationNote, children: "Thank you for your inquiry. We will get back to you soon." })] }), _jsx("div", { style: { ...SUCCESS_STYLES.actionContainer, textAlign: "center" }, children: _jsx("button", { onClick: onReset, style: BUTTON_STYLES.primary, children: "Submit Another Inquiry" }) })] }));
+    return (_jsxs("div", { style: SUCCESS_STYLES.container, children: [_jsx("div", { style: SUCCESS_STYLES.iconContainer, children: _jsx("svg", { width: "32", height: "32", viewBox: "0 0 24 24", fill: "none", stroke: theme.colors.success, strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round", children: _jsx("polyline", { points: "20 6 9 17 4 12" }) }) }), _jsxs("div", { style: SUCCESS_STYLES.detailsContainer, children: [_jsx("h3", { style: SUCCESS_STYLES.detailsTitle, children: "Inquiry Submitted Successfully" }), _jsx("p", { style: SUCCESS_STYLES.confirmationNote, children: "Thank you for your inquiry. We will get back to you soon." })] }), _jsx("div", { style: SUCCESS_STYLES.actionContainer, children: _jsx("button", { onClick: onReset, style: BUTTON_STYLES.primary, children: "Submit Another Inquiry" }) })] }));
 };

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

@@ -0,0 +1,5 @@
+import React from "react";
+export interface AppointmentCalenderProps {
+    onError?: (err: Error) => void;
+}
+export declare const AppointmentCalender: React.FC<AppointmentCalenderProps>;

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

@@ -0,0 +1,247 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { AppointmentDateTimeModal } from "../AppointmentDateTimeModal";
+import { DoctorSelectModal } from "../DoctorSelectModal";
+import { PhoneVerificationStep } from "../PhoneVerificationStep";
+import { PatientSelectionStep } from "../PatientSelectionStep";
+import { PatientDetailsStep } from "../PatientDetailsStep";
+import AppointmentConfirmationStep from "../AppointmentConfirmationStep";
+import { BookingOptionStep } from "../BookingOptionStep";
+import { AppointmentSummaryStep } from "../AppointmentSummaryStep";
+import { useTheme } from "../../react/hooks/useTheme";
+import { useBreakpoint } from "../../core/theme/responsive";
+import MedosLogo from "../Icons/MedosLogo";
+import { useAppointmentState, useAppointmentFlow, useInitializeAddresses, } from "./hooks";
+import { formatDateToISO } from "../utils";
+export const AppointmentCalender = ({ onError, }) => {
+    const { state, dispatch, setStep, resetForm } = useAppointmentState();
+    const { goBack, handleDateChange, sendOtp, verifyOtp, submitAppointment } = useAppointmentFlow(state, dispatch, onError);
+    useInitializeAddresses(dispatch, onError);
+    const handlePhoneVerificationContinue = () => {
+        if (state.otpVerified) {
+            const activePack = state.userSessionPacks?.find((pack) => pack.remainingSessions > 0);
+            const hasAvailablePackages = (state.availablePackages || []).length > 0;
+            if (!activePack && !hasAvailablePackages) {
+                dispatch({
+                    type: "SET_BOOKING_OPTION_TYPE",
+                    payload: "new-appointment",
+                });
+                dispatch({ type: "SET_BOOKING_TYPE", payload: "ONE_TIME_APPOINTMENT" });
+                setStep(2);
+            }
+            else {
+                setStep(1);
+            }
+        }
+    };
+    const handleBookingOptionSelect = (optionType, sessionPack, newPackage) => {
+        dispatch({ type: "SET_BOOKING_OPTION_TYPE", payload: optionType });
+        if (optionType === "session-pack" && sessionPack) {
+            dispatch({ type: "SET_SELECTED_SESSION_PACK", payload: sessionPack });
+            dispatch({ type: "SET_BOOKING_TYPE", payload: "USE_ACTIVE_PACKAGE" });
+            setStep(2);
+        }
+        else if (optionType === "explore-packages") {
+            dispatch({ type: "SET_BOOKING_TYPE", payload: "PACKAGE_PURCHASE" });
+            dispatch({ type: "SET_SHOW_PACKAGE_EXPLORER", payload: true });
+        }
+        else if (optionType === "new-appointment") {
+            dispatch({ type: "SET_BOOKING_TYPE", payload: "ONE_TIME_APPOINTMENT" });
+            setStep(2);
+        }
+    };
+    const handlePackageSelect = (pkg) => {
+        dispatch({ type: "SET_SELECTED_NEW_PACKAGE", payload: pkg });
+        dispatch({ type: "SET_BOOKING_TYPE", payload: "PACKAGE_PURCHASE" });
+        dispatch({ type: "SET_SHOW_PACKAGE_EXPLORER", payload: false });
+        setStep(2);
+    };
+    const handleDoctorSelect = (addrId, docId) => {
+        dispatch({ type: "SET_SELECTED_ADDRESS", payload: addrId });
+        dispatch({ type: "SET_SELECTED_DOCTOR", payload: docId });
+        setStep(3);
+    };
+    const handleDateTimeModalContinue = (mode, date, slot, charge) => {
+        dispatch({ type: "SET_CONSULTATION_MODE", payload: mode });
+        dispatch({ type: "SET_SELECTED_DATE", payload: date });
+        dispatch({ type: "SET_SELECTED_SLOT", payload: slot });
+        dispatch({ type: "SET_CONSULTATION_CHARGE", payload: charge });
+        setStep(4);
+    };
+    const handleSelectExistingPatient = (patient) => {
+        dispatch({ type: "SET_SELECTED_PATIENT", payload: patient });
+        dispatch({ type: "SET_USE_EXISTING_PATIENT", payload: true });
+        dispatch({
+            type: "SET_PATIENT_NAME",
+            payload: `${patient.firstName} ${patient.lastName}`,
+        });
+        dispatch({ type: "SET_PATIENT_EMAIL", payload: patient.email });
+        dispatch({ type: "SET_PATIENT_AGE", payload: patient.age.toString() });
+        dispatch({ type: "SET_PATIENT_GENDER", payload: patient.gender });
+        dispatch({ type: "SET_BLOOD_GROUP", payload: patient.bloodGroup });
+        if (patient.address) {
+            dispatch({
+                type: "SET_PATIENT_ADDRESS",
+                payload: patient.address.addressLine1,
+            });
+            dispatch({ type: "SET_PATIENT_CITY", payload: patient.address.city });
+            dispatch({ type: "SET_PATIENT_STATE", payload: patient.address.state });
+            dispatch({
+                type: "SET_PATIENT_COUNTRY",
+                payload: patient.address.country,
+            });
+            dispatch({
+                type: "SET_PATIENT_ZIPCODE",
+                payload: patient.address.zipcode,
+            });
+            dispatch({
+                type: "SET_PATIENT_LANDMARK",
+                payload: patient.address.landmark || "",
+            });
+        }
+        setStep(6);
+    };
+    const handleProceedAsNewPatient = () => {
+        dispatch({ type: "SET_SELECTED_PATIENT", payload: null });
+        dispatch({ type: "SET_USE_EXISTING_PATIENT", payload: false });
+        dispatch({ type: "SET_PATIENT_NAME", payload: "" });
+        dispatch({ type: "SET_PATIENT_EMAIL", payload: "" });
+        dispatch({ type: "SET_PATIENT_AGE", payload: "" });
+        dispatch({ type: "SET_PATIENT_GENDER", payload: "" });
+        dispatch({ type: "SET_BLOOD_GROUP", payload: "" });
+        dispatch({ type: "SET_PATIENT_ADDRESS", payload: "" });
+        dispatch({ type: "SET_PATIENT_CITY", payload: "" });
+        dispatch({ type: "SET_PATIENT_STATE", payload: "" });
+        dispatch({ type: "SET_PATIENT_COUNTRY", payload: "" });
+        dispatch({ type: "SET_PATIENT_ZIPCODE", payload: "" });
+        dispatch({ type: "SET_PATIENT_LANDMARK", payload: "" });
+        setStep(5);
+    };
+    const handlePatientDetailsSubmit = async () => {
+        setStep(6);
+    };
+    const handleSummaryConfirm = async () => {
+        await submitAppointment();
+    };
+    const handleGoBack = () => {
+        if (state.showPackageExplorer) {
+            dispatch({ type: "SET_SHOW_PACKAGE_EXPLORER", payload: false });
+            return;
+        }
+        const currentStep = state.step;
+        if (currentStep > 0) {
+            if (currentStep === 6 && state.useExistingPatient) {
+                dispatch({ type: "SET_SELECTED_PATIENT", payload: null });
+                dispatch({ type: "SET_USE_EXISTING_PATIENT", payload: false });
+                setStep(4);
+                return;
+            }
+            if (currentStep === 2) {
+                dispatch({ type: "SET_BOOKING_OPTION_TYPE", payload: null });
+                dispatch({ type: "SET_SELECTED_SESSION_PACK", payload: null });
+                dispatch({ type: "SET_SELECTED_NEW_PACKAGE", payload: null });
+                const activePack = state.userSessionPacks?.find((pack) => pack.remainingSessions > 0);
+                const hasAvailablePackages = (state.availablePackages || []).length > 0;
+                if (!activePack && !hasAvailablePackages) {
+                    setStep(0);
+                }
+                else {
+                    setStep(1);
+                }
+            }
+            else {
+                setStep(currentStep - 1);
+            }
+        }
+    };
+    const theme = useTheme();
+    const breakpoint = useBreakpoint(theme);
+    const styles = getStyles(theme, breakpoint);
+    return (_jsx("div", { style: styles.container, children: _jsxs("div", { style: styles.card, children: [_jsx("div", { style: styles.header, children: _jsx("h2", { style: styles.title, children: "Book Appointment" }) }), _jsx("hr", {}), _jsxs("div", { style: styles.content, children: [state.loading && _jsx("div", { style: { marginBottom: 12 }, children: "Loading..." }), state.error && _jsx("div", { style: styles.errorMessage, children: state.error }), state.step === 0 && (_jsx(PhoneVerificationStep, { state: state, dispatch: dispatch, onSendOtp: sendOtp, onVerifyOtp: verifyOtp, onBack: () => { }, onContinue: handlePhoneVerificationContinue })), state.step === 1 && (_jsx(BookingOptionStep, { userSessionPacks: state.userSessionPacks || [], availablePackages: state.availablePackages || [], showPackageExplorer: state.showPackageExplorer || false, selectedSessionPack: state.selectedSessionPack, selectedNewPackage: state.selectedNewPackage, onSelectOption: handleBookingOptionSelect, onSelectPackage: handlePackageSelect, onBack: handleGoBack })), state.step === 2 && (_jsx(DoctorSelectModal, { addresses: state.addresses, addressDoctorsMap: state.addressDoctorsMap, selectedAddressId: state.selectedAddress, selectedDoctorId: state.selectedDoctor, onCancel: handleGoBack, onContinue: handleDoctorSelect })), state.step === 3 && (_jsx(AppointmentDateTimeModal, { onlineFee: 500, offlineFee: 300, slots: state.slots, selectedDate: state.selectedDate, selectedSlot: state.selectedSlot, consultationMode: state.consultationMode, onCancel: handleGoBack, onDateChange: handleDateChange, onContinue: handleDateTimeModalContinue, initialStep: "consultation" })), state.step === 4 && (_jsx(PatientSelectionStep, { verifiedPatients: state.verifiedPatients, selectedPatient: state.selectedPatient, onSelectPatient: handleSelectExistingPatient, onProceedAsNewPatient: handleProceedAsNewPatient, onBack: handleGoBack })), state.step === 5 && (_jsx(PatientDetailsStep, { state: state, dispatch: dispatch, onBack: handleGoBack, onSubmit: handlePatientDetailsSubmit })), state.step === 6 && (_jsx(AppointmentSummaryStep, { state: state, selectedDoctor: state.selectedAddress && state.selectedDoctor
+                                ? state.addressDoctorsMap[state.selectedAddress]?.find((doc) => doc.id === state.selectedDoctor) || null
+                                : null, selectedAddress: state.selectedAddress
+                                ? state.addresses.find((addr) => addr.id === state.selectedAddress) || null
+                                : null, onBack: handleGoBack, onConfirm: handleSummaryConfirm })), state.step === 7 && (_jsx(AppointmentConfirmationStep, { appointment: {
+                                patientName: state.patientName,
+                                visitationType: state.consultationMode === "ONLINE"
+                                    ? "Online Consultation"
+                                    : "In-Person Visit",
+                                appointmentDate: formatDateToISO(state.selectedDate),
+                                fromTime: state.selectedSlot?.start
+                                    ? new Date(state.selectedSlot.start)
+                                        .toTimeString()
+                                        .slice(0, 5)
+                                    : "",
+                                toTime: state.selectedSlot?.end
+                                    ? new Date(state.selectedSlot.end).toTimeString().slice(0, 5)
+                                    : "",
+                                location: state.addresses.find((addr) => addr.id === state.selectedAddress)?.label || "Clinic",
+                                mode: state.consultationMode,
+                                paymentMode: "Cash",
+                            }, patient: {
+                                patientName: state.patientName,
+                            }, selectedDoctor: state.selectedAddress && state.selectedDoctor
+                                ? state.addressDoctorsMap[state.selectedAddress]?.find((doc) => doc.id === state.selectedDoctor) || null
+                                : null, selectedAddress: state.selectedAddress
+                                ? state.addresses.find((addr) => addr.id === state.selectedAddress) || null
+                                : null, onClose: resetForm, onGoBackToSlots: () => setStep(3) })), _jsxs("div", { style: styles.branding, children: [_jsx("span", { style: styles.poweredBy, children: "Powered by" }), _jsx("a", { href: "https://medos.one", target: "_blank", rel: "noopener noreferrer", children: _jsx(MedosLogo, { style: { height: 50, width: "auto" } }) })] })] })] }) }));
+};
+const getStyles = (theme, breakpoint) => {
+    const isMobile = breakpoint === "mobile";
+    const isTablet = breakpoint === "tablet";
+    return {
+        container: {
+            display: "flex",
+            justifyContent: "center",
+            padding: isMobile ? 12 : 20,
+            fontFamily: theme.typography.fontFamily,
+            background: theme.colors.background,
+        },
+        card: {
+            width: "100%",
+            maxWidth: isMobile || isTablet ? "100%" : 840,
+            background: theme.colors.surface,
+            borderRadius: isMobile ? theme.radii.md : theme.radii.lg,
+            boxShadow: isMobile ? theme.shadows.md : theme.shadows.lg,
+            overflow: "hidden",
+            boxSizing: "border-box",
+        },
+        header: {
+            padding: isMobile ? "16px 16px" : "20px 24px",
+        },
+        title: {
+            margin: 0,
+            fontSize: isMobile
+                ? theme.typography.fontSizeLg
+                : theme.typography.fontSizeXl,
+            fontWeight: theme.typography.fontWeightSemibold,
+        },
+        content: {
+            padding: isMobile ? 16 : 24,
+        },
+        errorMessage: {
+            marginBottom: 12,
+            color: theme.colors.error,
+            fontWeight: 600,
+            padding: isMobile ? "10px" : "12px",
+            background: theme.colors.errorBackground,
+            borderRadius: theme.radii.md,
+            border: `1px solid ${theme.colors.errorBorder}`,
+            fontSize: theme.typography.fontSizeSm,
+        },
+        branding: {
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+            gap: 8,
+            marginTop: isMobile ? 16 : 24,
+            paddingTop: isMobile ? 12 : 16,
+            borderTop: `1px solid ${theme.colors.border}`,
+            opacity: 0.8,
+        },
+        poweredBy: {
+            fontSize: 12,
+            color: theme.colors.textSecondary,
+            fontWeight: 500,
+        },
+    };
+};

package/dist/components/appointment-booking/hooks/index.d.ts

@@ -0,0 +1,3 @@
+export { useAppointmentState } from "./useAppointmentState";
+export { useAppointmentFlow } from "./useAppointmentFlow";
+export { useInitializeAddresses } from "./useInitializeAddresses";

package/dist/components/appointment-booking/hooks/index.js

@@ -0,0 +1,3 @@
+export { useAppointmentState } from "./useAppointmentState";
+export { useAppointmentFlow } from "./useAppointmentFlow";
+export { useInitializeAddresses } from "./useInitializeAddresses";

package/dist/components/appointment-booking/hooks/useAppointmentFlow.d.ts

@@ -0,0 +1,8 @@
+import { AppointmentState } from "../types";
+export declare const useAppointmentFlow: (state: AppointmentState, dispatch: React.Dispatch<any>, onError?: (error: Error) => void) => {
+    goBack: () => void;
+    handleDateChange: (date: Date) => Promise<(() => void) | undefined>;
+    sendOtp: () => Promise<void>;
+    verifyOtp: () => Promise<void>;
+    submitAppointment: () => Promise<void>;
+};