medos-sdk 1.0.2 → 1.0.3

package/dist/components/AppointmentDateTimeModal.d.ts

@@ -0,0 +1,14 @@
+import React from "react";
+import { Slot } from "../services/AppointmentService";
+export type AppointmentMode = "ONLINE" | "OFFLINE";
+export type PaymentMode = "CASH" | "CARD" | "UPI";
+type AppointmentModalProps = {
+    onlineFee?: number | null;
+    offlineFee?: number | null;
+    slots: Slot[];
+    onCancel: () => void;
+    onContinue: (mode: AppointmentMode, date: Date, slot: Slot, charge: string, paymentMode: PaymentMode) => void;
+    onDateChange?: (date: Date) => void;
+};
+export declare const AppointmentDateTimeModal: React.FC<AppointmentModalProps>;
+export {};

package/dist/components/AppointmentDateTimeModal.js

@@ -0,0 +1,206 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useState, useCallback, useMemo } from "react";
+import { CustomCalendarWithDateSelector } from "./custom-calendar";
+import { PaymentMethodIcon } from "./Icons/PaymentMethodIcon";
+import { DateTimeIcon } from "./Icons/Date&TimeIcon";
+import { ConsultationTypeIcon } from "./Icons/ConsultationType";
+const MONTHS = [
+    "January",
+    "February",
+    "March",
+    "April",
+    "May",
+    "June",
+    "July",
+    "August",
+    "September",
+    "October",
+    "November",
+    "December",
+];
+const getOrdinalSuffix = (day) => {
+    if (day > 3 && day < 21)
+        return "th";
+    switch (day % 10) {
+        case 1:
+            return "st";
+        case 2:
+            return "nd";
+        case 3:
+            return "rd";
+        default:
+            return "th";
+    }
+};
+const formatDate = (date) => {
+    const day = date.getDate();
+    const month = MONTHS[date.getMonth()];
+    const year = date.getFullYear();
+    return `${day}${getOrdinalSuffix(day)} ${month} ${year}`;
+};
+export const AppointmentDateTimeModal = ({ onlineFee, offlineFee, slots, onCancel, onContinue, onDateChange, }) => {
+    const [mode, setMode] = useState("OFFLINE");
+    const [consultationCharge, setConsultationCharge] = useState("");
+    const [paymentMode, setPaymentMode] = useState("CASH");
+    const [selectedDate, setSelectedDate] = useState(new Date());
+    const [selectedSlot, setSelectedSlot] = useState(null);
+    const handleDateSelect = useCallback((date) => {
+        setSelectedDate(date);
+        setSelectedSlot(null);
+        onDateChange?.(date);
+    }, [onDateChange]);
+    useEffect(() => {
+        const charge = mode === "ONLINE" && onlineFee
+            ? String(onlineFee)
+            : mode === "OFFLINE" && offlineFee
+                ? String(offlineFee)
+                : "";
+        setConsultationCharge(charge);
+    }, [mode, onlineFee, offlineFee]);
+    const handleContinue = useCallback(() => {
+        if (!selectedSlot)
+            return;
+        onContinue(mode, selectedDate, selectedSlot, consultationCharge, paymentMode);
+    }, [
+        mode,
+        selectedDate,
+        selectedSlot,
+        consultationCharge,
+        paymentMode,
+        onContinue,
+    ]);
+    const isSlotSelected = useCallback((slot) => selectedSlot?.start === slot.start && selectedSlot?.end === slot.end, [selectedSlot]);
+    const formattedDate = useMemo(() => formatDate(selectedDate), [selectedDate]);
+    const isFormValid = selectedDate && selectedSlot && consultationCharge;
+    return (_jsxs("div", { style: STYLES.modalWrapper, children: [_jsx(ConsultationTypeSection, { mode: mode, onlineFee: onlineFee, offlineFee: offlineFee, onModeChange: setMode }), _jsx(ChargesSection, { charge: consultationCharge }), _jsx(DateTimeSection, { selectedDate: selectedDate, formattedDate: formattedDate, slots: slots, selectedSlot: selectedSlot, onDateSelect: handleDateSelect, onSlotSelect: setSelectedSlot, isSlotSelected: isSlotSelected }), _jsx(FooterSection, { onCancel: onCancel, onContinue: handleContinue, isValid: !!isFormValid })] }));
+};
+const ConsultationTypeSection = ({ mode, onlineFee, offlineFee, onModeChange }) => (_jsxs("div", { style: STYLES.sectionCard, children: [_jsxs("div", { style: STYLES.sectionHeader, children: [_jsx(ConsultationTypeIcon, {}), _jsx("span", { style: STYLES.sectionTitle, children: "Consultation Type" })] }), _jsxs("div", { style: STYLES.sectionBody, children: [_jsx("p", { style: STYLES.label, children: "Consultation Mode" }), _jsx("div", { style: STYLES.modeContainer, children: ["ONLINE", "OFFLINE"].map((item) => {
+                        const disabled = (item === "ONLINE" && (!onlineFee || onlineFee <= 0)) ||
+                            (item === "OFFLINE" && (!offlineFee || offlineFee <= 0));
+                        return (_jsxs("label", { style: { ...STYLES.radioLabel, opacity: disabled ? 0.5 : 1 }, children: [_jsx("input", { type: "radio", name: "mode", value: item, checked: mode === item, disabled: disabled, onChange: () => !disabled && onModeChange(item), style: STYLES.radioInput }), item === "ONLINE" ? "Online" : "Offline"] }, item));
+                    }) })] })] }));
+const ChargesSection = ({ charge }) => (_jsxs("div", { style: STYLES.sectionCard, children: [_jsxs("div", { style: STYLES.sectionHeader, children: [_jsx(PaymentMethodIcon, {}), _jsx("span", { style: STYLES.sectionTitle, children: "Charges & Mode of Payment" })] }), _jsx("div", { style: STYLES.sectionBody, children: _jsxs("span", { style: STYLES.rupee, children: ["\u20B9 ", charge] }) })] }));
+const DateTimeSection = ({ selectedDate, formattedDate, slots, selectedSlot, onDateSelect, onSlotSelect, isSlotSelected, }) => (_jsxs("div", { style: STYLES.sectionCard, children: [_jsxs("div", { style: STYLES.sectionHeader, children: [_jsx(DateTimeIcon, {}), _jsx("span", { style: STYLES.sectionTitle, children: "Date & Time" })] }), _jsx("div", { style: STYLES.sectionBody, children: _jsxs("div", { style: STYLES.dateTimeContainer, children: [_jsx("div", { style: STYLES.calendarBox, children: _jsx(CustomCalendarWithDateSelector, { selectedDate: selectedDate, onSelect: onDateSelect, pastDisabled: true }) }), _jsxs("div", { style: STYLES.timesContainer, children: [_jsxs("p", { style: STYLES.timesLabel, children: ["Available times ", _jsx("br", {}), _jsx("span", { style: STYLES.dateLabel, children: formattedDate })] }), slots.length === 0 ? (_jsx("p", { style: STYLES.noSlots, children: "No available slots" })) : (_jsx("div", { style: STYLES.slotGrid, children: slots.map((slot) => (_jsx(SlotButton, { slot: slot, isSelected: isSlotSelected(slot), onSelect: onSlotSelect }, slot.id))) }))] })] }) })] }));
+const SlotButton = ({ slot, isSelected, onSelect }) => {
+    const startTime = useMemo(() => new Date(slot.start).toLocaleTimeString([], {
+        hour: "2-digit",
+        minute: "2-digit",
+    }), [slot.start]);
+    return (_jsx("button", { onClick: () => onSelect(slot), style: {
+            ...STYLES.slotButton,
+            background: isSelected ? "#009b4d" : "#fff",
+            color: isSelected ? "#fff" : "#009b4d",
+        }, children: startTime }));
+};
+const FooterSection = ({ onCancel, onContinue, isValid }) => (_jsxs("div", { style: STYLES.footer, children: [_jsx("button", { style: STYLES.backBtn, onClick: onCancel, children: "Back" }), _jsx("button", { style: { ...STYLES.continueBtn, opacity: isValid ? 1 : 0.6 }, onClick: onContinue, disabled: !isValid, children: "Continue" })] }));
+const STYLES = {
+    modalWrapper: {
+        backgroundColor: "#fff",
+        borderRadius: 12,
+        padding: "20px 24px 24px 24px",
+        maxWidth: 800,
+        margin: "0 auto",
+        fontFamily: "'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial",
+        color: "#111827",
+        boxSizing: "border-box",
+    },
+    sectionCard: {
+        border: "1px solid #e5e7eb",
+        borderRadius: 10,
+        marginBottom: 20,
+        position: "relative",
+    },
+    sectionHeader: {
+        background: "#f9fafb",
+        borderBottom: "1px solid #e5e7eb",
+        padding: "12px 16px",
+        display: "flex",
+        alignItems: "center",
+        gap: 8,
+    },
+    sectionTitle: { fontSize: 15, fontWeight: 600 },
+    sectionBody: { padding: 16, position: "relative" },
+    label: {
+        fontSize: 14,
+        fontWeight: 500,
+        marginBottom: 4,
+        display: "block",
+    },
+    modeContainer: {
+        display: "flex",
+        gap: 24,
+        marginTop: 4,
+    },
+    radioLabel: {
+        display: "flex",
+        alignItems: "center",
+        gap: 8,
+        cursor: "pointer",
+        fontSize: 14,
+    },
+    radioInput: {
+        width: 18,
+        height: 18,
+        accentColor: "#218838",
+        cursor: "pointer",
+    },
+    rupee: {
+        fontWeight: 600,
+        fontSize: 16,
+        marginRight: 6,
+    },
+    dateTimeContainer: { display: "flex", gap: 24 },
+    calendarBox: {
+        border: "1px solid #e5e7eb",
+        borderRadius: 10,
+        padding: 8,
+    },
+    timesContainer: { flexGrow: 1 },
+    timesLabel: { fontWeight: 500 },
+    dateLabel: { color: "#6b7280", fontSize: 13 },
+    noSlots: {
+        color: "#6b7280",
+        fontSize: 14,
+        marginTop: 8,
+    },
+    slotGrid: {
+        display: "grid",
+        gridTemplateColumns: "repeat(auto-fit,minmax(100px,1fr))",
+        gap: 8,
+        marginTop: 12,
+    },
+    slotButton: {
+        borderRadius: 8,
+        padding: "8px 10px",
+        border: "1px solid #009b4d",
+        fontSize: 13,
+        fontWeight: 500,
+        cursor: "pointer",
+        transition: "0.2s",
+    },
+    footer: {
+        display: "flex",
+        justifyContent: "flex-end",
+        alignItems: "center",
+        marginTop: 20,
+        gap: 12,
+    },
+    backBtn: {
+        border: "1px solid #218838",
+        background: "#fff",
+        color: "#218838",
+        borderRadius: 6,
+        fontWeight: 600,
+        padding: "8px 20px",
+        cursor: "pointer",
+    },
+    continueBtn: {
+        background: "#218838",
+        color: "#fff",
+        border: "none",
+        borderRadius: 6,
+        fontWeight: 600,
+        padding: "8px 20px",
+        cursor: "pointer",
+    },
+};

