medos-sdk 1.1.11 → 1.1.12

package/dist/client/MedosClient.js

@@ -2,7 +2,7 @@ import axios from "axios";
 import { AuthService } from "../services/AuthService";
 import { AppointmentService, } from "../services/AppointmentService";
 import { PatientService, } from "../services/PatientService";
-import { API_BASE_URL } from "../constants";
+import { API_BASE_URL } from "../components/constants";
 class MedosClient {
     static async init({ apiKey }) {
         if (!apiKey) {

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

@@ -1,17 +1,11 @@
 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 { AppointmentDateTimeModal, DoctorSelectModal, PhoneVerificationStep, PatientSelectionStep, PatientDetailsStep, AppointmentConfirmationStep, BookingOptionStep, AppointmentSummaryStep, } from "./components";
 import { useTheme } from "../../react/hooks/useTheme";
 import { useBreakpoint } from "../../core/theme/responsive";
-import MedosLogo from "../Icons/MedosLogo";
+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, handleDateChange, sendOtp, verifyOtp, submitAppointment } = useAppointmentFlow(state, dispatch, onError);
@@ -51,7 +45,11 @@ export const AppointmentCalender = ({ onError, }) => {
     };
     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);
     };
@@ -155,8 +153,8 @@ export const AppointmentCalender = ({ onError, }) => {
     };
     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
+    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
@@ -185,63 +183,3 @@ export const AppointmentCalender = ({ onError, }) => {
                                 ? 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/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;
+};