medos-sdk 1.1.9 → 1.1.11

package/dist/components/DoctorSelectModal.js

@@ -1,93 +1,188 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState, useEffect } from "react";
 import { AppointmentService, } from "../services/AppointmentService";
-import { Select, SelectTrigger, SelectValue, SelectContent, SelectItem, } from "./uiComponents/SelectDropdown";
+import { Select, SelectTrigger, SelectContent, SelectItem, } from "./uiComponents/SelectDropdown";
 import { useTheme } from "../react/hooks/useTheme";
-export const DoctorSelectModal = ({ onCancel, onContinue, }) => {
+import { useBreakpoint } from "../core/theme/responsive";
+export const DoctorSelectModal = ({ addresses: initialAddresses, addressDoctorsMap: initialAddressDoctorsMap, selectedAddressId: initialSelectedAddressId, selectedDoctorId: initialSelectedDoctorId, onCancel, onContinue, }) => {
     const theme = useTheme();
-    const [addresses, setAddresses] = useState([]);
-    const [addressDoctorsMap, setAddressDoctorsMap] = useState({});
-    const [selectedAddressId, setSelectedAddressId] = useState("");
-    const [selectedDoctorId, setSelectedDoctorId] = useState("");
+    const breakpoint = useBreakpoint(theme);
+    const [addresses, setAddresses] = useState(initialAddresses || []);
+    const [addressDoctorsMap, setAddressDoctorsMap] = useState(initialAddressDoctorsMap || {});
+    const [selectedAddressId, setSelectedAddressId] = useState(initialSelectedAddressId ? String(initialSelectedAddressId) : "");
+    const [selectedDoctorId, setSelectedDoctorId] = useState(initialSelectedDoctorId ? String(initialSelectedDoctorId) : "");
     const [appointmentNotes, setAppointmentNotes] = useState("");
     useEffect(() => {
-        (async () => {
-            const res = await AppointmentService.getAddresses();
-            const map = {};
-            res.addresses.forEach((addr) => {
-                map[addr.id] = addr.doctors || [];
-            });
-            setAddresses(res.addresses);
-            setAddressDoctorsMap(map);
-        })();
+        if (initialAddresses && initialAddresses.length > 0) {
+            setAddresses(initialAddresses);
+        }
+        if (initialAddressDoctorsMap &&
+            Object.keys(initialAddressDoctorsMap).length > 0) {
+            setAddressDoctorsMap(initialAddressDoctorsMap);
+        }
+        if (initialSelectedAddressId !== undefined &&
+            initialSelectedAddressId !== null) {
+            setSelectedAddressId(String(initialSelectedAddressId));
+        }
+        if (initialSelectedDoctorId !== undefined &&
+            initialSelectedDoctorId !== null) {
+            setSelectedDoctorId(String(initialSelectedDoctorId));
+        }
+    }, [
+        initialAddresses,
+        initialAddressDoctorsMap,
+        initialSelectedAddressId,
+        initialSelectedDoctorId,
+    ]);
+    useEffect(() => {
+        if (!initialAddresses || initialAddresses.length === 0) {
+            (async () => {
+                try {
+                    const response = await AppointmentService.getAddresses();
+                    if (response.addresses?.length > 0) {
+                        setAddresses(response.addresses);
+                        const doctorMap = {};
+                        response.addresses.forEach((addr) => {
+                            doctorMap[addr.id] = addr.doctors || [];
+                        });
+                        setAddressDoctorsMap(doctorMap);
+                    }
+                }
+                catch (error) {
+                    console.error("Failed to fetch addresses:", error);
+                }
+            })();
+        }
     }, []);
     const doctorsForAddress = selectedAddressId
         ? addressDoctorsMap[Number(selectedAddressId)] || []
         : [];
+    const selectedAddressLabel = addresses.find((a) => String(a.id) === selectedAddressId)?.label ||
+        addresses.find((a) => String(a.id) === selectedAddressId)
+            ?.completeAddress ||
+        "";
+    const selectedDoctorLabel = doctorsForAddress.find((d) => String(d.id) === selectedDoctorId)?.name ||
+        "";
     const canContinue = !!selectedAddressId && !!selectedDoctorId;
-    const styles = getStyles(theme);
+    const styles = getStyles(theme, breakpoint);
     return (_jsx("div", { style: {
             border: `1px solid ${theme.colors.border}`,
             borderRadius: "2px",
         }, children: _jsxs("div", { style: styles.modalWrapper, children: [_jsx("div", { style: styles.headerWrapper, children: _jsx("h3", { style: styles.title, children: "Location & Doctor" }) }), _jsx("div", { style: { borderBottom: `1px solid ${theme.colors.border}` } }), _jsxs("div", { style: styles.contentWrapper, children: [_jsxs("div", { style: styles.fieldGroup, children: [_jsxs("label", { style: styles.label, children: ["Preferred Location ", _jsx("span", { style: styles.mandatory, children: "*" })] }), _jsxs(Select, { value: selectedAddressId, onValueChange: (value) => {
                                         setSelectedAddressId(value);
                                         setSelectedDoctorId("");
-                                    }, children: [_jsx(SelectTrigger, { style: { width: "100%" }, children: _jsx(SelectValue, { placeholder: "Select Address" }) }), _jsx(SelectContent, { children: addresses.map((a) => (_jsx(SelectItem, { value: String(a.id), children: a.completeAddress || a.label || `Address ${a.id}` }, a.id))) })] })] }), _jsxs("div", { style: styles.fieldGroup, children: [_jsxs("label", { style: styles.label, children: ["Preferred Doctor ", _jsx("span", { style: styles.mandatory, children: "*" })] }), _jsxs(Select, { value: selectedDoctorId, onValueChange: setSelectedDoctorId, disabled: !selectedAddressId, children: [_jsx(SelectTrigger, { style: { width: "100%" }, children: _jsx(SelectValue, { placeholder: "Select Doctor" }) }), _jsx(SelectContent, { children: doctorsForAddress.length > 0 ? (doctorsForAddress.map((d) => (_jsxs(SelectItem, { value: String(d.id), children: [d.name, " ", d.specialty ? `- ${d.specialty}` : ""] }, d.id)))) : (_jsx(SelectItem, { value: "no-doctors", disabled: true, children: "No doctors available" })) })] })] }), _jsxs("div", { style: styles.fieldGroup, children: [_jsxs("label", { style: styles.label, children: ["Chief Complaint ", _jsx("span", { style: styles.optional, children: "(optional)" })] }), _jsx("textarea", { style: styles.textarea, placeholder: "Enter Chief Complaint or Appointment Notes", value: appointmentNotes, onChange: (e) => setAppointmentNotes(e.target.value) })] }), _jsx("div", { style: styles.footer, children: _jsx("button", { style: {
-                                    ...styles.continueBtn,
-                                    opacity: canContinue ? 1 : 0.6,
-                                }, disabled: !canContinue, onClick: () => onContinue(Number(selectedAddressId), Number(selectedDoctorId), appointmentNotes), children: "Next" }) })] })] }) }));
+                                    }, children: [_jsx(SelectTrigger, { style: { width: "100%" }, children: _jsx("span", { style: {
+                                                    color: selectedAddressId ? "#1e293b" : "#94a3b8",
+                                                    overflow: "hidden",
+                                                    textOverflow: "ellipsis",
+                                                    whiteSpace: "nowrap",
+                                                    flex: 1,
+                                                }, children: selectedAddressLabel || "Select Address" }) }), _jsx(SelectContent, { children: addresses.map((a) => (_jsx(SelectItem, { value: String(a.id), children: a.completeAddress || a.label || `Address ${a.id}` }, a.id))) })] })] }), _jsxs("div", { style: styles.fieldGroup, children: [_jsxs("label", { style: styles.label, children: ["Preferred Doctor ", _jsx("span", { style: styles.mandatory, children: "*" })] }), _jsxs(Select, { value: selectedDoctorId, onValueChange: setSelectedDoctorId, disabled: !selectedAddressId, children: [_jsx(SelectTrigger, { style: { width: "100%" }, children: _jsx("span", { style: {
+                                                    color: selectedDoctorId ? "#1e293b" : "#94a3b8",
+                                                    overflow: "hidden",
+                                                    textOverflow: "ellipsis",
+                                                    whiteSpace: "nowrap",
+                                                    flex: 1,
+                                                }, children: selectedDoctorLabel || "Select Doctor" }) }), _jsx(SelectContent, { children: doctorsForAddress.length > 0 ? (doctorsForAddress.map((d) => (_jsxs(SelectItem, { value: String(d.id), children: [d.name, " ", d.specialty ? `- ${d.specialty}` : ""] }, d.id)))) : (_jsx(SelectItem, { value: "no-doctors", disabled: true, children: "No doctors available" })) })] })] }), _jsxs("div", { style: styles.fieldGroup, children: [_jsxs("label", { style: styles.label, children: ["Chief Complaint ", _jsx("span", { style: styles.optional, children: "(optional)" })] }), _jsx("textarea", { style: styles.textarea, placeholder: "Enter Chief Complaint or Appointment Notes", value: appointmentNotes, onChange: (e) => setAppointmentNotes(e.target.value) })] }), _jsxs("div", { style: styles.footer, children: [_jsx("button", { style: styles.backBtn, onClick: onCancel, children: "Back" }), _jsx("button", { style: {
+                                        ...styles.continueBtn,
+                                        opacity: canContinue ? 1 : 0.6,
+                                    }, disabled: !canContinue, onClick: () => onContinue(Number(selectedAddressId), Number(selectedDoctorId), appointmentNotes), children: "Next" })] })] })] }) }));
+};
+const getStyles = (theme, breakpoint) => {
+    const isMobile = breakpoint === "mobile";
+    const isTablet = breakpoint === "tablet";
+    const borderRadius = "12px";
+    const buttonRadius = "8px";
+    const cardBorder = `1px solid ${theme.colors.border}`;
+    return {
+        modalWrapper: {
+            backgroundColor: theme.colors.background,
+            borderRadius,
+            maxWidth: isMobile || isTablet ? "100%" : 840,
+            margin: "0 auto",
+            fontFamily: theme.typography.fontFamily,
+            color: theme.colors.text,
+        },
+        headerWrapper: {
+            padding: isMobile ? "16px 20px" : "18px 24px",
+            backgroundColor: theme.colors.primary,
+            color: theme.colors.textOnPrimary,
+        },
+        contentWrapper: {
+            padding: isMobile ? "20px" : "24px",
+        },
+        title: {
+            fontSize: isMobile ? 16 : 18,
+            fontWeight: 600,
+            margin: 0,
+            color: theme.colors.textOnPrimary,
+        },
+        fieldGroup: { marginBottom: isMobile ? 18 : 20 },
+        label: {
+            fontSize: 14,
+            fontWeight: 500,
+            marginBottom: 8,
+            display: "block",
+            color: theme.colors.text,
+        },
+        mandatory: { color: theme.colors.error, marginLeft: 4 },
+        optional: {
+            color: theme.colors.textSecondary,
+            fontWeight: 400,
+            marginLeft: 4,
+            fontSize: 13,
+        },
+        textarea: {
+            width: "100%",
+            border: cardBorder,
+            borderRadius: buttonRadius,
+            minHeight: 100,
+            padding: "12px 14px",
+            fontSize: 14,
+            resize: "vertical",
+            boxSizing: "border-box",
+            transition: "border-color 0.2s ease, box-shadow 0.2s ease",
+            outline: "none",
+            backgroundColor: theme.colors.surface,
+            color: theme.colors.text,
+        },
+        footer: {
+            marginTop: isMobile ? 20 : 24,
+            paddingTop: 20,
+            borderTop: cardBorder,
+            display: "flex",
+            justifyContent: isMobile ? "stretch" : "flex-end",
+            alignItems: "center",
+            gap: 12,
+            flexDirection: isMobile ? "column" : "row",
+        },
+        brand: { color: theme.colors.primary, fontWeight: 600 },
+        backBtn: {
+            background: theme.colors.surface,
+            color: theme.colors.text,
+            border: cardBorder,
+            borderRadius: buttonRadius,
+            fontWeight: 600,
+            padding: isMobile ? "12px 20px" : "10px 20px",
+            cursor: "pointer",
+            width: isMobile ? "100%" : "auto",
+            minHeight: isMobile ? "44px" : "40px",
+            fontSize: 14,
+            transition: "all 0.2s ease",
+        },
+        continueBtn: {
+            background: theme.colors.secondary,
+            color: theme.colors.textOnSecondary,
+            border: "none",
+            borderRadius: buttonRadius,
+            fontWeight: 600,
+            padding: isMobile ? "12px 20px" : "10px 20px",
+            cursor: "pointer",
+            width: isMobile ? "100%" : "auto",
+            minHeight: isMobile ? "44px" : "40px",
+            fontSize: 14,
+            transition: "all 0.2s ease",
+            boxShadow: "0 1px 2px rgba(0, 0, 0, 0.05)",
+        },
+    };
 };