package/dist/components/ConfigurableCard.d.ts

@@ -0,0 +1,12 @@
+import React from "react";
+export type ConfigurableCardProps = {
+    title: string;
+    subtitle?: string;
+    content?: React.ReactNode;
+    ctaLabel?: string;
+    onCta?: () => void;
+    variant?: "filled" | "outline";
+    className?: string;
+};
+export declare const ConfigurableCard: React.FC<ConfigurableCardProps>;
+export default ConfigurableCard;

package/dist/components/ConfigurableCard.js

@@ -0,0 +1,29 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useTemplate } from "../context/TemplateContext";
+export const ConfigurableCard = ({ title, subtitle, content, ctaLabel = "Action", onCta, variant = "outline", className, }) => {
+    useTemplate();
+    const filled = variant === "filled";
+    const containerStyle = {
+        background: filled
+            ? "var(--medos-primary-color)"
+            : "var(--medos-background-color)",
+        color: filled ? "#fff" : "var(--medos-text-color)",
+        border: filled ? "none" : "1px solid var(--medos-border-color)",
+        padding: 16,
+        borderRadius: 10,
+        boxShadow: "0 6px 18px rgba(16,24,40,0.06)",
+    };
+    const ctaStyle = {
+        padding: "8px 12px",
+        borderRadius: 8,
+        background: filled
+            ? "rgba(255,255,255,0.12)"
+            : "var(--medos-primary-color)",
+        color: "#fff",
+        border: "none",
+        cursor: "pointer",
+        fontWeight: 600,
+    };
+    return (_jsxs("div", { className: className, style: containerStyle, children: [_jsxs("div", { style: { display: "flex", justifyContent: "space-between", gap: 8 }, children: [_jsxs("div", { children: [_jsx("div", { style: { fontSize: 16, fontWeight: 700 }, children: title }), subtitle && (_jsx("div", { style: { fontSize: 13, opacity: 0.95, marginTop: 4 }, children: subtitle }))] }), _jsx("div", { style: { display: "flex", alignItems: "center" }, children: _jsx("button", { style: ctaStyle, onClick: onCta, "aria-label": ctaLabel, children: ctaLabel }) })] }), content && _jsx("div", { style: { marginTop: 12 }, children: content })] }));
+};
+export default ConfigurableCard;

