medos-sdk 1.0.1 → 1.0.3

package/dist/components/SuccessStep.js

@@ -0,0 +1,17 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { BUTTON_STYLES, SUCCESS_STYLES, CONTAINER_STYLES } from "./styles";
+import { ConfirmationCheck } from "./Icons/ConfirmationCheck";
+export const SuccessStep = ({ state, onReset }) => {
+    const formattedDate = state.selectedDate
+        ? new Date(state.selectedDate).toLocaleDateString("en-US", {
+            weekday: "long",
+            year: "numeric",
+            month: "long",
+            day: "numeric",
+        })
+        : "";
+    const formattedTime = state.selectedSlot
+        ? state.selectedSlot.startTime
+        : "TBD";
+    return (_jsx("div", { style: CONTAINER_STYLES.section, children: _jsxs("div", { style: SUCCESS_STYLES.container, children: [_jsxs("div", { style: SUCCESS_STYLES.header, children: [_jsx("div", { style: SUCCESS_STYLES.iconContainer, children: _jsx(ConfirmationCheck, {}) }), _jsx("div", { children: "Appointment Confirmed!" })] }), _jsxs("div", { style: SUCCESS_STYLES.detailsContainer, children: [_jsx("div", { style: SUCCESS_STYLES.detailsTitle, children: "Your appointment has been successfully booked" }), _jsxs("div", { style: SUCCESS_STYLES.detailsList, children: [_jsxs("div", { children: [_jsx("strong", { children: "Patient Name:" }), " ", state.patientName] }), _jsxs("div", { children: [_jsx("strong", { children: "Consultation Mode:" }), " ", state.consultationMode] }), _jsxs("div", { children: [_jsx("strong", { children: "Date:" }), " ", formattedDate] }), _jsxs("div", { children: [_jsx("strong", { children: "Time:" }), " ", formattedTime] }), state.selectedSlot && (_jsxs("div", { children: [_jsx("strong", { children: "Duration:" }), " ", state.selectedSlot.duration, " minutes"] })), _jsxs("div", { children: [_jsx("strong", { children: "Charge:" }), " ", state.consultationCharge] })] }), _jsxs("div", { style: SUCCESS_STYLES.confirmationNote, children: ["A confirmation email has been sent to ", state.patientEmail] })] }), _jsx("div", { style: SUCCESS_STYLES.actionContainer, children: _jsx("button", { style: BUTTON_STYLES.primary, onClick: onReset, children: "Book Another Appointment" }) })] }) }));
+};

package/dist/components/custom-calendar.d.ts

@@ -0,0 +1,5 @@
+export declare const CustomCalendarWithDateSelector: ({ selectedDate, onSelect, pastDisabled, }: {
+    selectedDate?: Date;
+    onSelect: (date: Date) => void;
+    pastDisabled?: boolean;
+}) => import("react/jsx-runtime").JSX.Element;

package/dist/components/custom-calendar.js