-const getStyles = (theme) => ({
-    modalWrapper: {
-        backgroundColor: theme.colors.background,
-        borderRadius: 12,
-        maxWidth: 840,
-        margin: "0 auto",
-        fontFamily: theme.typography.fontFamily,
-        color: theme.colors.text,
-    },
-    headerWrapper: {
-        padding: "20px 24px 10px 24px",
-    },
-    contentWrapper: {
-        padding: "20px 24px 10px 24px",
-    },
-    title: { fontSize: 20, fontWeight: 600, margin: 0 },
-    fieldGroup: { marginBottom: 18 },
-    label: { fontSize: 15, fontWeight: 500, marginBottom: 6, display: "block" },
-    mandatory: { color: theme.colors.error, marginLeft: 4 },
-    optional: {
-        color: theme.colors.textSecondary,
-        fontWeight: 400,
-        marginLeft: 4,
-        fontSize: 13,
-    },
-    textarea: {
-        width: "100%",
-        border: `1px solid ${theme.colors.border}`,
-        borderRadius: theme.radii.md,
-        minHeight: 80,
-        padding: "10px",
-        fontSize: 14,
-        resize: "vertical",
-        boxSizing: "border-box",
-    },
-    footer: {
-        marginTop: 24,
-        marginBottom: 10,
-        display: "flex",
-        justifyContent: "flex-end",
-        alignItems: "center",
-        gap: 10,
-    },
-    brand: { color: theme.colors.primary, fontWeight: 600 },
-    continueBtn: {
-        background: theme.colors.secondary,
-        color: theme.colors.textOnSecondary,
-        border: "none",
-        borderRadius: theme.radii.md,
-        fontWeight: 600,
-        padding: "8px 22px",
-        cursor: "pointer",
-    },
-});