package/dist/components/DoctorSelectModal.d.ts

@@ -0,0 +1,7 @@
+import React from "react";
+type DoctorSelectModalProps = {
+    onCancel: () => void;
+    onContinue: (addressId: number, doctorId: number, notes?: string) => void;
+};
+export declare const DoctorSelectModal: React.FC<DoctorSelectModalProps>;
+export {};

package/dist/components/DoctorSelectModal.js

@@ -0,0 +1,80 @@
+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";
+export const DoctorSelectModal = ({ onCancel, onContinue, }) => {
+    const [addresses, setAddresses] = useState([]);
+    const [addressDoctorsMap, setAddressDoctorsMap] = useState({});
+    const [selectedAddressId, setSelectedAddressId] = useState("");
+    const [selectedDoctorId, setSelectedDoctorId] = useState("");
+    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);
+        })();
+    }, []);
+    const doctorsForAddress = selectedAddressId ? addressDoctorsMap[Number(selectedAddressId)] || [] : [];
+    const canContinue = !!selectedAddressId && !!selectedDoctorId;
+    return (_jsx("div", { style: { border: "1px solid #e5e7eb", 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 #e5e7eb" } }), _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" }) })] })] }) }));
+};
+const styles = {
+    modalWrapper: {
+        backgroundColor: "#fff",
+        borderRadius: 12,
+        maxWidth: 840,
+        margin: "0 auto",
+        fontFamily: "'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial",
+        color: "#111827",
+    },
+    headerWrapper: {
+        padding: "20px 24px 10px 24px",
+    },
+    contentWrapper: {
+        padding: "20px 24px 0px 24px",
+    },
+    title: { fontSize: 20, fontWeight: 600, margin: 0 },
+    fieldGroup: { marginBottom: 18 },
+    label: { fontSize: 15, fontWeight: 500, marginBottom: 6, display: "block" },
+    mandatory: { color: "red", marginLeft: 4 },
+    optional: { color: "#9ca3af", fontWeight: 400, marginLeft: 4, fontSize: 13 },
+    textarea: {
+        width: "100%",
+        border: "1px solid #e5e7eb",
+        borderRadius: 6,
+        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: "#009b4d", fontWeight: 600 },
+    continueBtn: {
+        background: "#218838",
+        color: "#fff",
+        border: "none",
+        borderRadius: 6,
+        fontWeight: 600,
+        padding: "8px 22px",
+        cursor: "pointer",
+    },
+};

package/dist/components/Icons/Check.d.ts

@@ -0,0 +1,6 @@
+interface IconProps {
+    className?: string;
+    size?: number;
+}
+export declare const Check: React.FC<IconProps>;
+export {};

package/dist/components/Icons/Check.js

@@ -0,0 +1,2 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+export const Check = ({ className, size = 16 }) => (_jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", className: className, children: _jsx("polyline", { points: "20 6 9 17 4 12" }) }));

package/dist/components/Icons/ChevronDownIcon.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+export declare const ChevronDownIcon: React.FC<{
+    className?: string;
+}>;

package/dist/components/Icons/ChevronDownIcon.js

@@ -0,0 +1,2 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+export const ChevronDownIcon = ({ className }) => (_jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", className: className, children: _jsx("polyline", { points: "6 9 12 15 18 9" }) }));

package/dist/components/Icons/ChevronLeft.d.ts

@@ -0,0 +1,3 @@
+import React from "react";
+declare const ChevronLeft: React.FC<React.SVGProps<SVGSVGElement>>;
+export default ChevronLeft;

package/dist/components/Icons/ChevronLeft.js

@@ -0,0 +1,3 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+const ChevronLeft = (props) => (_jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: 20, height: 20, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round", className: `lucide lucide-chevron-left ${props.className ?? ""}`, ...props, children: _jsx("path", { d: "m15 18-6-6 6-6" }) }));
+export default ChevronLeft;

package/dist/components/Icons/ChevronRight.d.ts

@@ -0,0 +1,3 @@
+import React from "react";
+declare const ChevronRight: React.FC<React.SVGProps<SVGSVGElement>>;
+export default ChevronRight;

package/dist/components/Icons/ChevronRight.js

@@ -0,0 +1,3 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+const ChevronRight = ({ ...props }) => (_jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: 20, height: 20, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round", className: `lucide lucide-chevron-right-icon lucide-chevron-right`, ...props, children: _jsx("path", { d: "m9 18 6-6-6-6" }) }));
+export default ChevronRight;

package/dist/components/Icons/ConfirmationCheck.d.ts

@@ -0,0 +1 @@
+export declare const ConfirmationCheck: React.FC;

package/dist/components/Icons/ConfirmationCheck.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const Check = ({ size = 16 }) => (_jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: _jsx("polyline", { points: "20 6 9 17 4 12" }) }));
+export const ConfirmationCheck = () => (_jsxs("div", { style: { position: 'relative', display: 'inline-block' }, children: [_jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "60", height: "60", viewBox: "0 0 41 41", fill: "none", children: _jsx("path", { d: "M31.1309 4.90254C32.388 4.98797 33.0166 5.03069 33.5247 5.25288C34.2598 5.57438 34.8467 6.16126 35.1682 6.8964C35.3904 7.40445 35.4331 8.03302 35.5185 9.29016L35.7135 12.159C35.748 12.6674 35.7653 12.9217 35.8206 13.1645C35.9004 13.5154 36.0391 13.8503 36.2308 14.1549C36.3634 14.3657 36.531 14.5576 36.8661 14.9416L38.7568 17.108C39.5853 18.0574 39.9996 18.532 40.2017 19.0484C40.4942 19.7955 40.4942 20.6255 40.2017 21.3727C39.9996 21.889 39.5853 22.3637 38.7568 23.313L36.8661 25.4795C36.531 25.8634 36.3634 26.0554 36.2308 26.2662C36.0391 26.5708 35.9004 26.9056 35.8206 27.2566C35.7653 27.4994 35.748 27.7536 35.7135 28.2621L35.5185 31.1309C35.4331 32.388 35.3904 33.0166 35.1682 33.5247C34.8467 34.2598 34.2598 34.8467 33.5247 35.1682C33.0166 35.3904 32.388 35.4331 31.1309 35.5185L28.2621 35.7135C27.7536 35.748 27.4994 35.7653 27.2566 35.8206C26.9056 35.9004 26.5708 36.0391 26.2662 36.2308C26.0554 36.3634 25.8634 36.531 25.4795 36.8661L23.313 38.7568C22.3637 39.5853 21.889 39.9996 21.3727 40.2017C20.6255 40.4942 19.7955 40.4942 19.0484 40.2017C18.532 39.9996 18.0574 39.5853 17.108 38.7568L14.9416 36.8661C14.5576 36.531 14.3657 36.3634 14.1549 36.2308C13.8503 36.0391 13.5154 35.9004 13.1645 35.8206C12.9217 35.7653 12.6674 35.748 12.159 35.7135L9.29016 35.5185C8.03302 35.4331 7.40445 35.3904 6.8964 35.1682C6.16126 34.8467 5.57438 34.2598 5.25288 33.5247C5.03069 33.0166 4.98797 32.388 4.90254 31.1309L4.70759 28.2621C4.67304 27.7536 4.65576 27.4994 4.60049 27.2566C4.52063 26.9056 4.38193 26.5708 4.19028 26.2662C4.05764 26.0554 3.89009 25.8634 3.555 25.4795L1.66428 23.313C0.83576 22.3637 0.421499 21.889 0.219363 21.3727C-0.073121 20.6255 -0.0731209 19.7955 0.219363 19.0484C0.421499 18.532 0.83576 18.0574 1.66428 17.108L3.555 14.9416C3.89009 14.5576 4.05764 14.3657 4.19027 14.1549C4.38193 13.8503 4.52063 13.5154 4.60049 13.1645C4.65576 12.9217 4.67304 12.6674 4.70759 12.159L4.90254 9.29016C4.98797 8.03302 5.03069 7.40445 5.25288 6.8964C5.57438 6.16126 6.16126 5.57438 6.8964 5.25288C7.40445 5.03069 8.03302 4.98797 9.29016 4.90254L12.159 4.70759C12.6674       4.67304 12.9217 4.65577 13.1645 4.6005C13.5154 4.52063 13.8503 4.38193 14.1549 4.19028C14.3657 4.05764 14.5576 3.89009 14.9416 3.555L17.108 1.66428C18.0574 0.83576 18.532 0.421499 19.0484 0.219363C19.7955 -0.073121 20.6255 -0.073121 21.3727 0.219363C21.889 0.421499 22.3637 0.83576 23.313 1.66428L25.4795 3.555C25.8634 3.89009 26.0554 4.05764 26.2662 4.19028C26.5708 4.38193 26.9056 4.52063 27.2566 4.6005C27.4994 4.65577 27.7536 4.67304 28.2621 4.70759L31.1309 4.90254Z", fill: "#27903F" }) }), _jsx("div", { style: {
+                position: 'absolute',
+                top: '50%',
+                left: '50%',
+                transform: 'translate(-50%, -50%)',
+                color: 'white'
+            }, children: _jsx(Check, { size: 24 }) })] }));

package/dist/components/Icons/ConsultationType.d.ts

@@ -0,0 +1 @@
+export declare const ConsultationTypeIcon: () => import("react/jsx-runtime").JSX.Element;

package/dist/components/Icons/ConsultationType.js

@@ -0,0 +1,2 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+export const ConsultationTypeIcon = () => (_jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "18", height: "20", viewBox: "0 0 18 20", fill: "none", children: _jsx("path", { d: "M2 20C1.45 20 0.979167 19.8042 0.5875 19.4125C0.195833 19.0208 0 18.55 0 18V4C0 3.45 0.195833 2.97917 0.5875 2.5875C0.979167 2.19583 1.45 2 2 2H3V0H5V2H13V0H15V2H16C16.55 2 17.0208 2.19583 17.4125 2.5875C17.8042 2.97917 18 3.45 18 4V18C18 18.55 17.8042 19.0208 17.4125 19.4125C17.0208 19.8042 16.55 20 16 20H2ZM2 18H16V8H2V18ZM2 6H16V4H2V6ZM4 12V10H14V12H4ZM4 16V14H11V16H4Z", fill: "#1E3A8A" }) }));

package/dist/components/Icons/Date&TimeIcon.d.ts

@@ -0,0 +1 @@
+export declare const DateTimeIcon: () => import("react/jsx-runtime").JSX.Element;

package/dist/components/Icons/Date&TimeIcon.js

@@ -0,0 +1,2 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+export const DateTimeIcon = () => (_jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "18", height: "20", viewBox: "0 0 18 20", fill: "none", children: _jsx("path", { d: "M2 20C1.45 20 0.979167 19.8042 0.5875 19.4125C0.195833 19.0208 0 18.55 0 18V4C0 3.45 0.195833 2.97917 0.5875 2.5875C0.979167 2.19583 1.45 2 2 2H3V0H5V2H13V0H15V2H16C16.55 2 17.0208 2.19583 17.4125 2.5875C17.8042 2.97917 18 3.45 18 4V18C18 18.55 17.8042 19.0208 17.4125 19.4125C17.0208 19.8042 16.55 20 16 20H2ZM2 18H16V8H2V18ZM2 6H16V4H2V6ZM4 12V10H14V12H4ZM4 16V14H11V16H4Z", fill: "#C94300" }) }));

