medos-sdk 1.1.10 → 1.1.12

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

@@ -0,0 +1,96 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { GENDER_OPTIONS, BLOOD_GROUP_OPTIONS } from "../../constants/options";
+import { useTheme } from "../../../react/hooks/useTheme";
+import { useBreakpoint } from "../../../core/theme/responsive";
+import { getButtonStyles, getPatientDetailsStyles, getContainerStyles, } from "../../theme-styles";
+import { UserIcon, MapPinIcon } from "../../shared/icons";
+import { Select, SelectTrigger, SelectValue, SelectContent, SelectItem, } from "../../shared/ui/SelectDropdown";
+export const PatientDetailsStep = ({ state, dispatch, onBack, onSubmit, isFirstStep = false, }) => {
+    const theme = useTheme();
+    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.patientGender &&
+        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,
+                    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 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) => {
+                                            dispatch({
+                                                type: "SET_PATIENT_NAME",
+                                                payload: `${e.target.value} ${lastName}`,
+                                            });
+                                        } })] }), _jsxs("div", { children: [_jsxs("label", { style: PATIENT_DETAILS_STYLES.label, children: ["Last Name ", _jsx("span", { style: { color: "#EF4444" }, children: "*" })] }), _jsx("input", { style: PATIENT_DETAILS_STYLES.input, placeholder: "Doe", value: lastName, onChange: (e) => {
+                                            dispatch({
+                                                type: "SET_PATIENT_NAME",
+                                                payload: `${firstName} ${e.target.value}`,
+                                            });
+                                        } })] })] }), _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({
+                                                    type: "SET_PATIENT_AGE",
+                                                    payload: "",
+                                                });
+                                                return;
+                                            }
+                                            const age = parseInt(val);
+                                            if (!isNaN(age) && age >= 0 && age <= 120) {
+                                                dispatch({
+                                                    type: "SET_PATIENT_AGE",
+                                                    payload: val,
+                                                });
+                                            }
+                                        } })] }), _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: [_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 (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 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,
+                                }) })] }), _jsxs("div", { style: PATIENT_DETAILS_STYLES.gridRow, children: [_jsxs("div", { children: [_jsxs("label", { style: PATIENT_DETAILS_STYLES.label, children: ["City ", _jsx("span", { style: { color: "#EF4444" }, children: "*" })] }), _jsx("input", { style: PATIENT_DETAILS_STYLES.input, placeholder: "New York", value: state.patientCity, onChange: (e) => dispatch({
+                                            type: "SET_PATIENT_CITY",
+                                            payload: e.target.value,
+                                        }) })] }), _jsxs("div", { children: [_jsxs("label", { style: PATIENT_DETAILS_STYLES.label, children: ["State ", _jsx("span", { style: { color: "#EF4444" }, children: "*" })] }), _jsx("input", { style: PATIENT_DETAILS_STYLES.input, placeholder: "NY", value: state.patientState, onChange: (e) => dispatch({
+                                            type: "SET_PATIENT_STATE",
+                                            payload: e.target.value,
+                                        }) })] })] }), _jsxs("div", { style: PATIENT_DETAILS_STYLES.gridRow, children: [_jsxs("div", { children: [_jsxs("label", { style: PATIENT_DETAILS_STYLES.label, children: ["Country ", _jsx("span", { style: { color: "#EF4444" }, children: "*" })] }), _jsx("input", { style: PATIENT_DETAILS_STYLES.input, placeholder: "United States", value: state.patientCountry, onChange: (e) => dispatch({
+                                            type: "SET_PATIENT_COUNTRY",
+                                            payload: e.target.value,
+                                        }) })] }), _jsxs("div", { children: [_jsxs("label", { style: PATIENT_DETAILS_STYLES.label, children: ["Zipcode ", _jsx("span", { style: { color: "#EF4444" }, children: "*" })] }), _jsx("input", { style: PATIENT_DETAILS_STYLES.input, placeholder: "10001", value: state.patientZipcode, onChange: (e) => dispatch({
+                                            type: "SET_PATIENT_ZIPCODE",
+                                            payload: e.target.value,
+                                        }) })] })] }), _jsxs("div", { style: { marginTop: 20 }, children: [_jsx("label", { style: PATIENT_DETAILS_STYLES.label, children: "Landmark" }), _jsx("input", { style: PATIENT_DETAILS_STYLES.input, placeholder: "Near Central Park", value: state.patientLandmark, onChange: (e) => dispatch({
+                                    type: "SET_PATIENT_LANDMARK",
+                                    payload: e.target.value,
+                                }) })] })] })] }));
+};

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