package/dist/components/EnquiryForm.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useReducer, useCallback } from "react";
+import React, { useReducer, useCallback } from "react";
 import { EnquiryService } from "../services/EnquiryService";
 import { validateName, validateEmail, validatePhoneNumber, validateSubject, validateMessage, validateCountryCode, } from "../enquiry-form/validation";
 import { ContactInformationStep } from "./ContactInformationStep";
@@ -7,6 +7,7 @@ import { InquiryDetailsStep } from "./InquiryDetailsStep";
 import { ContactPreferenceStep } from "./ContactPreferenceStep";
 import { SuccessStep } from "./SuccessStep";
 import { useTheme } from "../react/hooks/useTheme";
+import { useBreakpoint } from "../core/theme/responsive";
 import MedosLogo from "./Icons/MedosLogo";
 const INITIAL_STATE = {
     step: 0,
@@ -100,7 +101,7 @@ export const EnquiryForm = ({ onSuccess, onError, }) => {
         if (!validateMessage(state.inquiryMessage)) {
             dispatch({
                 type: "SET_ERROR",
-                payload: "Please enter a valid message (max 1000 characters).",
+                payload: "Please enter a valid message.",
             });
             return false;
         }
@@ -151,78 +152,89 @@ export const EnquiryForm = ({ onSuccess, onError, }) => {
         finally {
             dispatch({ type: "SET_LOADING", payload: false });
         }
-    }, [state, validateContactStep, validateInquiryStep, onSuccess, onError]);
+    }, [state, validateContactStep, validateInquiryStep]);
     const theme = useTheme();
