medos-sdk 1.0.2 → 1.1.0

package/dist/components/AppointmentCalender.js

@@ -1,614 +1,407 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { useEffect, useState } from "react";
-import { AppointmentService, } from "../services/AppointmentService";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useCallback, useReducer } from "react";
+import { AppointmentService } from "../services/AppointmentService";
 import { PatientService } from "../services/PatientService";
+import { AppointmentDateTimeModal } from "./AppointmentDateTimeModal";
+import { DoctorSelectModal } from "./DoctorSelectModal";
+import { PhoneVerificationStep } from "./PhoneVerificationStep";
+import { PatientDetailsStep } from "./PatientDetailsStep";
+import { SuccessStep } from "./SuccessStep";
+import { INITIAL_STATE, } from "./types";
+import { validatePhoneNumber, validateCountryCode } from "./validation";
+import { formatDateToISO, parsePatientName } from "./utils";
+import { useTheme } from "../react/hooks/useTheme";
+const appointmentReducer = (state, action) => {
+    switch (action.type) {
+        case "SET_STEP":
+            return { ...state, step: action.payload };
+        case "SET_LOADING":
+            return { ...state, loading: action.payload };
+        case "SET_ERROR":
+            return { ...state, error: action.payload };
+        case "SET_WORKSPACE": {
+            const doctorMap = {};
+            action.payload.addresses.forEach((addr) => {
+                doctorMap[addr.id] = addr.doctors || [];
+            });
+            return {
+                ...state,
+                workspaceId: action.payload.id,
+                addresses: action.payload.addresses,
+                addressDoctorsMap: doctorMap,
+            };
+        }
+        case "SET_SELECTED_ADDRESS":
+            return { ...state, selectedAddress: action.payload };
+        case "SET_SELECTED_DOCTOR":
+            return { ...state, selectedDoctor: action.payload };
+        case "SET_SELECTED_DATE":
+            return { ...state, selectedDate: action.payload, selectedSlot: null };
+        case "SET_SLOTS":
+            return { ...state, slots: action.payload };
+        case "SET_SELECTED_SLOT":
+            return { ...state, selectedSlot: action.payload };
+        case "SET_CONSULTATION_MODE":
+            return { ...state, consultationMode: action.payload };
+        case "SET_CONSULTATION_CHARGE":
+            return { ...state, consultationCharge: action.payload };
+        case "SET_PATIENT_NAME":
+            return { ...state, patientName: action.payload };
+        case "SET_PATIENT_AGE":
+            return { ...state, patientAge: action.payload };
+        case "SET_PATIENT_EMAIL":
+            return { ...state, patientEmail: action.payload };
+        case "SET_PATIENT_GENDER":
+            return { ...state, patientGender: action.payload };
+        case "SET_BLOOD_GROUP":
+            return { ...state, bloodGroup: action.payload };
+        case "SET_PATIENT_ADDRESS":
+            return { ...state, patientAddress: action.payload };
+        case "SET_PATIENT_CITY":
+            return { ...state, patientCity: action.payload };
+        case "SET_PATIENT_STATE":
+            return { ...state, patientState: action.payload };
+        case "SET_PATIENT_COUNTRY":
+            return { ...state, patientCountry: action.payload };
+        case "SET_PATIENT_ZIPCODE":
+            return { ...state, patientZipcode: action.payload };
+        case "SET_PATIENT_LANDMARK":
+            return { ...state, patientLandmark: action.payload };
+        case "SET_COUNTRY_CODE":
+            return { ...state, countryCode: action.payload };
+        case "SET_PATIENT_PHONE":
+            return { ...state, patientPhone: action.payload };
+        case "SET_OTP_CODE":
+            return { ...state, otpCode: action.payload };
+        case "SET_OTP_SENT":
+            return { ...state, otpSent: action.payload };
+        case "SET_OTP_VERIFIED":
+            return { ...state, otpVerified: action.payload };
+        case "SET_OTP_SENDING":
+            return { ...state, otpSending: action.payload };
+        case "SET_OTP_VERIFYING":
+            return { ...state, otpVerifying: action.payload };
+        case "RESET_FORM":
+            return INITIAL_STATE;
+        default:
+            return state;
+    }
+};
 export const AppointmentCalender = ({ onError, }) => {
-    const [step, setStep] = useState(0);
-    const [addresses, setAddresses] = useState([]);
-    const [addressDoctorsMap, setAddressDoctorsMap] = useState({});
-    const [selectedAddress, setSelectedAddress] = useState(null);
-    const [workspaceId, setWorkspaceId] = useState(null);
-    const [doctors, setDoctors] = useState([]);
-    const [selectedDoctor, setSelectedDoctor] = useState(null);
-    const [date, setDate] = useState("");
-    const [slots, setSlots] = useState([]);
-    const [selectedSlot, setSelectedSlot] = useState(null);
-    const [loading, setLoading] = useState(false);
-    const [error, setError] = useState(null);
-    const [patientName, setPatientName] = useState("");
-    const [patientAge, setPatientAge] = useState("");
-    const [patientAddress, setPatientAddress] = useState("");
-    const [patientCity, setPatientCity] = useState("");
-    const [patientState, setPatientState] = useState("");
-    const [patientCountry, setPatientCountry] = useState("");
-    const [patientZipcode, setPatientZipcode] = useState("");
-    const [patientLandmark, setPatientLandmark] = useState("");
-    const [patientEmail, setPatientEmail] = useState("");
-    const [patientGender, setPatientGender] = useState("");
-    const [problemFacing, setProblemFacing] = useState("");
-    const [consultationCharge, setConsultationCharge] = useState("");
-    const [countryCode, setCountryCode] = useState("+91");
-    const [patientPhone, setPatientPhone] = useState("");
-    const [otpCode, setOtpCode] = useState("");
-    const [otpSent, setOtpSent] = useState(false);
-    const [otpVerified, setOtpVerified] = useState(false);
-    const [otpSending, setOtpSending] = useState(false);
-    const [otpVerifying, setOtpVerifying] = useState(false);
-    useEffect(() => {
+    const [state, dispatch] = useReducer(appointmentReducer, INITIAL_STATE);
+    const handleDateChange = useCallback(async (date) => {
+        dispatch({ type: "SET_SELECTED_DATE", payload: date });
+        if (!state.workspaceId ||
+            !state.selectedAddress ||
+            !state.selectedDoctor) {
+            dispatch({ type: "SET_SLOTS", payload: [] });
+            return;
+        }
         let mounted = true;
-        (async () => {
-            setLoading(true);
-            setError(null);
-            try {
-                let fetchedAddresses = [];
-                try {
-                    const addrResp = await AppointmentService.getAddresses();
-                    if (addrResp && Array.isArray(addrResp.addresses)) {
-                        fetchedAddresses = addrResp.addresses;
-                        if (addrResp.workspaceId && mounted) {
-                            setWorkspaceId(addrResp.workspaceId);
-                        }
-                    }
-                }
-                catch (e) {
-                    if (!mounted)
-                        return;
-                    throw e;
-                }
-                if (mounted && fetchedAddresses.length > 0) {
-                    const addrMap = {};
-                    const mappedAddrs = fetchedAddresses.map((a, idx) => {
-                        const id = String(a.id ?? idx);
-                        const label = a.completeAddress ?? a.label ?? a.address ?? `Address ${idx + 1}`;
-                        const docs = Array.isArray(a.doctors)
-                            ? a.doctors
-                            : [];
-                        addrMap[id] = docs || [];
-                        return { id, label };
-                    });
-                    setAddresses(mappedAddrs);
-                    setAddressDoctorsMap(addrMap);
-                    const anyDoctorsExist = Object.values(addrMap).some((arr) => Array.isArray(arr) && arr.length > 0);
-                    if (mappedAddrs.length === 1) {
-                        const only = mappedAddrs[0];
-                        setSelectedAddress(only.id);
-                        const docsForAddr = addrMap[only.id] || [];
-                        if (docsForAddr.length > 0) {
-                            setDoctors(docsForAddr);
-                            if (docsForAddr.length === 1) {
-                                setSelectedDoctor(docsForAddr[0].id);
-                                setStep(1);
-                            }
-                            else {
-                                setStep(0);
-                            }
-                        }
-                        else {
-                            if (anyDoctorsExist) {
-                                setError("No doctors at this address. Please choose a different address.");
-                                setDoctors([]);
-                                setStep(0);
-                            }
-                            else {
-                                setError("No doctors available for the selected location(s).");
-                                setDoctors([]);
-                                setStep(0);
-                            }
-                        }
-                    }
-                    else {
-                        setStep(0);
-                    }
-                    setLoading(false);
-                    return;
-                }
-                if (mounted) {
-                    setError("No addresses or doctors available.");
-                    setAddresses([]);
-                    setAddressDoctorsMap({});
-                    setDoctors([]);
-                    setStep(0);
-                }
+        dispatch({ type: "SET_LOADING", payload: true });
+        dispatch({ type: "SET_ERROR", payload: null });
+        try {
+            const dateStr = formatDateToISO(date);
+            const fetchedSlots = await AppointmentService.fetchSlots(state.workspaceId, state.selectedAddress, state.selectedDoctor, dateStr);
+            if (mounted) {
+                dispatch({ type: "SET_SLOTS", payload: fetchedSlots || [] });
             }
-            catch (e) {
-                if (!mounted)
-                    return;
-                const msg = e.message || "Failed to load addresses";
-                setError(msg);
+        }
+        catch (e) {
+            if (mounted) {
+                const msg = e.message || "Failed to load slots";
+                dispatch({ type: "SET_ERROR", payload: msg });
                 onError?.(e);
             }
-            finally {
-                if (mounted)
-                    setLoading(false);
-            }
-        })();
+        }
+        finally {
+            if (mounted)
+                dispatch({ type: "SET_LOADING", payload: false });
+        }
         return () => {
             mounted = false;
         };
-    }, []);
+    }, [state.workspaceId, state.selectedAddress, state.selectedDoctor, onError]);
     useEffect(() => {
         let mounted = true;
         (async () => {
-            if (!selectedAddress) {
-                setDoctors([]);
-                setSelectedDoctor(null);
-                return;
-            }
-            setLoading(true);
-            setError(null);
+            dispatch({ type: "SET_LOADING", payload: true });
+            dispatch({ type: "SET_ERROR", payload: null });
             try {
-                const docsForAddr = addressDoctorsMap[selectedAddress] ?? [];
-                if (docsForAddr.length > 0) {
-                    if (mounted) {
-                        setDoctors(docsForAddr);
-                        if (docsForAddr.length === 1) {
-                            setSelectedDoctor(docsForAddr[0].id);
-                            setStep(1);
-                        }
-                        else {
-                            setSelectedDoctor(null);
+                const response = await AppointmentService.getAddresses();
+                if (!mounted)
+                    return;
+                if (response.workspaceId && response.addresses?.length > 0) {
+                    dispatch({
+                        type: "SET_WORKSPACE",
+                        payload: {
+                            id: response.workspaceId,
+                            addresses: response.addresses,
+                        },
+                    });
+                    if (response.addresses.length === 1) {
+                        const address = response.addresses[0];
+                        dispatch({ type: "SET_SELECTED_ADDRESS", payload: address.id });
+                        if (address.doctors?.length === 1) {
+                            dispatch({
+                                type: "SET_SELECTED_DOCTOR",
+                                payload: address.doctors[0].id,
+                            });
+                            dispatch({ type: "SET_STEP", payload: 1 });
                         }
                     }
                 }
                 else {
-                    const otherHasDoctors = Object.entries(addressDoctorsMap).some(([key, docs]) => key !== selectedAddress && Array.isArray(docs) && docs.length > 0);
-                    if (mounted) {
-                        setDoctors([]);
-                        setSelectedDoctor(null);
-                        if (otherHasDoctors) {
-                            setError("No doctors at this address. Please select a different address.");
-                        }
-                        else {
-                            setError("No doctors available for the selected location(s).");
-                        }
-                    }
+                    dispatch({
+                        type: "SET_ERROR",
+                        payload: "No addresses or doctors available.",
+                    });
                 }
             }
             catch (e) {
                 if (!mounted)
                     return;
-                setError(e.message || "Failed to load doctors for address");
-            }
-            finally {
-                if (mounted)
-                    setLoading(false);
-            }
-        })();
-        return () => {
-            mounted = false;
-        };
-    }, [selectedAddress, addressDoctorsMap]);
-    useEffect(() => {
-        if (!workspaceId || !selectedAddress || !selectedDoctor || !date) {
-            setSlots([]);
-            setSelectedSlot(null);
-            return;
-        }
-        let mounted = true;
-        setLoading(true);
-        setError(null);
-        (async () => {
-            try {
-                const s = await AppointmentService.fetchSlots(workspaceId, selectedAddress, selectedDoctor, date);
-                if (!mounted)
-                    return;
-                setSlots(s || []);
-            }
-            catch (e) {
-                if (!mounted)
-                    return;
-                setError(e.message || "Failed to load slots");
+                const msg = e.message || "Failed to load addresses";
+                dispatch({ type: "SET_ERROR", payload: msg });
+                onError?.(e);
             }
             finally {
                 if (mounted)
-                    setLoading(false);
+                    dispatch({ type: "SET_LOADING", payload: false });
             }
         })();
         return () => {
             mounted = false;
         };
-    }, [workspaceId, selectedAddress, selectedDoctor, date]);
-    const goToNext = () => {
-        if (step === 0) {
-            if (addresses.length > 1 && !selectedAddress)
-                return;
-            if (doctors.length > 1 && !selectedDoctor)
-                return;
-            setStep(1);
-            return;
+    }, [onError]);
+    const goBack = useCallback(() => {
+        if (state.step === 3) {
+            dispatch({ type: "SET_OTP_SENT", payload: false });
+            dispatch({ type: "SET_OTP_CODE", payload: "" });
+            dispatch({ type: "SET_OTP_VERIFIED", payload: false });
         }
-        setStep((s) => Math.min(5, s + 1));
-    };
-    const goBack = () => {
-        setStep((s) => Math.max(0, s - 1));
-    };
-    const validatePhoneNumber = (phone) => {
-        const cleaned = phone.replace(/\D/g, "");
-        return cleaned.length >= 7 && cleaned.length <= 15;
-    };
-    const validateCountryCode = (code) => {
-        return /^\+[1-9]\d{0,3}$/.test(code);
-    };
-    const canProceedFromMergedStep = (() => {
-        if (addresses.length === 0 || doctors.length === 0)
-            return false;
-        if (addresses.length > 1 && !selectedAddress)
-            return false;
-        if (doctors.length > 1 && !selectedDoctor)
-            return false;
-        return true;
-    })();
-    const sendOtp = async () => {
-        setError(null);
-        if (!countryCode) {
-            setError("Please enter country code.");
+        dispatch({ type: "SET_STEP", payload: Math.max(0, state.step - 1) });
+    }, [state.step]);
+    const goToNext = useCallback(() => {
+        dispatch({ type: "SET_STEP", payload: Math.min(5, state.step + 1) });
+    }, [state.step]);
+    const sendOtp = useCallback(async () => {
+        dispatch({ type: "SET_ERROR", payload: null });
+        if (!state.countryCode) {
+            dispatch({ type: "SET_ERROR", payload: "Please enter country code." });
             return;
         }
-        if (!validateCountryCode(countryCode)) {
-            setError("Please enter a valid country code (e.g., +91, +1).");
+        if (!validateCountryCode(state.countryCode)) {
+            dispatch({
+                type: "SET_ERROR",
+                payload: "Please enter a valid country code (e.g., +91, +1).",
+            });
             return;
         }
-        if (!patientPhone) {
-            setError("Please enter phone number.");
+        if (!state.patientPhone) {
+            dispatch({ type: "SET_ERROR", payload: "Please enter phone number." });
             return;
         }
-        if (!validatePhoneNumber(patientPhone)) {
-            setError("Please enter a valid phone number (7-15 digits).");
+        if (!validatePhoneNumber(state.patientPhone)) {
+            dispatch({
+                type: "SET_ERROR",
+                payload: "Please enter a valid phone number (7-15 digits).",
+            });
             return;
         }
-        setOtpSending(true);
+        dispatch({ type: "SET_OTP_SENDING", payload: true });
         try {
             await PatientService.sendPhoneVerificationOtp({
-                countryCode,
-                phoneNumber: patientPhone,
+                countryCode: state.countryCode,
+                phoneNumber: state.patientPhone,
             });
-            setOtpSent(true);
-            setError(null);
+            dispatch({ type: "SET_OTP_SENT", payload: true });
+            dispatch({ type: "SET_ERROR", payload: null });
         }
         catch (e) {
             const msg = e.message || "Failed to send OTP";
-            setError(msg);
+            dispatch({ type: "SET_ERROR", payload: msg });
             onError?.(e);
         }
         finally {
-            setOtpSending(false);
+            dispatch({ type: "SET_OTP_SENDING", payload: false });
         }
-    };
-    const verifyOtp = async () => {
-        setError(null);
-        if (!countryCode || !patientPhone || !otpCode) {
-            setError("Please enter all required fields.");
+    }, [state.countryCode, state.patientPhone, onError]);
+    const verifyOtp = useCallback(async () => {
+        dispatch({ type: "SET_ERROR", payload: null });
+        if (!state.countryCode || !state.patientPhone || !state.otpCode) {
+            dispatch({
+                type: "SET_ERROR",
+                payload: "Please enter all required fields.",
+            });
             return;
         }
-        if (otpCode.length !== 6) {
-            setError("Please enter a 6-digit OTP code.");
+        if (state.otpCode.length !== 6) {
+            dispatch({
+                type: "SET_ERROR",
+                payload: "Please enter a 6-digit OTP code.",
+            });
             return;
         }
-        setOtpVerifying(true);
+        dispatch({ type: "SET_OTP_VERIFYING", payload: true });
         try {
             await PatientService.verifyPhoneVerificationOtp({
-                countryCode,
-                phoneNumber: patientPhone,
-                otpCode,
+                countryCode: state.countryCode,
+                phoneNumber: state.patientPhone,
+                otpCode: state.otpCode,
             });
-            setOtpVerified(true);
-            setError(null);
+            dispatch({ type: "SET_OTP_VERIFIED", payload: true });
+            dispatch({ type: "SET_ERROR", payload: null });
         }
         catch (e) {
             const msg = e.message || "Invalid OTP code";
-            setError(msg);
+            dispatch({ type: "SET_ERROR", payload: msg });
             onError?.(e);
         }
         finally {
-            setOtpVerifying(false);
+            dispatch({ type: "SET_OTP_VERIFYING", payload: false });
         }
-    };
-    const submitAppointment = async () => {
-        setError(null);
-        if (!selectedDoctor ||
-            !selectedSlot ||
-            !workspaceId ||
-            !selectedAddress ||
-            !patientAddress ||
-            !patientCity ||
-            !patientState ||
-            !patientCountry ||
-            !patientZipcode) {
-            setError("Please ensure all required fields are complete.");
+    }, [state.countryCode, state.patientPhone, state.otpCode, onError]);
+    const submitAppointment = useCallback(async () => {
+        dispatch({ type: "SET_ERROR", payload: null });
+        if (!state.selectedDoctor ||
+            !state.selectedSlot ||
+            !state.workspaceId ||
+            !state.selectedAddress) {
+            dispatch({
+                type: "SET_ERROR",
+                payload: "Please ensure all required fields are complete.",
+            });
             return;
         }
-        if (!otpVerified) {
-            setError("Please verify your phone number first.");
+        if (!state.otpVerified) {
+            dispatch({
+                type: "SET_ERROR",
+                payload: "Please verify your phone number first.",
+            });
             return;
         }
-        setLoading(true);
+        if (!state.patientName ||
+            !state.patientAge ||
+            !state.patientEmail ||
+            !state.patientGender ||
+            !state.bloodGroup) {
+            dispatch({
+                type: "SET_ERROR",
+                payload: "Please fill in all patient details.",
+            });
+            return;
+        }
+        if (!state.patientAddress ||
+            !state.patientCity ||
+            !state.patientState ||
+            !state.patientCountry ||
+            !state.patientZipcode) {
+            dispatch({
+                type: "SET_ERROR",
+                payload: "Please fill in all address fields.",
+            });
+            return;
+        }
+        dispatch({ type: "SET_LOADING", payload: true });
         try {
-            const nameParts = (patientName || "Patient").trim().split(/\s+/);
-            const firstName = nameParts[0] || "Patient";
-            const lastName = nameParts.slice(1).join(" ") || "";
-            const startDate = new Date(selectedSlot.start);
-            const endDate = new Date(selectedSlot.end);
-            const appointmentDate = startDate.toISOString().split("T")[0];
-            const formatTime = (date) => {
-                const hours = String(date.getHours()).padStart(2, "0");
-                const minutes = String(date.getMinutes()).padStart(2, "0");
-                return `${hours}:${minutes}`;
-            };
-            const fromDateTimeTs = formatTime(startDate);
-            const toDateTimeTs = formatTime(endDate);
-            const patientAddressPayload = {
-                addressLine1: patientAddress,
-                city: patientCity,
-                state: patientState,
-                country: patientCountry,
-                zipcode: patientZipcode,
-                landmark: patientLandmark || undefined,
-            };
+            const { firstName, lastName } = parsePatientName(state.patientName);
+            const appointmentDate = formatDateToISO(state.selectedDate);
             await AppointmentService.createAppointment({
-                workspaceId: workspaceId,
-                workspaceAddressId: selectedAddress,
-                doctorId: selectedDoctor,
-                mode: "OFFLINE",
-                appointmentDate,
-                fromDateTimeTs,
-                toDateTimeTs,
-                consultationCharge: consultationCharge || "0",
+                workspaceId: state.workspaceId,
+                workspaceAddressId: state.selectedAddress,
+                doctorId: state.selectedDoctor,
+                mode: state.consultationMode,
+                appointmentDate: appointmentDate,
+                fromDateTimeTs: state.selectedSlot.start,
+                toDateTimeTs: state.selectedSlot.end,
+                consultationCharge: state.consultationCharge || "0",
                 type: "CONSULTATION",
                 source: "SDK_POWERED_WEBSITE",
                 patientPayload: {
                     firstName,
                     lastName,
-                    email: patientEmail || undefined,
-                    countryCode,
-                    phoneNumber: patientPhone,
-                    age: patientAge ? parseInt(patientAge, 10) : undefined,
-                    gender: patientGender
-                        ? patientGender.toUpperCase()
-                        : undefined,
+                    email: state.patientEmail,
+                    countryCode: state.countryCode,
+                    phoneNumber: state.patientPhone,
+                    age: parseInt(state.patientAge, 10),
+                    gender: state.patientGender.toUpperCase(),
+                },
+                patientAddress: {
+                    addressLine1: state.patientAddress,
+                    city: state.patientCity,
+                    state: state.patientState,
+                    country: state.patientCountry,
+                    zipcode: state.patientZipcode,
+                    landmark: state.patientLandmark || undefined,
                 },
-                patientAddress: patientAddressPayload,
             });
-            setStep(5);
+            dispatch({ type: "SET_STEP", payload: 5 });
         }
         catch (e) {
             const msg = e.message || "Failed to create appointment";
-            setError(msg);
+            dispatch({ type: "SET_ERROR", payload: msg });
             onError?.(e);
         }
         finally {
-            setLoading(false);
+            dispatch({ type: "SET_LOADING", payload: false });
         }
-    };
-    const styles = {
-        container: {
-            display: "flex",
-            justifyContent: "center",
-            padding: 20,
-            fontFamily: "'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial",
-            background: "#f6f8fa",
-        },
-        card: {
-            width: "100%",
-            maxWidth: 720,
-            background: "#fff",
-            borderRadius: 12,
-            boxShadow: "0 8px 24px rgba(16,24,40,0.08)",
-            padding: 24,
-            boxSizing: "border-box",
-        },
-        header: {
-            display: "flex",
-            alignItems: "center",
-            justifyContent: "space-between",
-            marginBottom: 16,
-        },
-        title: { margin: 0, fontSize: 20, fontWeight: 600 },
-        stepper: {
-            display: "flex",
-            gap: 8,
-            alignItems: "center",
-        },
-        stepPill: (active = false) => ({
-            padding: "6px 10px",
-            borderRadius: 999,
-            background: active ? "#0b79f7" : "#eef2ff",
-            color: active ? "#fff" : "#333",
-            fontSize: 12,
-            fontWeight: 600,
-        }),
-        section: { marginTop: 12 },
-        label: {
-            display: "block",
-            fontSize: 13,
-            marginBottom: 6,
-            color: "#374151",
-        },
-        input: {
-            width: "100%",
-            padding: "10px 12px",
-            borderRadius: 8,
-            border: "1px solid #e6e9ef",
-            outline: "none",
-            fontSize: 14,
-            boxSizing: "border-box",
-        },
-        select: {
-            width: "100%",
-            padding: "10px 12px",
-            borderRadius: 8,
-            border: "1px solid #e6e9ef",
-            background: "#fff",
-            fontSize: 14,
-        },
-        actions: {
-            display: "flex",
-            gap: 8,
-            marginTop: 16,
-            justifyContent: "flex-end",
-        },
-        primaryBtn: {
-            background: "#0b79f7",
-            color: "#fff",
-            border: "none",
-            padding: "10px 14px",
-            borderRadius: 8,
-            cursor: "pointer",
-            fontWeight: 600,
-        },
-        secondaryBtn: {
-            background: "#fff",
-            color: "#0b254a",
-            border: "1px solid #e6e9ef",
-            padding: "10px 14px",
-            borderRadius: 8,
-            cursor: "pointer",
-        },
-        slotGrid: {
-            display: "grid",
-            gridTemplateColumns: "repeat(auto-fit,minmax(140px,1fr))",
-            gap: 12,
-            marginTop: 12,
-        },
-        slotCard: (selected = false) => ({
-            padding: 12,
-            borderRadius: 10,
-            border: selected ? "2px solid #0b79f7" : "1px solid #e6e9ef",
-            background: selected
-                ? "linear-gradient(180deg,#f0f6ff,#e9f2ff)"
-                : "#fff",
-            cursor: "pointer",
-            textAlign: "center",
-        }),
-        smallMuted: { fontSize: 12, color: "#6b7280" },
-        successCard: {
-            padding: 20,
-            borderRadius: 12,
-            background: "linear-gradient(90deg,#ecfdf5,#eff6ff)",
-            textAlign: "center",
-        },
-    };
-    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: "Book Appointment" }), _jsxs("div", { style: styles.stepper, children: [_jsx("div", { style: styles.stepPill(step === 0), children: "1 Address" }), _jsx("div", { style: styles.stepPill(step === 1), children: "2 Date" }), _jsx("div", { style: styles.stepPill(step === 2), children: "3 Slot" }), _jsx("div", { style: styles.stepPill(step === 3), children: "4 Phone" }), _jsx("div", { style: styles.stepPill(step === 4), children: "5 Details" })] })] }), loading && _jsx("div", { style: { marginBottom: 12 }, children: "Loading..." }), error && (_jsx("div", { style: {
-                        marginBottom: 12,
-                        color: "#ef4444",
-                        fontWeight: 600,
-                    }, children: error })), step === 0 && (_jsxs("div", { style: styles.section, children: [_jsxs("div", { style: {
-                                display: "grid",
-                                gridTemplateColumns: "1fr 1fr",
-                                gap: 16,
-                            }, children: [_jsxs("div", { children: [_jsx("label", { style: styles.label, children: "Address" }), addresses.length === 0 ? (_jsx("div", { style: styles.smallMuted, children: "No addresses available" })) : addresses.length === 1 ? (_jsx("div", { style: { ...styles.smallMuted, fontWeight: 600 }, children: `${addresses[0].label}` })) : (_jsxs("select", { style: styles.select, value: selectedAddress || "", onChange: (e) => {
-                                                setSelectedAddress(e.target.value || null);
-                                                setError(null);
-                                            }, children: [_jsx("option", { value: "", children: "-- choose address --" }), addresses.map((a) => (_jsx("option", { value: a.id, children: a.label }, a.id)))] }))] }), _jsxs("div", { children: [_jsx("label", { style: styles.label, children: "Doctor" }), doctors.length === 0 ? (_jsx("div", { style: styles.smallMuted, children: "No doctors available" })) : doctors.length === 1 ? (_jsx("div", { style: { ...styles.smallMuted, fontWeight: 600 }, children: `${doctors[0].name} ${doctors[0].specialty ? `• ${doctors[0].specialty}` : ""}` })) : (_jsxs("select", { style: styles.select, value: selectedDoctor || "", onChange: (e) => setSelectedDoctor(e.target.value), children: [_jsx("option", { value: "", children: "-- choose doctor --" }), doctors.map((d) => (_jsxs("option", { value: d.id, children: [d.name, " ", d.specialty ? `(${d.specialty})` : ""] }, d.id)))] }))] })] }), _jsxs("div", { style: styles.actions, children: [_jsx("button", { style: styles.secondaryBtn, onClick: () => {
-                                    }, children: "Cancel" }), _jsx("button", { style: {
-                                        ...styles.primaryBtn,
-                                        opacity: canProceedFromMergedStep ? 1 : 0.6,
-                                    }, disabled: !canProceedFromMergedStep, onClick: goToNext, children: "Next" })] })] })), step === 1 && (_jsxs("div", { style: styles.section, children: [_jsx("label", { style: styles.label, children: "Select Date" }), _jsx("input", { style: styles.input, type: "date", value: date, onChange: (e) => setDate(e.target.value) }), _jsxs("div", { style: styles.actions, children: [_jsx("button", { style: styles.secondaryBtn, onClick: goBack, children: "Back" }), _jsx("button", { style: { ...styles.primaryBtn, opacity: date ? 1 : 0.6 }, disabled: !date, onClick: () => setStep(2), children: "Next" })] })] })), step === 2 && (_jsxs("div", { style: styles.section, children: [_jsx("label", { style: styles.label, children: "Choose Time Slot" }), slots.length === 0 ? (_jsx("div", { style: styles.smallMuted, children: "No slots available for selected date" })) : (_jsx("div", { style: styles.slotGrid, children: slots.map((s) => {
-                                const start = new Date(s.start).toLocaleTimeString([], {
-                                    hour: "2-digit",
-                                    minute: "2-digit",
-                                });
-                                const end = new Date(s.end).toLocaleTimeString([], {
-                                    hour: "2-digit",
-                                    minute: "2-digit",
-                                });
-                                const selected = selectedSlot?.start === s.start &&
-                                    selectedSlot?.end === s.end;
-                                return (_jsxs("div", { style: styles.slotCard(selected), onClick: () => setSelectedSlot(s), children: [_jsx("div", { style: { fontWeight: 700 }, children: `${start} — ${end}` }), _jsx("div", { style: styles.smallMuted })] }, s.id ?? `${s.start}-${s.end}`));
-                            }) })), _jsxs("div", { style: styles.actions, children: [_jsx("button", { style: styles.secondaryBtn, onClick: goBack, children: "Back" }), _jsx("button", { style: {
-                                        ...styles.primaryBtn,
-                                        opacity: selectedSlot ? 1 : 0.6,
-                                    }, disabled: !selectedSlot, onClick: () => setStep(3), children: "Next" })] })] })), step === 3 && (_jsxs("div", { style: styles.section, children: [_jsx("label", { style: styles.label, children: "Country Code" }), _jsx("input", { style: styles.input, placeholder: "+91", value: countryCode, onChange: (e) => {
-                                let value = e.target.value;
-                                if (value && !value.startsWith("+")) {
-                                    value = "+" + value;
-                                }
-                                value = value.replace(/[^\d+]/g, "");
-                                setCountryCode(value);
-                            } }), countryCode && !validateCountryCode(countryCode) && (_jsx("div", { style: { marginTop: 4, fontSize: 12, color: "#ef4444" }, children: "Please enter a valid country code (e.g., +91, +1)" })), _jsx("label", { style: { ...styles.label, marginTop: 12 }, children: "Phone Number" }), _jsx("input", { style: styles.input, type: "tel", placeholder: "9311840587", value: patientPhone, onChange: (e) => {
-                                const value = e.target.value.replace(/\D/g, "");
-                                setPatientPhone(value);
-                            }, disabled: otpSent, maxLength: 15 }), patientPhone && !validatePhoneNumber(patientPhone) && (_jsx("div", { style: { marginTop: 4, fontSize: 12, color: "#ef4444" }, children: "Phone number should be 7-15 digits" })), !otpSent ? (_jsxs("div", { style: styles.actions, children: [_jsx("button", { style: styles.secondaryBtn, onClick: goBack, children: "Back" }), _jsx("button", { style: {
-                                        ...styles.primaryBtn,
-                                        opacity: countryCode && patientPhone ? 1 : 0.6,
-                                    }, disabled: !countryCode ||
-                                        !patientPhone ||
-                                        otpSending ||
-                                        !validateCountryCode(countryCode) ||
-                                        !validatePhoneNumber(patientPhone), onClick: sendOtp, children: otpSending ? "Sending..." : "Send OTP" })] })) : (_jsx(_Fragment, { children: otpVerified ? (_jsxs(_Fragment, { children: [_jsx("div", { style: {
-                                            marginTop: 12,
-                                            padding: 12,
-                                            borderRadius: 8,
-                                            background: "#ecfdf5",
-                                            color: "#10b981",
-                                            fontWeight: 600,
-                                        }, children: "\u2713 Phone verified successfully" }), _jsxs("div", { style: styles.actions, children: [_jsx("button", { style: styles.secondaryBtn, onClick: goBack, children: "Back" }), _jsx("button", { style: styles.primaryBtn, onClick: goToNext, children: "Continue to Details" })] })] })) : (_jsxs(_Fragment, { children: [_jsx("label", { style: { ...styles.label, marginTop: 12 }, children: "Enter OTP" }), _jsx("input", { style: styles.input, type: "text", placeholder: "Enter 6-digit OTP", value: otpCode, onChange: (e) => setOtpCode(e.target.value), maxLength: 6 }), _jsxs("div", { style: {
-                                            marginTop: 8,
-                                            fontSize: 12,
-                                            color: "#6b7280",
-                                        }, children: ["OTP sent to ", countryCode, " ", patientPhone] }), _jsxs("div", { style: styles.actions, children: [_jsx("button", { style: styles.secondaryBtn, onClick: () => {
-                                                    setOtpSent(false);
-                                                    setOtpCode("");
-                                                    setOtpVerified(false);
-                                                }, children: "Change Number" }), _jsx("button", { style: {
-                                                    ...styles.primaryBtn,
-                                                    opacity: otpCode.length === 6 ? 1 : 0.6,
-                                                }, disabled: otpCode.length !== 6 || otpVerifying, onClick: verifyOtp, children: otpVerifying ? "Verifying..." : "Verify OTP" })] })] })) }))] })), step === 4 && (_jsxs("div", { style: styles.section, children: [_jsx("label", { style: styles.label, children: "Patient Name" }), _jsx("input", { style: styles.input, placeholder: "Full name", value: patientName, onChange: (e) => setPatientName(e.target.value) }), _jsx("label", { style: { ...styles.label, marginTop: 12 }, children: "Age" }), _jsx("input", { style: styles.input, type: "number", placeholder: "Age", value: patientAge, onChange: (e) => setPatientAge(e.target.value) }), _jsx("label", { style: { ...styles.label, marginTop: 12 }, children: "Email (Optional)" }), _jsx("input", { style: styles.input, type: "email", placeholder: "patient@example.com", value: patientEmail, onChange: (e) => setPatientEmail(e.target.value) }), _jsx("label", { style: { ...styles.label, marginTop: 12 }, children: "Gender (Optional)" }), _jsxs("select", { style: styles.select, value: patientGender, onChange: (e) => setPatientGender(e.target.value), children: [_jsx("option", { value: "", children: "-- Select Gender --" }), _jsx("option", { value: "MALE", children: "Male" }), _jsx("option", { value: "FEMALE", children: "Female" }), _jsx("option", { value: "OTHER", children: "Other" })] }), _jsx("label", { style: { ...styles.label, marginTop: 12 }, children: "Address Line 1 *" }), _jsx("input", { style: styles.input, placeholder: "Street address, building name, etc.", value: patientAddress, onChange: (e) => setPatientAddress(e.target.value) }), _jsxs("div", { style: {
-                                display: "grid",
-                                gridTemplateColumns: "1fr 1fr",
-                                gap: 12,
-                                marginTop: 12,
-                            }, children: [_jsxs("div", { children: [_jsx("label", { style: styles.label, children: "City *" }), _jsx("input", { style: styles.input, placeholder: "City", value: patientCity, onChange: (e) => setPatientCity(e.target.value) })] }), _jsxs("div", { children: [_jsx("label", { style: styles.label, children: "State *" }), _jsx("input", { style: styles.input, placeholder: "State", value: patientState, onChange: (e) => setPatientState(e.target.value) })] })] }), _jsxs("div", { style: {
-                                display: "grid",
-                                gridTemplateColumns: "1fr 1fr",
-                                gap: 12,
-                                marginTop: 12,
-                            }, children: [_jsxs("div", { children: [_jsx("label", { style: styles.label, children: "Country *" }), _jsx("input", { style: styles.input, placeholder: "Country", value: patientCountry, onChange: (e) => setPatientCountry(e.target.value) })] }), _jsxs("div", { children: [_jsx("label", { style: styles.label, children: "Zipcode *" }), _jsx("input", { style: styles.input, placeholder: "Zipcode", value: patientZipcode, onChange: (e) => setPatientZipcode(e.target.value) })] })] }), _jsx("label", { style: { ...styles.label, marginTop: 12 }, children: "Landmark (Optional)" }), _jsx("input", { style: styles.input, placeholder: "Nearby landmark", value: patientLandmark, onChange: (e) => setPatientLandmark(e.target.value) }), _jsx("label", { style: { ...styles.label, marginTop: 12 }, children: "Problem Facing" }), _jsx("textarea", { style: { ...styles.input, minHeight: 80, resize: "vertical" }, placeholder: "Describe the problem you're facing", value: problemFacing, onChange: (e) => setProblemFacing(e.target.value) }), _jsxs("div", { style: styles.actions, children: [_jsx("button", { style: styles.secondaryBtn, onClick: goBack, children: "Back" }), _jsx("button", { style: {
-                                        ...styles.primaryBtn,
-                                        opacity: patientName &&
-                                            patientAddress &&
-                                            patientCity &&
-                                            patientState &&
-                                            patientCountry &&
-                                            patientZipcode &&
-                                            otpVerified
-                                            ? 1
-                                            : 0.6,
-                                    }, disabled: !patientName ||
-                                        !patientAddress ||
-                                        !patientCity ||
-                                        !patientState ||
-                                        !patientCountry ||
-                                        !patientZipcode ||
-                                        !otpVerified ||
-                                        loading, onClick: submitAppointment, children: loading ? "Booking..." : "Book Appointment" })] })] })), step === 5 && (_jsxs("div", { style: { ...styles.section, textAlign: "center" }, children: [_jsxs("div", { style: styles.successCard, children: [_jsx("div", { style: {
-                                        fontSize: 32,
-                                        color: "#10b981",
-                                        marginBottom: 8,
-                                    }, children: "\u2713" }), _jsx("div", { style: { fontWeight: 700, marginBottom: 6 }, children: "Appointment Confirmed" }), _jsxs("div", { style: styles.smallMuted, children: ["Thank you, ", patientName || "Patient", ". Your appointment is confirmed."] })] }), _jsx("div", { style: {
-                                marginTop: 14,
-                                display: "flex",
-                                justifyContent: "center",
-                            }, children: _jsx("button", { style: { ...styles.primaryBtn, width: 160 }, onClick: () => {
-                                    setStep(0);
-                                    setSelectedSlot(null);
-                                    setSelectedDoctor(null);
-                                    setDate("");
-                                    setPatientName("");
-                                    setPatientAge("");
-                                    setPatientAddress("");
-                                    setPatientCity("");
-                                    setPatientState("");
-                                    setPatientCountry("");
-                                    setPatientZipcode("");
-                                    setPatientLandmark("");
-                                    setPatientEmail("");
-                                    setPatientGender("");
-                                    setProblemFacing("");
-                                    setConsultationCharge("");
-                                    setCountryCode("+91");
-                                    setPatientPhone("");
-                                    setOtpCode("");
-                                    setOtpSent(false);
-                                    setOtpVerified(false);
-                                }, children: "Book Another" }) })] }))] }) }));
+    }, [state, onError]);
+    const resetForm = useCallback(() => {
+        dispatch({ type: "RESET_FORM" });
+    }, []);
+    const handleDoctorSelect = useCallback((addrId, docId) => {
+        dispatch({ type: "SET_SELECTED_ADDRESS", payload: addrId });
+        dispatch({ type: "SET_SELECTED_DOCTOR", payload: docId });
+        dispatch({ type: "SET_STEP", payload: 1 });
+    }, []);
+    const handleDateTimeModalContinue = useCallback((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 });
+        dispatch({ type: "SET_STEP", payload: 3 });
+    }, []);
+    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, { onCancel: () => dispatch({ type: "SET_STEP", payload: 0 }), onContinue: handleDoctorSelect })), state.step === 1 && (_jsx(AppointmentDateTimeModal, { onlineFee: 500, offlineFee: 300, slots: state.slots, 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(SuccessStep, { onReset: resetForm })] })] }) }));
 };
+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,
+    },
+});