@@ -0,0 +1,153 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useEffect } from "react";
+import ChevronLeft from "./Icons/ChevronLeft";
+import ChevronRight from "./Icons/ChevronRight";
+const style = `
+.custom-calendar {
+  width: 340px;
+  background-color: #ffffff;
+  border-radius: 8px;
+  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
+  padding: 16px;
+  font-family: Inter, sans-serif;
+}
+.calendar-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 12px;
+}
+.calendar-month {
+  font-size: 14px;
+  font-weight: 600;
+  color: #1e1e1e;
+}
+.calendar-nav {
+  width: 20px;
+  height: 20px;
+  color: #218838; 
+  cursor: pointer;
+  border-radius: 4px;
+  transition: background-color 0.2s;
+}
+.calendar-nav:hover {
+  background-color: #eaf8f0;
+}
+.calendar-days-header {
+  display: grid;
+  grid-template-columns: repeat(7, 1fr);
+  text-align: center;
+  margin-bottom: 6px;
+  font-size: 13px;
+  font-weight: 500;
+  color: #222;
+}
+.calendar-grid {
+  display: grid;
+  grid-template-columns: repeat(7, 1fr);
+  gap: 6px;
+  text-align: center;
+}
+.calendar-day {
+  width: 38px;
+  height: 38px;
+  border: 1px solid transparent;
+  border-radius: 6px;
+  color: #218838;
+  background-color: transparent;
+  font-size: 14px;
+  transition: all 0.2s;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+}
+.calendar-day span {
+  line-height: 1;
+}
+.calendar-day:hover:not(.disabled):not(.selected) {
+  background-color: #218838;
+  color: #ffffff;
+}
+.calendar-day.selected {
+  border: 1px solid #218838;
+  color: #218838;
+  background-color: transparent;
+  font-weight: 600;
+}
+.calendar-day.disabled {
+  color: #b3b3b3;
+  opacity: 0.4;
+  cursor: not-allowed;
+}
+.calendar-dot {
+  font-size: 10px;
+  margin-top: -2px;
+  line-height: 1;
+}
+.calendar-empty {
+  visibility: hidden;
+}
+`;
+export const CustomCalendarWithDateSelector = ({ selectedDate, onSelect, pastDisabled = false, }) => {
+    useEffect(() => {
+        if (!document.getElementById("custom-calendar-style")) {
+            const s = document.createElement("style");
+            s.id = "custom-calendar-style";
+            s.innerHTML = style;
+            document.head.appendChild(s);
+        }
+    }, []);
+    const today = new Date();
+    today.setHours(0, 0, 0, 0);
+    const [currentMonth, setCurrentMonth] = useState(today.getMonth());
+    const [currentYear, setCurrentYear] = useState(today.getFullYear());
+    const daysOfWeek = ["Mo", "Tu", "We", "Th", "Fr", "Sa", "Su"];
+    const months = [
+        "January", "February", "March", "April", "May", "June",
+        "July", "August", "September", "October", "November", "December"
+    ];
+    const getDaysInMonth = (year, month) => {
+        return new Date(year, month + 1, 0).getDate();
+    };
+    const getFirstDayOfMonth = (year, month) => {
+        return new Date(year, month, 1).getDay();
+    };
+    const daysInMonth = getDaysInMonth(currentYear, currentMonth);
+    const firstDayOfMonth = getFirstDayOfMonth(currentYear, currentMonth);
+    const startOffset = (firstDayOfMonth + 6) % 7;
+    const prevMonth = () => {
+        if (currentMonth === 0) {
+            setCurrentMonth(11);
+            setCurrentYear(currentYear - 1);
+        }
+        else {
+            setCurrentMonth(currentMonth - 1);
+        }
+    };
+    const nextMonth = () => {
+        if (currentMonth === 11) {
+            setCurrentMonth(0);
+            setCurrentYear(currentYear + 1);
+        }
+        else {
+            setCurrentMonth(currentMonth + 1);
+        }
+    };
+    const isSameDate = (d1, d2) => {
+        return d1.getFullYear() === d2.getFullYear() &&
+            d1.getMonth() === d2.getMonth() &&
+            d1.getDate() === d2.getDate();
+    };
+    const isBeforeToday = (date) => {
+        const todayStart = new Date(today);
+        todayStart.setHours(0, 0, 0, 0);
+        return date < todayStart;
+    };
+    return (_jsxs("div", { className: "custom-calendar", children: [_jsxs("div", { className: "calendar-header", children: [_jsx(ChevronLeft, { onClick: prevMonth, className: "calendar-nav" }), _jsxs("p", { className: "calendar-month", children: [months[currentMonth], " ", currentYear] }), _jsx(ChevronRight, { onClick: nextMonth, className: "calendar-nav" })] }), _jsx("div", { className: "calendar-days-header", children: daysOfWeek.map((d) => (_jsx("div", { className: "calendar-day-name", children: d }, d))) }), _jsxs("div", { className: "calendar-grid", children: [Array.from({ length: startOffset }).map((_, idx) => (_jsx("div", { className: "calendar-empty" }, `empty-${idx}`))), Array.from({ length: daysInMonth }).map((_, i) => {
+                        const date = new Date(currentYear, currentMonth, i + 1);
+                        const disabled = pastDisabled && isBeforeToday(date);
+                        const isSelected = selectedDate && isSameDate(selectedDate, date);
+                        return (_jsxs("button", { disabled: disabled, onClick: () => onSelect(date), className: `calendar-day ${isSelected ? "selected" : ""} ${disabled ? "disabled" : ""}`, children: [_jsx("span", { children: i + 1 }), isSelected && _jsx("span", { className: "calendar-dot", children: "\u2022" })] }, i + 1));
+                    })] })] }));
+};