package/dist/components/Icons/MapIcon.d.ts

@@ -0,0 +1 @@
+export declare const MapPinIcon: () => import("react/jsx-runtime").JSX.Element;

package/dist/components/Icons/MapIcon.js

@@ -0,0 +1,2 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+export const MapPinIcon = () => (_jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "14", height: "20", viewBox: "0 0 14 20", fill: "none", children: _jsx("path", { d: "M7 20C5.23333 20 3.79167 19.7208 2.675 19.1625C1.55833 18.6042 1 17.8833 1 17C1 16.6 1.12083 16.2292 1.3625 15.8875C1.60417 15.5458 1.94167 15.25 2.375 15L3.95 16.475C3.8 16.5417 3.6375 16.6167 3.4625 16.7C3.2875 16.7833 3.15 16.8833 3.05 17C3.26667 17.2667 3.76667 17.5 4.55 17.7C5.33333 17.9 6.15 18 7 18C7.85 18 8.67083 17.9 9.4625 17.7C10.2542 17.5 10.7583 17.2667 10.975 17C10.8583 16.8667 10.7083 16.7583 10.525 16.675C10.3417 16.5917 10.1667 16.5167 10 16.45L11.55 14.95C12.0167 15.2167 12.375 15.5208 12.625 15.8625C12.875 16.2042 13 16.5833 13 17C13 17.8833 12.4417 18.6042 11.325 19.1625C10.2083 19.7208 8.76667 20 7 20ZM7.025 14.5C8.675 13.2833 9.91667 12.0625 10.75 10.8375C11.5833 9.6125 12 8.38333 12 7.15C12 5.45 11.4583 4.16667 10.375 3.3C9.29167 2.43333 8.16667 2 7 2C5.83333 2 4.70833 2.43333 3.625 3.3C2.54167 4.16667 2 5.45 2 7.15C2 8.26667 2.40833 9.42917 3.225 10.6375C4.04167 11.8458 5.30833 13.1333 7.025 14.5ZM7 17C4.65 15.2667 2.89583 13.5833 1.7375 11.95C0.579167 10.3167 0 8.71667 0 7.15C0 5.96667 0.2125 4.92917 0.6375 4.0375C1.0625 3.14583 1.60833 2.4 2.275 1.8C2.94167 1.2 3.69167 0.75 4.525 0.45C5.35833 0.15 6.18333 0 7 0C7.81667 0 8.64167 0.15 9.475 0.45C10.3083 0.75 11.0583 1.2 11.725 1.8C12.3917 2.4 12.9375 3.14583 13.3625 4.0375C13.7875 4.92917 14 5.96667 14 7.15C14 8.71667 13.4208 10.3167 12.2625 11.95C11.1042 13.5833 9.35 15.2667 7 17ZM7 9C7.55 9 8.02083 8.80417 8.4125 8.4125C8.80417 8.02083 9 7.55 9 7C9 6.45 8.80417 5.97917 8.4125 5.5875C8.02083 5.19583 7.55 5 7 5C6.45 5 5.97917 5.19583 5.5875 5.5875C5.19583 5.97917 5 6.45 5 7C5 7.55 5.19583 8.02083 5.5875 8.4125C5.97917 8.80417 6.45 9 7 9Z", fill: "#087E8B" }) }));