@@ -0,0 +1,12 @@
+import React from "react";
+import { Patient } from "../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 {};

package/dist/components/appointment-booking/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/appointment-booking/components/PhoneVerificationStep.d.ts

@@ -0,0 +1,3 @@
+import React from "react";
+import { PhoneVerificationStepProps } from "../../types/appointment";
+export declare const PhoneVerificationStep: React.FC<PhoneVerificationStepProps>;

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

@@ -0,0 +1,49 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { COUNTRY_CODES } from "../../constants/options";
+import { useTheme } from "../../../react/hooks/useTheme";
+import { getButtonStyles, getPhoneVerifyStyles } from "../../theme-styles";
+import { validatePhoneNumber, validateCountryCode, } from "../../utils/validation";
+import { Select, SelectTrigger, SelectValue, SelectContent, SelectItem, } from "../../shared/ui/SelectDropdown";
+export const PhoneVerificationStep = ({ state, dispatch, onSendOtp, onVerifyOtp, onBack, onContinue, }) => {
+    const theme = useTheme();
+    const PHONE_VERIFY_STYLES = getPhoneVerifyStyles(theme);
+    const BUTTON_STYLES = getButtonStyles(theme);
+    const isPhoneValid = validatePhoneNumber(state.patientPhone) &&
+        validateCountryCode(state.countryCode);
+    return (_jsxs("div", { style: PHONE_VERIFY_STYLES.container, children: [_jsx("div", { style: PHONE_VERIFY_STYLES.header, children: _jsx("h3", { style: PHONE_VERIFY_STYLES.title, children: "Verify Details" }) }), _jsx("div", { style: PHONE_VERIFY_STYLES.content, children: !state.otpSent ? (_jsx(PhoneInputSection, { countryCode: state.countryCode, patientPhone: state.patientPhone, onCountryCodeChange: (code) => {
+                        dispatch({ type: "SET_COUNTRY_CODE", payload: code });
+                    }, onPhoneChange: (phone) => dispatch({ type: "SET_PATIENT_PHONE", payload: phone }) })) : (_jsx(OtpInputSection, { countryCode: state.countryCode, patientPhone: state.patientPhone, otpCode: state.otpCode, otpVerified: state.otpVerified, onOtpChange: (code) => dispatch({ type: "SET_OTP_CODE", payload: code }) })) }), _jsx("div", { style: PHONE_VERIFY_STYLES.footer, children: !state.otpSent ? (_jsxs(_Fragment, { children: [_jsx("button", { style: BUTTON_STYLES.secondary, onClick: onBack, children: "Back" }), _jsx("button", { style: {
+                                ...BUTTON_STYLES.primary,
+                                opacity: isPhoneValid ? 1 : 0.6,
+                            }, disabled: !isPhoneValid || state.otpSending, onClick: onSendOtp, children: state.otpSending ? "Sending..." : "Continue" })] })) : !state.otpVerified ? (_jsxs(_Fragment, { children: [_jsx("button", { style: BUTTON_STYLES.secondary, onClick: () => {
+                                dispatch({ type: "SET_OTP_SENT", payload: false });
+                                dispatch({ type: "SET_OTP_CODE", payload: "" });
+                            }, 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" })] })) })] }));
+};
+const PhoneInputSection = ({ countryCode, patientPhone, onCountryCodeChange, onPhoneChange }) => {
+    const theme = useTheme();
+    const PHONE_VERIFY_STYLES = getPhoneVerifyStyles(theme);
+    const selectedCountry = COUNTRY_CODES.find((c) => c.code === countryCode);
+    return (_jsx(_Fragment, { children: _jsxs("div", { style: { marginBottom: 20 }, children: [_jsx("label", { style: PHONE_VERIFY_STYLES.label, children: "Enter Phone Number" }), _jsxs("div", { style: PHONE_VERIFY_STYLES.phoneInputContainer, children: [_jsx("div", { style: { width: 120 }, children: _jsxs(Select, { value: countryCode, onValueChange: onCountryCodeChange, children: [_jsx(SelectTrigger, { children: _jsx(SelectValue, { placeholder: selectedCountry?.label || "Code" }) }), _jsx(SelectContent, { children: COUNTRY_CODES.map((item) => (_jsx(SelectItem, { value: item.code, children: item.label }, item.code))) })] }) }), _jsx("input", { type: "tel", style: PHONE_VERIFY_STYLES.phoneInput, placeholder: "0000 000 000", value: patientPhone, onChange: (e) => {
+                                const value = e.target.value.replace(/\D/g, "");
+                                onPhoneChange(value);
+                            }, maxLength: 15 })] })] }) }));
+};
+const OtpInputSection = ({ countryCode, patientPhone, otpCode, otpVerified, onOtpChange }) => {
+    const theme = useTheme();
+    const PHONE_VERIFY_STYLES = getPhoneVerifyStyles(theme);
+    return (_jsxs(_Fragment, { children: [_jsxs("div", { style: { marginBottom: 16 }, children: [_jsx("label", { style: PHONE_VERIFY_STYLES.label, children: "Phone Number" }), _jsxs("div", { style: PHONE_VERIFY_STYLES.phoneDisplay, children: [countryCode, " ", patientPhone] })] }), _jsxs("div", { style: { marginBottom: 20 }, children: [_jsx("label", { style: PHONE_VERIFY_STYLES.label, children: "Enter OTP" }), _jsx("input", { style: {
+                            ...PHONE_VERIFY_STYLES.otpInput,
+                            ...(otpVerified ? { opacity: 0.6, pointerEvents: "none" } : {}),
+                        }, type: "text", placeholder: "Enter 6-digit OTP", value: otpCode, onChange: (e) => {
+                            if (!otpVerified) {
+                                const value = e.target.value.replace(/\D/g, "");
+                                if (value.length <= 6) {
+                                    onOtpChange(value);
+                                }
+                            }
+                        }, maxLength: 6, disabled: otpVerified }), _jsx("div", { style: PHONE_VERIFY_STYLES.otpHint, children: "We've sent a 6-digit code to your phone number" })] }), otpVerified && (_jsxs("div", { style: PHONE_VERIFY_STYLES.successMessage, children: [_jsx("div", { style: PHONE_VERIFY_STYLES.successIcon, children: "\u2713" }), _jsxs("div", { children: [_jsx("div", { style: PHONE_VERIFY_STYLES.successTitle, children: "Phone verified successfully" }), _jsx("div", { style: PHONE_VERIFY_STYLES.successSubtitle, children: "Your phone number has been verified" })] })] }))] }));
+};

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

@@ -0,0 +1,5 @@
+import React from "react";
+export interface SuccessStepProps {
+    onReset: () => void;
+}
+export declare const SuccessStep: React.FC<SuccessStepProps>;

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

@@ -0,0 +1,9 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useTheme } from "../../../react/hooks/useTheme";
+import { getSuccessStyles, getButtonStyles } from "../../theme-styles";
+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("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/components/index.d.ts

@@ -0,0 +1,9 @@
+export { PhoneVerificationStep } from "./PhoneVerificationStep";
+export { PatientDetailsStep } from "./PatientDetailsStep";
+export { SuccessStep } from "./SuccessStep";
+export { AppointmentDateTimeModal } from "./AppointmentDateTimeModal";
+export { DoctorSelectModal } from "./DoctorSelectModal";
+export { default as AppointmentConfirmationStep } from "./AppointmentConfirmationStep";
+export { AppointmentSummaryStep } from "./AppointmentSummaryStep";
+export { BookingOptionStep } from "./BookingOptionStep";
+export { PatientSelectionStep } from "./PatientSelectionStep";

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

@@ -0,0 +1,9 @@
+export { PhoneVerificationStep } from "./PhoneVerificationStep";
+export { PatientDetailsStep } from "./PatientDetailsStep";
+export { SuccessStep } from "./SuccessStep";
+export { AppointmentDateTimeModal } from "./AppointmentDateTimeModal";
+export { DoctorSelectModal } from "./DoctorSelectModal";
+export { default as AppointmentConfirmationStep } from "./AppointmentConfirmationStep";
+export { AppointmentSummaryStep } from "./AppointmentSummaryStep";
+export { BookingOptionStep } from "./BookingOptionStep";
+export { PatientSelectionStep } from "./PatientSelectionStep";

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

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