package/dist/components/styles.d.ts

@@ -0,0 +1,6 @@
+import React from "react";
+export declare const CONTAINER_STYLES: Record<string, React.CSSProperties>;
+export declare const BUTTON_STYLES: Record<string, React.CSSProperties>;
+export declare const PHONE_VERIFY_STYLES: Record<string, React.CSSProperties>;
+export declare const PATIENT_DETAILS_STYLES: Record<string, React.CSSProperties>;
+export declare const SUCCESS_STYLES: Record<string, React.CSSProperties>;

package/dist/components/styles.js

@@ -0,0 +1,257 @@
+export const CONTAINER_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: {
+        marginLeft: 10,
+        fontSize: 20,
+        fontWeight: 600,
+    },
+    section: { marginTop: 12 },
+    errorMessage: {
+        marginBottom: 12,
+        color: "#ef4444",
+        fontWeight: 600,
+    },
+    actions: {
+        display: "flex",
+        gap: 8,
+        marginTop: 16,
+        justifyContent: "flex-end",
+    },
+};
+export const BUTTON_STYLES = {
+    primary: {
+        background: "#218838",
+        color: "#fff",
+        border: "none",
+        padding: "10px 14px",
+        borderRadius: 8,
+        cursor: "pointer",
+        fontWeight: 600,
+    },
+    secondary: {
+        background: "#fff",
+        color: "#218838",
+        border: "1px solid #218838",
+        padding: "10px 14px",
+        borderRadius: 8,
+        cursor: "pointer",
+    },
+};
+export const PHONE_VERIFY_STYLES = {
+    container: {
+        border: "1px solid #e5e7eb",
+        borderRadius: 12,
+        overflow: "hidden",
+        backgroundColor: "#fff",
+    },
+    header: {
+        padding: "16px 24px",
+        borderBottom: "1px solid #e5e7eb",
+        backgroundColor: "#f9fafb",
+    },
+    title: {
+        margin: 0,
+        fontSize: 18,
+        fontWeight: 600,
+        color: "#111827",
+    },
+    content: { padding: "24px" },
+    label: {
+        display: "block",
+        fontSize: 14,
+        fontWeight: 500,
+        color: "#111827",
+        marginBottom: 8,
+    },
+    phoneInputContainer: { display: "flex", gap: 8 },
+    phoneInput: {
+        flex: 1,
+        padding: "10px 12px",
+        borderRadius: 8,
+        border: "1px solid #e6e9ef",
+        fontSize: 14,
+        outline: "none",
+        color: "#111827",
+        boxSizing: "border-box",
+    },
+    phoneDisplay: {
+        padding: "10px 12px",
+        background: "#f9fafb",
+        borderRadius: 8,
+        fontSize: 14,
+        color: "#374151",
+        fontWeight: 500,
+    },
+    otpInput: {
+        width: "100%",
+        padding: "10px 12px",
+        border: "1px solid #d1d5db",
+        borderRadius: 8,
+        fontSize: 14,
+        outline: "none",
+        color: "#111827",
+        boxSizing: "border-box",
+    },
+    otpHint: {
+        marginTop: 8,
+        fontSize: 12,
+        color: "#6b7280",
+    },
+    successMessage: {
+        marginTop: 20,
+        padding: 16,
+        borderRadius: 8,
+        backgroundColor: "#F6FBF6",
+        border: "1px solid #218838",
+        display: "flex",
+        alignItems: "center",
+        gap: 12,
+    },
+    successIcon: { fontSize: 24, color: "#218838" },
+    successTitle: {
+        fontSize: 14,
+        fontWeight: 600,
+        color: "#218838",
+    },
+    successSubtitle: {
+        fontSize: 12,
+        color: "#6B7280",
+        marginTop: 2,
+    },
+    footer: {
+        padding: "16px 24px",
+        borderTop: "1px solid #e5e7eb",
+        backgroundColor: "#fff",
+        display: "flex",
+        gap: 12,
+        justifyContent: "flex-end",
+    },
+};
+export const PATIENT_DETAILS_STYLES = {
+    sectionCard: {
+        border: "1px solid #E5E7EB",
+        borderRadius: "12px",
+        marginBottom: "24px",
+    },
+    sectionHeader: {
+        backgroundColor: "#F9FAFB",
+        padding: "16px 20px",
+        display: "flex",
+        alignItems: "center",
+        gap: "12px",
+        borderBottom: "1px solid #E5E7EB",
+    },
+    sectionTitle: {
+        fontSize: "18px",
+        fontWeight: 600,
+        margin: 0,
+    },
+    sectionBody: { padding: "24px" },
+    gridRow: {
+        display: "grid",
+        gridTemplateColumns: "1fr 1fr",
+        gap: "20px",
+        marginTop: "20px",
+    },
+    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",
+    },
+    phoneDisplay: { display: "flex", gap: "8px" },
+    phoneCode: {
+        width: "100px",
+        padding: "10px 12px",
+        borderRadius: 8,
+        border: "1px solid #e6e9ef",
+        backgroundColor: "#F9FAFB",
+        fontSize: 14,
+        boxSizing: "border-box",
+    },
+    phoneNumber: {
+        flex: 1,
+        padding: "10px 12px",
+        borderRadius: 8,
+        border: "1px solid #e6e9ef",
+        backgroundColor: "#F9FAFB",
+        fontSize: 14,
+        boxSizing: "border-box",
+    },
+};
+export const SUCCESS_STYLES = {
+    container: {
+        display: "flex",
+        flexDirection: "column",
+        height: "100%",
+    },
+    header: {
+        marginTop: "-16px",
+        alignItems: "center",
+        textAlign: "center",
+        color: "#27903F",
+        fontWeight: 800,
+        fontSize: "18px",
+        marginBottom: "20px",
+    },
+    iconContainer: {
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        padding: "12px 0",
+    },
+    detailsContainer: {
+        display: "flex",
+        flexDirection: "column",
+        alignItems: "center",
+        gap: "12px",
+        textAlign: "center",
+        color: "#27903F",
+    },
+    detailsTitle: { fontWeight: 600, fontSize: "16px" },
+    detailsList: {
+        display: "flex",
+        flexDirection: "column",
+        gap: "4px",
+        fontSize: "14px",
+        width: "100%",
+        maxWidth: "28rem",
+        textAlign: "center",
+    },
+    confirmationNote: {
+        marginTop: "8px",
+        fontSize: "12px",
+        color: "#6B7280",
+    },
+    actionContainer: { marginTop: "24px" },
+};