-    const styles = getStyles(theme);
-    return (_jsx("div", { style: styles.container, children: _jsxs("div", { style: styles.card, children: [_jsxs("div", { style: styles.header, children: [_jsx("h2", { style: styles.title, children: "Submit Inquiry" }), _jsxs("p", { style: styles.stepIndicator, children: ["Step ", state.step + 1, " of 4"] })] }), _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(ContactInformationStep, { patientName: state.patientName, patientEmail: state.patientEmail, countryCode: state.countryCode, patientPhone: state.patientPhone, onNameChange: (value) => dispatch({ type: "SET_PATIENT_NAME", payload: value }), onEmailChange: (value) => dispatch({ type: "SET_PATIENT_EMAIL", payload: value }), onCountryCodeChange: (value) => dispatch({ type: "SET_COUNTRY_CODE", payload: value }), onPhoneChange: (value) => dispatch({ type: "SET_PATIENT_PHONE", payload: value }), onNext: goToNext })), state.step === 1 && (_jsx(InquiryDetailsStep, { inquirySubject: state.inquirySubject, inquiryMessage: state.inquiryMessage, onSubjectChange: (value) => dispatch({ type: "SET_INQUIRY_SUBJECT", payload: value }), onMessageChange: (value) => dispatch({ type: "SET_INQUIRY_MESSAGE", payload: value }), onBack: goBack, onNext: goToNext })), state.step === 2 && (_jsx(ContactPreferenceStep, { preferredContactMethod: state.preferredContactMethod, onContactMethodChange: (method) => dispatch({
+    const breakpoint = useBreakpoint(theme);
+    const styles = React.useMemo(() => getStyles(theme, breakpoint), [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: "Submit Inquiry" }) }), _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(ContactInformationStep, { patientName: state.patientName, patientEmail: state.patientEmail, countryCode: state.countryCode, patientPhone: state.patientPhone, onNameChange: (value) => dispatch({ type: "SET_PATIENT_NAME", payload: value }), onEmailChange: (value) => dispatch({ type: "SET_PATIENT_EMAIL", payload: value }), onCountryCodeChange: (value) => dispatch({ type: "SET_COUNTRY_CODE", payload: value }), onPhoneChange: (value) => dispatch({ type: "SET_PATIENT_PHONE", payload: value }), onNext: goToNext })), state.step === 1 && (_jsx(InquiryDetailsStep, { inquirySubject: state.inquirySubject, inquiryMessage: state.inquiryMessage, onSubjectChange: (value) => dispatch({ type: "SET_INQUIRY_SUBJECT", payload: value }), onMessageChange: (value) => dispatch({ type: "SET_INQUIRY_MESSAGE", payload: value }), onBack: goBack, onNext: goToNext })), state.step === 2 && (_jsx(ContactPreferenceStep, { preferredContactMethod: state.preferredContactMethod, onContactMethodChange: (method) => dispatch({
                                 type: "SET_PREFERRED_CONTACT_METHOD",
                                 payload: method,
                             }), onBack: goBack, onSubmit: submitEnquiry, isLoading: state.loading })), state.step === 3 && _jsx(SuccessStep, { onReset: 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" } }) })] })] })] }) }));
 };
-const getStyles = (theme) => ({
-    container: {
-        display: "flex",
-        justifyContent: "center",
-        padding: 20,
-        fontFamily: theme.typography.fontFamily,
-        background: theme.colors.background,
-    },
-    card: {
-        width: "100%",
-        maxWidth: 600,
-        background: theme.colors.surface,
-        borderRadius: theme.radii.lg,
-        boxShadow: theme.shadows.lg,
-        overflow: "hidden",
-        boxSizing: "border-box",
-    },
-    header: {
-        background: theme.colors.primary,
-        padding: "20px 24px",
-        borderBottom: `1px solid ${theme.colors.border}`,
-        display: "flex",
-        justifyContent: "space-between",
-        alignItems: "center",
-    },
-    title: {
-        margin: 0,
-        fontSize: theme.typography.fontSizeXl,
-        fontWeight: theme.typography.fontWeightSemibold,
-        color: theme.colors.textOnPrimary,
-    },
-    stepIndicator: {
-        fontSize: theme.typography.fontSizeSm,
-        color: theme.colors.textOnPrimary,
-        opacity: 0.9,
-        margin: 0,
-        fontWeight: 500,
-    },
-    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,
-    },
-});
+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%" : 600,
+            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: {
+            background: theme.colors.primary,
+            padding: isMobile ? "16px 16px" : "20px 24px",
+            borderBottom: `1px solid ${theme.colors.border}`,
+            display: "flex",
+            justifyContent: "space-between",
+            alignItems: "center",
+            flexWrap: (isMobile ? "wrap" : "nowrap"),
+            gap: isMobile ? 8 : 0,
+        },
+        title: {
+            margin: 0,
+            fontSize: isMobile
+                ? theme.typography.fontSizeLg
+                : theme.typography.fontSizeXl,
+            fontWeight: theme.typography.fontWeightSemibold,
+            color: theme.colors.textOnPrimary,
+        },
+        stepIndicator: {
+            fontSize: isMobile
+                ? theme.typography.fontSizeXs
+                : theme.typography.fontSizeSm,
+            color: theme.colors.textOnPrimary,
+            opacity: 0.9,
+            margin: 0,
+            fontWeight: 500,
+        },
+        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/Icons/CloseIcon.d.ts

@@ -0,0 +1,9 @@
+import React from "react";
+interface CloseIconProps {
+    size?: number;
+    color?: string;
+    className?: string;
+    style?: React.CSSProperties;
+}
+export declare const CloseIcon: React.FC<CloseIconProps>;
+export default CloseIcon;

package/dist/components/Icons/CloseIcon.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+export const CloseIcon = ({ size = 12, color = "black", className, style, }) => {
+    return (_jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: size, height: size, viewBox: "0 0 12 12", fill: "none", className: className, style: style, children: _jsx("path", { d: "M0.878125 11.0896L0 10.2115L4.66667 5.54479L0 0.878126L0.878125 0L5.54479 4.66667L10.2115 0L11.0896 0.878126L6.42292 5.54479L11.0896 10.2115L10.2115 11.0896L5.54479 6.42292L0.878125 11.0896Z", fill: color }) }));
+};
+export default CloseIcon;

package/dist/components/InquiryDetailsStep.js

@@ -1,15 +1,20 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from "react";
 import { useTheme } from "../react/hooks/useTheme";
 import { getContainerStyles, getPhoneVerifyStyles, getButtonStyles, } from "./theme-styles";
-export const InquiryDetailsStep = ({ inquirySubject, inquiryMessage, onSubjectChange, onMessageChange, onBack, onNext, }) => {
+export const InquiryDetailsStep = React.memo(({ inquirySubject, inquiryMessage, onSubjectChange, onMessageChange, onBack, onNext, }) => {
     const theme = useTheme();
-    const PHONE_VERIFY_STYLES = getPhoneVerifyStyles(theme);
-    const BUTTON_STYLES = getButtonStyles(theme);
-    const CONTAINER_STYLES = getContainerStyles(theme);
-    return (_jsxs("div", { children: [_jsxs("div", { style: { marginBottom: "16px" }, children: [_jsx("label", { style: PHONE_VERIFY_STYLES.label, children: "Subject" }), _jsx("input", { type: "text", value: inquirySubject, onChange: (e) => onSubjectChange(e.target.value), placeholder: "Enter inquiry subject", style: PHONE_VERIFY_STYLES.phoneInput })] }), _jsxs("div", { style: { marginBottom: "16px" }, children: [_jsxs("label", { style: PHONE_VERIFY_STYLES.label, children: ["Message (", inquiryMessage.length, "/1000)"] }), _jsx("textarea", { value: inquiryMessage, onChange: (e) => onMessageChange(e.target.value), placeholder: "Enter your inquiry message", rows: 5, style: {
+    const PHONE_VERIFY_STYLES = React.useMemo(() => getPhoneVerifyStyles(theme), [theme]);
+    const BUTTON_STYLES = React.useMemo(() => getButtonStyles(theme), [theme]);
+    const CONTAINER_STYLES = React.useMemo(() => getContainerStyles(theme), [theme]);
+    const styles = getStyles(theme);
+    return (_jsxs("div", { children: [_jsxs("div", { style: { marginBottom: "16px" }, children: [_jsxs("label", { style: PHONE_VERIFY_STYLES.label, children: ["Subject", _jsx("span", { style: styles.mandatory, children: "*" })] }), _jsx("input", { type: "text", value: inquirySubject, onChange: (e) => onSubjectChange(e.target.value), placeholder: "Enter inquiry subject", style: PHONE_VERIFY_STYLES.phoneInput })] }), _jsxs("div", { style: { marginBottom: "16px" }, children: [_jsxs("label", { style: PHONE_VERIFY_STYLES.label, children: ["Message", _jsx("span", { style: styles.mandatory, children: "*" })] }), _jsx("textarea", { value: inquiryMessage, onChange: (e) => onMessageChange(e.target.value), placeholder: "Enter your inquiry message", rows: 5, style: {
                             ...PHONE_VERIFY_STYLES.otpInput,
                             minHeight: "120px",
                             resize: "vertical",
                             fontFamily: "inherit",
                         } })] }), _jsxs("div", { style: CONTAINER_STYLES.actions, children: [_jsx("button", { onClick: onBack, style: BUTTON_STYLES.secondary, children: "Back" }), _jsx("button", { onClick: onNext, style: BUTTON_STYLES.primary, children: "Next" })] })] }));
-};
+});
+const getStyles = (theme) => ({
+    mandatory: { color: theme.colors.error, marginLeft: 4 },
+});

package/dist/components/PatientDetailsStep.js

@@ -1,33 +1,37 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { GENDER_OPTIONS, BLOOD_GROUP_OPTIONS, } from "./types";
 import { useTheme } from "../react/hooks/useTheme";
+import { useBreakpoint } from "../core/theme/responsive";
 import { getButtonStyles, getPatientDetailsStyles, getContainerStyles, } from "./theme-styles";
 import { UserIcon } from "./Icons/UserIcon";
 import { MapPinIcon } from "./Icons/MapIcon";
 import { Select, SelectTrigger, SelectValue, SelectContent, SelectItem, } from "./uiComponents/SelectDropdown";
-export const PatientDetailsStep = ({ state, dispatch, onBack, onSubmit, }) => {
+export const PatientDetailsStep = ({ state, dispatch, onBack, onSubmit, isFirstStep = false, }) => {
     const theme = useTheme();
-    const CONTAINER_STYLES = getContainerStyles(theme);
-    const BUTTON_STYLES = getButtonStyles(theme);
+    const breakpoint = useBreakpoint(theme);
+    const CONTAINER_STYLES = getContainerStyles(theme, "medos", breakpoint);
+    const BUTTON_STYLES = getButtonStyles(theme, "medos", breakpoint);
     const isFormValid = state.patientName &&
         state.patientAge &&
-        state.patientEmail &&
         state.patientGender &&
-        state.bloodGroup &&
         state.patientAddress &&
         state.patientCity &&
         state.patientState &&
         state.patientCountry &&
         state.patientZipcode &&
         state.otpVerified;
-    return (_jsxs("div", { style: CONTAINER_STYLES.section, children: [_jsx(PatientInfoSection, { state: state, dispatch: dispatch }), _jsx(AddressInfoSection, { state: state, dispatch: dispatch }), _jsxs("div", { style: CONTAINER_STYLES.actions, children: [_jsx("button", { style: BUTTON_STYLES.secondary, onClick: onBack, children: "Back" }), _jsx("button", { style: {
+    return (_jsxs("div", { style: CONTAINER_STYLES.section, children: [_jsx(PatientInfoSection, { state: state, dispatch: dispatch }), _jsx(AddressInfoSection, { state: state, dispatch: dispatch }), _jsxs("div", { style: {
+                    ...CONTAINER_STYLES.actions,
+                    justifyContent: isFirstStep ? "flex-end" : "space-between",
+                }, children: [!isFirstStep && (_jsx("button", { style: BUTTON_STYLES.secondary, onClick: onBack, children: "Back" })), _jsx("button", { style: {
                             ...BUTTON_STYLES.primary,
                             opacity: isFormValid ? 1 : 0.6,
                         }, disabled: !isFormValid || state.loading, onClick: onSubmit, children: state.loading ? "Booking..." : "Continue" })] })] }));
 };
 const PatientInfoSection = ({ state, dispatch }) => {
     const theme = useTheme();
-    const PATIENT_DETAILS_STYLES = getPatientDetailsStyles(theme);
+    const breakpoint = useBreakpoint(theme);
+    const PATIENT_DETAILS_STYLES = getPatientDetailsStyles(theme, "medos", breakpoint);
     const firstName = state.patientName.split(" ")[0] || "";
     const lastName = state.patientName.split(" ").slice(1).join(" ") || "";
     return (_jsxs("div", { style: PATIENT_DETAILS_STYLES.sectionCard, children: [_jsxs("div", { style: PATIENT_DETAILS_STYLES.sectionHeader, children: [_jsx(UserIcon, {}), _jsx("h3", { style: PATIENT_DETAILS_STYLES.sectionTitle, children: "Patient Information" })] }), _jsxs("div", { style: PATIENT_DETAILS_STYLES.sectionBody, children: [_jsxs("div", { style: PATIENT_DETAILS_STYLES.gridRow, children: [_jsxs("div", { children: [_jsxs("label", { style: PATIENT_DETAILS_STYLES.label, children: ["First Name ", _jsx("span", { style: { color: "#EF4444" }, children: "*" })] }), _jsx("input", { style: PATIENT_DETAILS_STYLES.input, placeholder: "Jane", value: firstName, onChange: (e) => {
@@ -40,7 +44,7 @@ const PatientInfoSection = ({ state, dispatch }) => {
                                                 type: "SET_PATIENT_NAME",
                                                 payload: `${firstName} ${e.target.value}`,
                                             });
-                                        } })] })] }), _jsxs("div", { style: PATIENT_DETAILS_STYLES.gridRow, children: [_jsxs("div", { children: [_jsx("label", { style: PATIENT_DETAILS_STYLES.label, children: "Age" }), _jsx("input", { style: PATIENT_DETAILS_STYLES.input, type: "number", placeholder: "25", value: state.patientAge || "", min: "0", max: "120", onChange: (e) => {
+                                        } })] })] }), _jsxs("div", { style: PATIENT_DETAILS_STYLES.gridRow, children: [_jsxs("div", { children: [_jsxs("label", { style: PATIENT_DETAILS_STYLES.label, children: ["Age ", _jsx("span", { style: { color: "#EF4444" }, children: "*" })] }), _jsx("input", { style: PATIENT_DETAILS_STYLES.input, type: "number", placeholder: "25", value: state.patientAge || "", min: "0", max: "120", onChange: (e) => {
                                             const val = e.target.value;
                                             if (val === "") {
                                                 dispatch({
@@ -56,20 +60,21 @@ const PatientInfoSection = ({ state, dispatch }) => {
                                                     payload: val,
                                                 });
                                             }
-                                        } })] }), _jsxs("div", { children: [_jsxs("label", { style: PATIENT_DETAILS_STYLES.label, children: ["Email ", _jsx("span", { style: { color: "#EF4444" }, children: "*" })] }), _jsx("input", { style: PATIENT_DETAILS_STYLES.input, type: "email", placeholder: "jane@example.com", value: state.patientEmail, onChange: (e) => dispatch({
+                                        } })] }), _jsxs("div", { children: [_jsx("label", { style: PATIENT_DETAILS_STYLES.label, children: "Email" }), _jsx("input", { style: PATIENT_DETAILS_STYLES.input, type: "email", placeholder: "jane@example.com (optional)", value: state.patientEmail, onChange: (e) => dispatch({
                                             type: "SET_PATIENT_EMAIL",
                                             payload: e.target.value,
                                         }) })] })] }), _jsxs("div", { style: PATIENT_DETAILS_STYLES.gridRow, children: [_jsxs("div", { children: [_jsxs("label", { style: PATIENT_DETAILS_STYLES.label, children: ["Gender ", _jsx("span", { style: { color: "#EF4444" }, children: "*" })] }), _jsxs(Select, { value: state.patientGender, onValueChange: (value) => dispatch({
                                             type: "SET_PATIENT_GENDER",
                                             payload: value,
-                                        }), children: [_jsx(SelectTrigger, { children: _jsx(SelectValue, { placeholder: "Select gender" }) }), _jsx(SelectContent, { children: GENDER_OPTIONS.map((option) => (_jsx(SelectItem, { value: option.value, children: option.label }, option.value))) })] })] }), _jsxs("div", { children: [_jsxs("label", { style: PATIENT_DETAILS_STYLES.label, children: ["Blood Group ", _jsx("span", { style: { color: "#EF4444" }, children: "*" })] }), _jsxs(Select, { value: state.bloodGroup, onValueChange: (value) => dispatch({
+                                        }), children: [_jsx(SelectTrigger, { children: _jsx(SelectValue, { placeholder: "Select gender" }) }), _jsx(SelectContent, { children: GENDER_OPTIONS.map((option) => (_jsx(SelectItem, { value: option.value, children: option.label }, option.value))) })] })] }), _jsxs("div", { children: [_jsx("label", { style: PATIENT_DETAILS_STYLES.label, children: "Blood Group" }), _jsxs(Select, { value: state.bloodGroup, onValueChange: (value) => dispatch({
                                             type: "SET_BLOOD_GROUP",
                                             payload: value,
-                                        }), children: [_jsx(SelectTrigger, { children: _jsx(SelectValue, { placeholder: "Select blood group" }) }), _jsx(SelectContent, { children: BLOOD_GROUP_OPTIONS.map((option) => (_jsx(SelectItem, { value: option.value, children: option.label }, option.value))) })] })] })] })] })] }));
+                                        }), children: [_jsx(SelectTrigger, { children: _jsx(SelectValue, { placeholder: "Select blood group (optional)" }) }), _jsx(SelectContent, { children: BLOOD_GROUP_OPTIONS.map((option) => (_jsx(SelectItem, { value: option.value, children: option.label }, option.value))) })] })] })] })] })] }));
 };
 const AddressInfoSection = ({ state, dispatch }) => {
     const theme = useTheme();
-    const PATIENT_DETAILS_STYLES = getPatientDetailsStyles(theme);
+    const breakpoint = useBreakpoint(theme);
+    const PATIENT_DETAILS_STYLES = getPatientDetailsStyles(theme, "medos", breakpoint);
     return (_jsxs("div", { style: PATIENT_DETAILS_STYLES.sectionCard, children: [_jsxs("div", { style: PATIENT_DETAILS_STYLES.sectionHeader, children: [_jsx(MapPinIcon, {}), _jsx("h3", { style: PATIENT_DETAILS_STYLES.sectionTitle, children: "Address Information" })] }), _jsxs("div", { style: PATIENT_DETAILS_STYLES.sectionBody, children: [_jsxs("div", { style: { marginBottom: 20 }, children: [_jsxs("label", { style: PATIENT_DETAILS_STYLES.label, children: ["Address ", _jsx("span", { style: { color: "#EF4444" }, children: "*" })] }), _jsx("input", { style: PATIENT_DETAILS_STYLES.input, placeholder: "123 Main Street", value: state.patientAddress, onChange: (e) => dispatch({
                                     type: "SET_PATIENT_ADDRESS",
                                     payload: e.target.value,

package/dist/components/PatientSelectionStep.d.ts

@@ -0,0 +1,12 @@
+import React from "react";
+import { Patient } from "./appointment-booking/types";
+interface PatientSelectionStepProps {
+    verifiedPatients: Patient[];
+    selectedPatient: Patient | null;
+    onSelectPatient: (patient: Patient) => void;
+    onProceedAsNewPatient: () => void;
+    onBack: () => void;
+    isFirstStep?: boolean;
+}
+export declare const PatientSelectionStep: React.FC<PatientSelectionStepProps>;
+export {};