package/dist/components/Icons/PaymentMethodIcon.d.ts

@@ -0,0 +1 @@
+export declare const PaymentMethodIcon: () => import("react/jsx-runtime").JSX.Element;

package/dist/components/Icons/PaymentMethodIcon.js

@@ -0,0 +1,2 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+export const PaymentMethodIcon = () => (_jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "21", height: "15", viewBox: "0 0 21 15", fill: "none", children: _jsx("path", { d: "M11.9038 8.096C11.2051 8.096 10.6138 7.854 10.1298 7.37C9.64575 6.886 9.40375 6.29467 9.40375 5.596C9.40375 4.89733 9.64575 4.306 10.1298 3.822C10.6138 3.338 11.2051 3.096 11.9038 3.096C12.6024 3.096 13.1938 3.338 13.6778 3.822C14.1618 4.306 14.4038 4.89733 14.4038 5.596C14.4038 6.29467 14.1618 6.886 13.6778 7.37C13.1938 7.854 12.6024 8.096 11.9038 8.096ZM5.3075 11.1923C4.8105 11.1923 4.385 11.0153 4.031 10.6613C3.677 10.3073 3.5 9.88167 3.5 9.3845V1.8075C3.5 1.3105 3.677 0.885 4.031 0.531C4.385 0.177 4.8105 0 5.3075 0H18.4998C18.9969 0 19.4225 0.177 19.7765 0.531C20.1305 0.885 20.3075 1.3105 20.3075 1.8075V9.3845C20.3075 9.88167 20.1305 10.3073 19.7765 10.6613C19.4225 11.0153 18.9969 11.1923 18.4998 11.1923H5.3075ZM6.8075 9.69225H17C17 9.19358 17.177 8.76758 17.531 8.41425C17.885 8.06108 18.3105 7.8845 18.8075 7.8845V3.3075C18.3088 3.3075 17.8829 3.1305 17.5298 2.7765C17.1766 2.4225 17 1.997 17 1.5H6.8075C6.8075 1.99867 6.6305 2.42458 6.2765 2.77775C5.9225 3.13092 5.497 3.3075 5 3.3075V7.8845C5.49867 7.8845 5.92458 8.0615 6.27775 8.4155C6.63092 8.7695 6.8075 9.19508 6.8075 9.69225ZM17.3267 14.6923H1.80775C1.31058 14.6923 0.885 14.5153 0.531 14.1613C0.177 13.8073 0 13.3817 0 12.8845V2.98075H1.5V12.8845C1.5 12.9613 1.532 13.0318 1.596 13.096C1.66017 13.1602 1.73075 13.1923 1.80775 13.1923H17.3267V14.6923ZM5.3075 9.69225H5V1.5H5.3075C5.22417 1.5 5.15208 1.53042 5.09125 1.59125C5.03042 1.65208 5 1.72417 5 1.8075V9.3845C5 9.46783 5.03042 9.53992 5.09125 9.60075C5.15208 9.66175 5.22417 9.69225 5.3075 9.69225Z", fill: "#27903F" }) }));