package/dist/components/types.d.ts

@@ -0,0 +1,182 @@
+import { Doctor, Slot, AddressItem } from "../services/AppointmentService";
+export type AppointmentCalenderProps = {
+    onError?: (err: Error) => void;
+};
+export type PhoneVerificationStepProps = {
+    state: AppointmentState;
+    dispatch: React.Dispatch<AppointmentAction>;
+    onSendOtp: () => Promise<void>;
+    onVerifyOtp: () => Promise<void>;
+    onBack: () => void;
+    onContinue: () => void;
+};
+export type PatientDetailsStepProps = {
+    state: AppointmentState;
+    dispatch: React.Dispatch<AppointmentAction>;
+    onBack: () => void;
+    onSubmit: () => Promise<void>;
+};
+export type SuccessStepProps = {
+    state: AppointmentState;
+    onReset: () => void;
+};
+export type PhoneInputSectionProps = {
+    countryCode: string;
+    patientPhone: string;
+    onCountryCodeChange: (code: string) => void;
+    onPhoneChange: (phone: string) => void;
+};
+export type OtpInputSectionProps = {
+    countryCode: string;
+    patientPhone: string;
+    otpCode: string;
+    otpVerified: boolean;
+    onOtpChange: (code: string) => void;
+};
+export type PatientInfoSectionProps = {
+    state: AppointmentState;
+    dispatch: React.Dispatch<AppointmentAction>;
+};
+export type AddressInfoSectionProps = {
+    state: AppointmentState;
+    dispatch: React.Dispatch<AppointmentAction>;
+};
+export interface AppointmentState {
+    step: number;
+    loading: boolean;
+    error: string | null;
+    workspaceId: number | null;
+    addresses: AddressItem[];
+    addressDoctorsMap: Record<number, Doctor[]>;
+    selectedAddress: number | null;
+    selectedDoctor: number | null;
+    selectedDate: Date;
+    slots: Slot[];
+    selectedSlot: Slot | null;
+    consultationMode: "ONLINE" | "OFFLINE";
+    consultationCharge: string;
+    patientName: string;
+    patientAge: string;
+    patientEmail: string;
+    patientGender: string;
+    bloodGroup: string;
+    patientAddress: string;
+    patientCity: string;
+    patientState: string;
+    patientCountry: string;
+    patientZipcode: string;
+    patientLandmark: string;
+    countryCode: string;
+    patientPhone: string;
+    otpCode: string;
+    otpSent: boolean;
+    otpVerified: boolean;
+    otpSending: boolean;
+    otpVerifying: boolean;
+}
+export type AppointmentAction = {
+    type: "SET_STEP";
+    payload: number;
+} | {
+    type: "SET_LOADING";
+    payload: boolean;
+} | {
+    type: "SET_ERROR";
+    payload: string | null;
+} | {
+    type: "SET_WORKSPACE";
+    payload: {
+        id: number;
+        addresses: AddressItem[];
+    };
+} | {
+    type: "SET_SELECTED_ADDRESS";
+    payload: number | null;
+} | {
+    type: "SET_SELECTED_DOCTOR";
+    payload: number | null;
+} | {
+    type: "SET_SELECTED_DATE";
+    payload: Date;
+} | {
+    type: "SET_SLOTS";
+    payload: Slot[];
+} | {
+    type: "SET_SELECTED_SLOT";
+    payload: Slot | null;
+} | {
+    type: "SET_CONSULTATION_MODE";
+    payload: "ONLINE" | "OFFLINE";
+} | {
+    type: "SET_CONSULTATION_CHARGE";
+    payload: string;
+} | {
+    type: "SET_PATIENT_NAME";
+    payload: string;
+} | {
+    type: "SET_PATIENT_AGE";
+    payload: string;
+} | {
+    type: "SET_PATIENT_EMAIL";
+    payload: string;
+} | {
+    type: "SET_PATIENT_GENDER";
+    payload: string;
+} | {
+    type: "SET_BLOOD_GROUP";
+    payload: string;
+} | {
+    type: "SET_PATIENT_ADDRESS";
+    payload: string;
+} | {
+    type: "SET_PATIENT_CITY";
+    payload: string;
+} | {
+    type: "SET_PATIENT_STATE";
+    payload: string;
+} | {
+    type: "SET_PATIENT_COUNTRY";
+    payload: string;
+} | {
+    type: "SET_PATIENT_ZIPCODE";
+    payload: string;
+} | {
+    type: "SET_PATIENT_LANDMARK";
+    payload: string;
+} | {
+    type: "SET_COUNTRY_CODE";
+    payload: string;
+} | {
+    type: "SET_PATIENT_PHONE";
+    payload: string;
+} | {
+    type: "SET_OTP_CODE";
+    payload: string;
+} | {
+    type: "SET_OTP_SENT";
+    payload: boolean;
+} | {
+    type: "SET_OTP_VERIFIED";
+    payload: boolean;
+} | {
+    type: "SET_OTP_SENDING";
+    payload: boolean;
+} | {
+    type: "SET_OTP_VERIFYING";
+    payload: boolean;
+} | {
+    type: "RESET_FORM";
+};
+export declare const COUNTRY_CODES: {
+    code: string;
+    label: string;
+}[];
+export declare const GENDER_OPTIONS: {
+    value: string;
+    label: string;
+}[];
+export declare const BLOOD_GROUP_OPTIONS: {
+    value: string;
+    label: string;
+}[];
+export declare const INITIAL_STATE: AppointmentState;

