medos-sdk 1.1.10 → 1.1.12

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

@@ -1,32 +1,164 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { AppointmentDateTimeModal } from "../AppointmentDateTimeModal";
-import { DoctorSelectModal } from "../DoctorSelectModal";
-import { PhoneVerificationStep } from "../PhoneVerificationStep";
-import { PatientDetailsStep } from "../PatientDetailsStep";
-import AppointmentConfirmationStep from "../AppointmentConfirmationStep";
+import { AppointmentDateTimeModal, DoctorSelectModal, PhoneVerificationStep, PatientSelectionStep, PatientDetailsStep, AppointmentConfirmationStep, BookingOptionStep, AppointmentSummaryStep, } from "./components";
 import { useTheme } from "../../react/hooks/useTheme";
-import MedosLogo from "../Icons/MedosLogo";
+import { useBreakpoint } from "../../core/theme/responsive";
+import { MedosLogo } from "../shared/icons";
 import { useAppointmentState, useAppointmentFlow, useInitializeAddresses, } from "./hooks";
-import { formatDateToISO } from "../utils";
+import { formatDateToISO } from "../utils/date";
+import { getContainerStyles } from "../theme-styles";
 export const AppointmentCalender = ({ onError, }) => {
     const { state, dispatch, setStep, resetForm } = useAppointmentState();
-    const { goBack, goToNext, handleDateChange, sendOtp, verifyOtp, submitAppointment, } = useAppointmentFlow(state, dispatch, onError);
+    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_PACKAGE_CONFIG_ID", payload: pkg.id });
+        const packageAmount = pkg.discountedPrice || pkg.price;
+        dispatch({ type: "SET_PACKAGE_AMOUNT", payload: packageAmount });
+        dispatch({ type: "SET_BOOKING_TYPE", payload: "PACKAGE_PURCHASE" });
+        dispatch({ type: "SET_CONSULTATION_CHARGE", payload: "0" });
+        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(1);
+        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(3);
+        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 styles = getStyles(theme);
-    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(DoctorSelectModal, { addresses: state.addresses, addressDoctorsMap: state.addressDoctorsMap, selectedAddressId: state.selectedAddress, selectedDoctorId: state.selectedDoctor, onCancel: () => setStep(0), onContinue: handleDoctorSelect })), state.step === 1 && (_jsx(AppointmentDateTimeModal, { onlineFee: 500, offlineFee: 300, slots: state.slots, selectedDate: state.selectedDate, selectedSlot: state.selectedSlot, consultationMode: state.consultationMode, onCancel: goBack, onDateChange: handleDateChange, onContinue: handleDateTimeModalContinue })), state.step === 3 && (_jsx(PhoneVerificationStep, { state: state, dispatch: dispatch, onSendOtp: sendOtp, onVerifyOtp: verifyOtp, onBack: goBack, onContinue: goToNext })), state.step === 4 && (_jsx(PatientDetailsStep, { state: state, dispatch: dispatch, onBack: goBack, onSubmit: submitAppointment })), state.step === 5 && (_jsx(AppointmentConfirmationStep, { appointment: {
+    const breakpoint = useBreakpoint(theme);
+    const styles = getContainerStyles(theme, "medos", 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, selectedNewPackage: state.selectedNewPackage, 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"
@@ -49,59 +181,5 @@ export const AppointmentCalender = ({ onError, }) => {
                                 ? 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 })), _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" } }) })] })] })] }) }));
+                                : 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) => ({
-    container: {
-        display: "flex",
-        justifyContent: "center",
-        padding: 20,
-        fontFamily: theme.typography.fontFamily,
-        background: theme.colors.background,
-    },
-    card: {
-        width: "100%",
-        maxWidth: 840,
-        background: theme.colors.surface,
-        borderRadius: theme.radii.lg,
-        boxShadow: theme.shadows.lg,
-        overflow: "hidden",
-        boxSizing: "border-box",
-    },
-    header: {
-        padding: "20px 24px",
-    },
-    title: {
-        margin: 0,
-        fontSize: theme.typography.fontSizeXl,
-        fontWeight: theme.typography.fontWeightSemibold,
-    },
-    content: {
-        padding: 24,
-    },
-    errorMessage: {
-        marginBottom: 12,
-        color: theme.colors.error,
-        fontWeight: 600,
-        padding: "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: 24,
-        paddingTop: 16,
-        borderTop: `1px solid ${theme.colors.border}`,
-        opacity: 0.8,
-    },
-    poweredBy: {
-        fontSize: 12,
-        color: theme.colors.textSecondary,
-        fontWeight: 500,
-    },
-});

package/dist/components/appointment-booking/appointment-modal-styles.d.ts

@@ -0,0 +1,272 @@
+import React from "react";
+export declare const getMobileStyles: (theme: any, breakpoint: string) => {
+    container: {
+        backgroundColor: any;
+        padding: string;
+        maxWidth: string;
+        fontFamily: any;
+        color: any;
+        minHeight: string;
+        boxSizing: "border-box";
+    };
+    header: {
+        marginBottom: number;
+    };
+    title: {
+        fontSize: number;
+        fontWeight: number;
+        margin: number;
+        color: any;
+    };
+    section: {
+        marginBottom: number;
+    };
+    sectionTitle: {
+        fontSize: number;
+        fontWeight: number;
+        marginBottom: number;
+        color: any;
+    };
+    required: {
+        color: any;
+        marginLeft: number;
+    };
+    modeContainer: {
+        display: string;
+        flexDirection: "column";
+        gap: number;
+    };
+    modeOption: {
+        display: string;
+        alignItems: string;
+        gap: number;
+        padding: string;
+        border: string;
+        borderRadius: string;
+        cursor: string;
+        fontSize: number;
+        transition: string;
+        backgroundColor: any;
+    };
+    radioInput: {
+        width: number;
+        height: number;
+        accentColor: any;
+    };
+    chargeAmount: {
+        fontSize: number;
+        fontWeight: number;
+        color: any;
+    };
+    paymentOption: {
+        padding: string;
+        border: string;
+        borderRadius: string;
+        fontSize: number;
+        color: any;
+        backgroundColor: any;
+    };
+    dateSection: {
+        marginBottom: number;
+        padding: string;
+        backgroundColor: any;
+        borderRadius: string;
+        border: string;
+    };
+    dateSectionHeader: {
+        marginBottom: number;
+    };
+    dateSectionTitle: {
+        fontSize: number;
+        fontWeight: number;
+        color: any;
+        margin: number;
+        letterSpacing: string;
+        textTransform: "uppercase";
+    };
+    monthNavigationContainer: {
+        display: string;
+        alignItems: string;
+        justifyContent: string;
+        marginBottom: number;
+        position: "relative";
+    };
+    monthYearDisplay: {
+        fontSize: number;
+        fontWeight: number;
+        color: any;
+        textAlign: "center";
+        flex: number;
+    };
+    navButton: {
+        background: string;
+        border: string;
+        color: any;
+        cursor: string;
+        padding: number;
+        borderRadius: string;
+        display: string;
+        alignItems: string;
+        justifyContent: string;
+        transition: string;
+        minWidth: number;
+        minHeight: number;
+        flexShrink: number;
+    };
+    dateCardsContainer: {
+        display: string;
+        justifyContent: string;
+        alignItems: string;
+        gap: number;
+        width: string;
+        maxWidth: string;
+        overflow: string;
+    };
+    dateCard: {
+        width: number;
+        height: number;
+        border: string;
+        borderRadius: string;
+        display: string;
+        flexDirection: "column";
+        alignItems: string;
+        justifyContent: string;
+        cursor: string;
+        transition: string;
+        backgroundColor: any;
+        position: "relative";
+        flex: string;
+    };
+    dateCardSelected: {
+        borderColor: any;
+        backgroundColor: any;
+        color: any;
+    };
+    dateCardWeekday: {
+        fontSize: number;
+        fontWeight: number;
+        textTransform: "uppercase";
+        marginBottom: number;
+        letterSpacing: string;
+        lineHeight: number;
+    };
+    dateCardDay: {
+        fontSize: number;
+        fontWeight: number;
+        lineHeight: number;
+    };
+    slotsContainer: {
+        marginBottom: number;
+        width: string;
+        boxSizing: "border-box";
+    };
+    slotGrid: {
+        display: string;
+        gridTemplateColumns: string;
+        gap: number;
+        marginTop: number;
+        maxHeight: string;
+        overflowY: "auto";
+        paddingRight: string;
+        paddingBottom: string;
+        scrollbarWidth: "thin";
+        scrollbarColor: string;
+        width: string;
+        boxSizing: "border-box";
+    };
+    slotButton: {
+        padding: string;
+        border: string;
+        borderRadius: string;
+        backgroundColor: any;
+        color: any;
+        fontSize: number;
+        fontWeight: number;
+        cursor: string;
+        transition: string;
+        minHeight: number;
+        boxShadow: string;
+        position: "relative";
+        letterSpacing: string;
+        width: string;
+        boxSizing: "border-box";
+        textAlign: "center";
+        display: string;
+        alignItems: string;
+        justifyContent: string;
+        whiteSpace: "nowrap";
+        overflow: string;
+        textOverflow: string;
+    };
+    slotButtonSelected: {
+        borderColor: any;
+        backgroundColor: any;
+        color: any;
+        boxShadow: string;
+        transform: string;
+    };
+    noSlots: {
+        textAlign: "center";
+        color: any;
+        fontSize: number;
+        marginTop: number;
+        padding: string;
+    };
+    footer: {
+        display: string;
+        gap: number;
+        marginTop: string;
+        paddingTop: number;
+        borderTop: string;
+    };
+    backButton: {
+        flex: number;
+        padding: string;
+        border: string;
+        borderRadius: string;
+        backgroundColor: any;
+        color: any;
+        fontSize: number;
+        fontWeight: number;
+        cursor: string;
+        transition: string;
+        minHeight: number;
+    };
+    nextButton: {
+        flex: number;
+        padding: string;
+        border: string;
+        borderRadius: string;
+        backgroundColor: any;
+        color: any;
+        fontSize: number;
+        fontWeight: number;
+        cursor: string;
+        transition: string;
+        minHeight: number;
+        boxShadow: string;
+    };
+};
+export declare const getDesktopStyles: (theme: any, breakpoint: string) => {
+    modalWrapper: React.CSSProperties;
+    sectionCard: React.CSSProperties;
+    sectionHeader: React.CSSProperties;
+    sectionTitle: React.CSSProperties;
+    sectionBody: React.CSSProperties;
+    label: React.CSSProperties;
+    modeContainer: React.CSSProperties;
+    radioLabel: React.CSSProperties;
+    radioInput: React.CSSProperties;
+    rupee: React.CSSProperties;
+    dateTimeContainer: React.CSSProperties;
+    calendarBox: React.CSSProperties;
+    timesContainer: React.CSSProperties;
+    timesLabel: React.CSSProperties;
+    dateLabel: React.CSSProperties;
+    noSlots: React.CSSProperties;
+    slotGrid: React.CSSProperties;
+    slotButton: React.CSSProperties;
+    footer: React.CSSProperties;
+    backBtn: React.CSSProperties;
+    continueBtn: React.CSSProperties;
+};