package/dist/components/Icons/UserIcon.d.ts

@@ -0,0 +1 @@
+export declare const UserIcon: () => import("react/jsx-runtime").JSX.Element;

package/dist/components/Icons/UserIcon.js

@@ -0,0 +1,2 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+export const UserIcon = () => (_jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", children: _jsx("path", { d: "M14 13C13.1667 13 12.4583 12.7083 11.875 12.125C11.2917 11.5417 11 10.8333 11 10C11 9.16667 11.2917 8.45833 11.875 7.875C12.4583 7.29167 13.1667 7 14 7C14.8333 7 15.5417 7.29167 16.125 7.875C16.7083 8.45833 17 9.16667 17 10C17 10.8333 16.7083 11.5417 16.125 12.125C15.5417 12.7083 14.8333 13 14 13ZM14 11C14.2833 11 14.5208 10.9042 14.7125 10.7125C14.9042 10.5208 15 10.2833 15 10C15 9.71667 14.9042 9.47917 14.7125 9.2875C14.5208 9.09583 14.2833 9 14 9C13.7167 9 13.4792 9.09583 13.2875 9.2875C13.0958 9.47917 13 9.71667 13 10C13 10.2833 13.0958 10.5208 13.2875 10.7125C13.4792 10.9042 13.7167 11 14 11ZM8 20V17.1C8 16.75 8.08333 16.4208 8.25 16.1125C8.41667 15.8042 8.65 15.5583 8.95 15.375C9.48333 15.0583 10.0458 14.7958 10.6375 14.5875C11.2292 14.3792 11.8333 14.225 12.45 14.125L14 16L15.55 14.125C16.1667 14.225 16.7667 14.3792 17.35 14.5875C17.9333 14.7958 18.4917 15.0583 19.025 15.375C19.325 15.5583 19.5625 15.8042 19.7375 16.1125C19.9125 16.4208 20 16.75 20 17.1V20H8ZM9.975 18H13.05L11.7 16.35C11.4 16.4333 11.1083 16.5417 10.825 16.675C10.5417 16.8083 10.2583 16.95 9.975 17.1V18ZM14.95 18H18V17.1C17.7333 16.9333 17.4583 16.7875 17.175 16.6625C16.8917 16.5375 16.6 16.4333 16.3 16.35L14.95 18ZM2 18C1.45 18 0.979167 17.8042 0.5875 17.4125C0.195833 17.0208 0 16.55 0 16V2C0 1.45 0.195833 0.979167 0.5875 0.5875C0.979167 0.195833 1.45 0 2 0H16C16.55 0 17.0208 0.195833 17.4125 0.5875C17.8042 0.979167 18 1.45 18 2V7C17.7333 6.66667 17.4417 6.35 17.125 6.05C16.8083 5.75 16.4333 5.55 16 5.45V2H2V16H6.15C6.1 16.1833 6.0625 16.3667 6.0375 16.55C6.0125 16.7333 6 16.9167 6 17.1V18H2ZM4 6H11C11.4333 5.66667 11.9083 5.41667 12.425 5.25C12.9417 5.08333 13.4667 5 14 5V4H4V6ZM4 10H9C9 9.65 9.0375 9.30833 9.1125 8.975C9.1875 8.64167 9.29167 8.31667 9.425 8H4V10ZM4 14H7.45C7.63333 13.85 7.82917 13.7167 8.0375 13.6C8.24583 13.4833 8.45833 13.375 8.675 13.275V12H4V14ZM2 16V2V5.425V5V16Z", fill: "#06348D" }) }));

package/dist/components/PatientDetailsStep.d.ts

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

package/dist/components/PatientDetailsStep.js

@@ -0,0 +1,76 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { GENDER_OPTIONS, BLOOD_GROUP_OPTIONS, } from "./types";
+import { BUTTON_STYLES, PATIENT_DETAILS_STYLES, CONTAINER_STYLES, } from "./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, }) => {
+    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: {
+                            ...BUTTON_STYLES.primary,
+                            opacity: isFormValid ? 1 : 0.6,
+                        }, disabled: !isFormValid || state.loading, onClick: onSubmit, children: state.loading ? "Booking..." : "Continue" })] })] }));
+};
+const PatientInfoSection = ({ state, dispatch }) => {
+    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: ["Date of Birth ", _jsx("span", { style: { color: "#EF4444" }, children: "*" })] }), _jsx("input", { style: PATIENT_DETAILS_STYLES.input, type: "date", onChange: (e) => {
+                                            const birthDate = new Date(e.target.value);
+                                            const today = new Date();
+                                            const age = today.getFullYear() - birthDate.getFullYear();
+                                            dispatch({
+                                                type: "SET_PATIENT_AGE",
+                                                payload: String(age),
+                                            });
+                                        } })] }), _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({
+                                            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({
+                                            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))) })] })] })] })] })] }));
+};
+const AddressInfoSection = ({ state, dispatch }) => {
+    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/PhoneVerificationStep.d.ts

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

package/dist/components/PhoneVerificationStep.js

@@ -0,0 +1,39 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { COUNTRY_CODES, } from "./types";
+import { BUTTON_STYLES, PHONE_VERIFY_STYLES } from "./styles";
+import { validatePhoneNumber, validateCountryCode } from "./validation";
+import { Select, SelectTrigger, SelectValue, SelectContent, SelectItem, } from "./uiComponents/SelectDropdown";
+export const PhoneVerificationStep = ({ state, dispatch, onSendOtp, onVerifyOtp, onBack, onContinue, }) => {
+    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 to Details" })] })) })] }));
+};
+const PhoneInputSection = ({ countryCode, patientPhone, onCountryCodeChange, onPhoneChange }) => {
+    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 }) => (_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/SuccessStep.d.ts

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