package/dist/components/types.js

@@ -0,0 +1,55 @@
+export const COUNTRY_CODES = [
+    { code: "+91", label: "🇮🇳 +91" },
+    { code: "+1", label: "🇺🇸 +1" },
+    { code: "+44", label: "🇬🇧 +44" },
+    { code: "+86", label: "🇨🇳 +86" },
+    { code: "+81", label: "🇯🇵 +81" },
+];
+export const GENDER_OPTIONS = [
+    { value: "MALE", label: "Male" },
+    { value: "FEMALE", label: "Female" },
+    { value: "OTHER", label: "Other" },
+];
+export const BLOOD_GROUP_OPTIONS = [
+    { value: "A+", label: "A+" },
+    { value: "A-", label: "A-" },
+    { value: "B+", label: "B+" },
+    { value: "B-", label: "B-" },
+    { value: "AB+", label: "AB+" },
+    { value: "AB-", label: "AB-" },
+    { value: "O+", label: "O+" },
+    { value: "O-", label: "O-" },
+];
+export const INITIAL_STATE = {
+    step: 0,
+    loading: false,
+    error: null,
+    workspaceId: null,
+    addresses: [],
+    addressDoctorsMap: {},
+    selectedAddress: null,
+    selectedDoctor: null,
+    selectedDate: new Date(),
+    slots: [],
+    selectedSlot: null,
+    consultationMode: "OFFLINE",
+    consultationCharge: "",
+    patientName: "",
+    patientAge: "",
+    patientEmail: "",
+    patientGender: "",
+    bloodGroup: "",
+    patientAddress: "",
+    patientCity: "",
+    patientState: "",
+    patientCountry: "",
+    patientZipcode: "",
+    patientLandmark: "",
+    countryCode: "+91",
+    patientPhone: "",
+    otpCode: "",
+    otpSent: false,
+    otpVerified: false,
+    otpSending: false,
+    otpVerifying: false,
+};

package/dist/components/ui/select.d.ts

@@ -0,0 +1,10 @@
+import * as React from "react";
+export interface SelectProps extends React.SelectHTMLAttributes<HTMLSelectElement> {
+    children: React.ReactNode;
+}
+declare const Select: React.ForwardRefExoticComponent<SelectProps & React.RefAttributes<HTMLSelectElement>>;
+export interface SelectOptionProps extends React.OptionHTMLAttributes<HTMLOptionElement> {
+    children: React.ReactNode;
+}
+declare const SelectOption: React.ForwardRefExoticComponent<SelectOptionProps & React.RefAttributes<HTMLOptionElement>>;
+export { Select, SelectOption };