@arquimedes.co/eureka-forms 3.0.62 → 3.0.63

package/dist/Shared/ErkBookingPicker/ErkBookingPicker.stories.js

@@ -0,0 +1,117 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useState } from 'react';
+import ErkBookingPicker from './ErkBookingPicker';
+import { withFormStepProviders } from '../../FormSteps/@StoryDecorators/FormStepDecorator';
+import { BookingMode, PersonSelectionMode } from '../../@Types/BookingFormStep';
+const SLOTS = [
+    { id: 's-1', startTime: '09:00', endTime: '09:50', available: true },
+    { id: 's-2', startTime: '10:00', endTime: '10:50', available: false },
+    { id: 's-3', startTime: '11:00', endTime: '11:50', available: true },
+    { id: 's-4', startTime: '14:00', endTime: '14:50', available: true },
+    { id: 's-5', startTime: '15:00', endTime: '15:50', available: false },
+    { id: 's-6', startTime: '16:00', endTime: '16:50', available: true },
+];
+function mockFetchSlots() {
+    return new Promise((resolve) => setTimeout(() => resolve(SLOTS), 300));
+}
+const PERSONS = [
+    { id: 'p-1', name: 'María González', role: 'Asesora' },
+    { id: 'p-2', name: 'Carlos Ruiz', role: 'Técnico' },
+];
+/** Controlled wrapper so the picker's value is interactive in Storybook. */
+function Interactive(args) {
+    const [value, setValue] = useState(args.value);
+    return (_jsx("div", { style: { maxWidth: 660 }, children: _jsx(ErkBookingPicker, { ...args, value: value, onChange: setValue }) }));
+}
+const meta = {
+    component: ErkBookingPicker,
+    tags: ['autodocs'],
+    decorators: [withFormStepProviders],
+    render: Interactive,
+    args: {
+        // Supplied by the Interactive wrapper; declared here so stories don't each repeat it.
+        onChange: () => undefined,
+    },
+};
+export default meta;
+/** Full flow: person → date → time. */
+export const WithPersonSelection = {
+    args: {
+        value: null,
+        label: 'Seleccionar cita',
+        description: 'Elige profesional, día y hora.',
+        durationMinutes: 50,
+        personSelectionMode: PersonSelectionMode.REQUIRED,
+        persons: PERSONS,
+        fetchSlots: mockFetchSlots,
+    },
+};
+/** Optional person — adds a "Cualquiera" option. */
+export const PersonOptional = {
+    args: {
+        value: null,
+        label: 'Reservar turno',
+        description: 'Puedes elegir o dejar que asignemos.',
+        durationMinutes: 30,
+        personSelectionMode: PersonSelectionMode.OPTIONAL,
+        persons: PERSONS,
+        fetchSlots: mockFetchSlots,
+    },
+};
+/** No person selection → straight to date + time. */
+export const NoPerson = {
+    args: {
+        value: null,
+        label: 'Seleccionar horario',
+        description: 'Elige tu día y hora.',
+        durationMinutes: 60,
+        personSelectionMode: PersonSelectionMode.NONE,
+        fetchSlots: mockFetchSlots,
+    },
+};
+/** Extra contact step (collectContact). */
+export const WithContact = {
+    args: {
+        value: null,
+        label: 'Agendar cita',
+        description: 'Elige y déjanos tus datos.',
+        durationMinutes: 45,
+        personSelectionMode: PersonSelectionMode.OPTIONAL,
+        persons: PERSONS,
+        collectContact: true,
+        fetchSlots: mockFetchSlots,
+    },
+};
+/** Full config: contact data, buffer, lock notice and in-person mode. */
+export const Complete = {
+    args: {
+        value: null,
+        label: 'Agendar cita',
+        description: 'Soporte postventa',
+        durationMinutes: 60,
+        bufferMinutes: 10,
+        bookingMode: BookingMode.IN_PERSON,
+        temporaryLockMinutes: 15,
+        personSelectionMode: PersonSelectionMode.OPTIONAL,
+        persons: PERSONS,
+        collectContact: true,
+        fetchSlots: mockFetchSlots,
+    },
+};
+/** Already booked / read-only summary. */
+export const ReadOnly = {
+    args: {
+        readOnly: true,
+        label: 'Cita confirmada',
+        durationMinutes: 50,
+        value: {
+            type: 'BOOKING_VALUE',
+            slotId: 's-3',
+            date: '2026-07-02',
+            startTime: '11:00',
+            endTime: '11:50',
+            personName: 'María González',
+            status: 'CONFIRMED',
+        },
+    },
+};

package/dist/Shared/ErkBookingPicker/ErkBookingPicker.stories.test.d.ts

@@ -0,0 +1 @@
+import '@testing-library/jest-dom';

package/dist/Shared/ErkBookingPicker/ErkBookingPicker.stories.test.js

@@ -0,0 +1,49 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { render, screen, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { composeStories } from '@storybook/react-vite';
+import { describe, expect, it } from 'vitest';
+import '@testing-library/jest-dom';
+import { format } from 'date-fns';
+import * as stories from './ErkBookingPicker.stories';
+const { Complete } = composeStories(stories);
+function clickableToday() {
+    // El número de hoy puede aparecer también como día de un mes adyacente (deshabilitado).
+    const candidates = screen.getAllByRole('button', { name: format(new Date(), 'd') });
+    const enabled = candidates.find((b) => !b.disabled);
+    if (!enabled)
+        throw new Error('No selectable day found for today');
+    return enabled;
+}
+describe('ErkBookingPicker Complete story', () => {
+    it('opens the wizard in a modal, completes it, and confirming closes the modal leaving the summary', async () => {
+        const user = userEvent.setup();
+        render(_jsx(Complete, {}));
+        // Trigger → modal con el wizard
+        await user.click(screen.getByRole('button', { name: 'Agendar cita' }));
+        expect(await screen.findByRole('heading', { name: '¿Con quién quieres agendar?' })).toBeInTheDocument();
+        // Persona
+        await user.click(screen.getByText('María González'));
+        await user.click(screen.getByRole('button', { name: 'Siguiente' }));
+        // Día
+        await screen.findByRole('heading', { name: 'Elige un día' });
+        await user.click(clickableToday());
+        await user.click(screen.getByRole('button', { name: 'Siguiente' }));
+        // Hora (los slots del mock llegan con delay)
+        await screen.findByRole('heading', { name: 'Elige una hora' });
+        await user.click(await screen.findByRole('button', { name: '09:00' }));
+        await user.click(screen.getByRole('button', { name: 'Siguiente' }));
+        // Confirmar
+        await screen.findByRole('heading', { name: 'Revisa y confirma tu cita' });
+        await user.type(screen.getByLabelText('Nombre'), 'Juan Pérez');
+        await user.type(screen.getByLabelText('Correo'), 'juan@correo.com');
+        await user.click(screen.getByRole('button', { name: 'Confirmar cita' }));
+        // El modal se cierra y queda el resumen compacto con opción de cambiar
+        await waitFor(() => expect(screen.queryByRole('heading', { name: 'Revisa y confirma tu cita' })).not.toBeInTheDocument());
+        expect(screen.getByText(/María González .* 09:00–09:50/)).toBeInTheDocument();
+        expect(screen.getByRole('button', { name: 'Cambiar' })).toBeInTheDocument();
+        // "Cambiar" limpia el valor y vuelve al botón de agendar
+        await user.click(screen.getByRole('button', { name: 'Cambiar' }));
+        expect(screen.getByRole('button', { name: 'Agendar cita' })).toBeInTheDocument();
+    });
+});

package/dist/Shared/ErkBookingPicker/ErkBookingPicker.test.d.ts

@@ -0,0 +1 @@
+import '@testing-library/jest-dom';

package/dist/Shared/ErkBookingPicker/ErkBookingPicker.test.js

@@ -0,0 +1,107 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { describe, expect, it, vi } from 'vitest';
+import '@testing-library/jest-dom';
+import { format } from 'date-fns';
+import ErkBookingPicker from './ErkBookingPicker';
+import MaterialProviders from '../../Utils/MaterialProviders';
+import InternalFormStyle from '../../constants/InternalFormStyle';
+import { PersonSelectionMode } from '../../@Types/BookingFormStep';
+const SLOTS = [
+    { id: 's-1', startTime: '09:00', endTime: '09:50', available: true },
+    { id: 's-2', startTime: '10:00', endTime: '10:50', available: false },
+    { id: 's-3', startTime: '11:00', endTime: '11:50', available: true },
+];
+const PERSONS = [
+    { id: 'p-1', name: 'María González', role: 'Asesora' },
+    { id: 'p-2', name: 'Carlos Ruiz', role: 'Técnico' },
+];
+function clickableToday() {
+    // El número de hoy puede aparecer también como día de un mes adyacente (deshabilitado).
+    const candidates = screen.getAllByRole('button', { name: format(new Date(), 'd') });
+    const enabled = candidates.find((b) => !b.disabled);
+    if (!enabled)
+        throw new Error('No selectable day found for today');
+    return enabled;
+}
+describe('ErkBookingPicker (wizard)', () => {
+    it('drives the full flow: person → day → hour → confirm', async () => {
+        const user = userEvent.setup();
+        const onChange = vi.fn();
+        const fetchSlots = vi.fn(() => Promise.resolve(SLOTS));
+        render(_jsx(MaterialProviders, { formStyle: InternalFormStyle, children: _jsx(ErkBookingPicker, { value: null, onChange: onChange, label: "Agendar cita", durationMinutes: 50, personSelectionMode: PersonSelectionMode.OPTIONAL, persons: PERSONS, collectContact: true, fetchSlots: fetchSlots }) }));
+        // La tarjeta de entrada abre el wizard en un modal
+        await user.click(screen.getByRole('button', { name: 'Agendar cita' }));
+        // Paso 1: persona — Siguiente bloqueado hasta elegir
+        expect(await screen.findByRole('heading', { name: '¿Con quién quieres agendar?' })).toBeInTheDocument();
+        const next = screen.getByRole('button', { name: 'Siguiente' });
+        expect(next).toBeDisabled();
+        await user.click(screen.getByText('María González'));
+        expect(next).toBeEnabled();
+        await user.click(next);
+        // Paso 2: día
+        expect(await screen.findByRole('heading', { name: 'Elige un día' })).toBeInTheDocument();
+        expect(screen.getByRole('button', { name: 'Siguiente' })).toBeDisabled();
+        await user.click(clickableToday());
+        await user.click(screen.getByRole('button', { name: 'Siguiente' }));
+        // Paso 3: hora — slots del fetch; ocupados deshabilitados
+        expect(await screen.findByRole('heading', { name: 'Elige una hora' })).toBeInTheDocument();
+        expect(fetchSlots).toHaveBeenCalledWith({ personId: 'p-1', date: format(new Date(), 'yyyy-MM-dd') });
+        const taken = await screen.findByRole('button', { name: '10:00' });
+        expect(taken).toBeDisabled();
+        await user.click(screen.getByRole('button', { name: '09:00' }));
+        await user.click(screen.getByRole('button', { name: 'Siguiente' }));
+        // Paso 4: confirmar — datos de contacto en la barra y CTA
+        expect(await screen.findByRole('heading', { name: 'Revisa y confirma tu cita' })).toBeInTheDocument();
+        await user.type(screen.getByLabelText('Nombre'), 'Juan Pérez');
+        await user.type(screen.getByLabelText('Correo'), 'juan@correo.com');
+        await user.click(screen.getByRole('button', { name: 'Confirmar cita' }));
+        expect(onChange).toHaveBeenCalledWith({
+            type: 'BOOKING_VALUE',
+            slotId: 's-1',
+            date: format(new Date(), 'yyyy-MM-dd'),
+            startTime: '09:00',
+            endTime: '09:50',
+            personId: 'p-1',
+            personName: 'María González',
+            contactName: 'Juan Pérez',
+            contactEmail: 'juan@correo.com',
+            status: 'PENDING',
+        });
+    });
+    it('skips the person step when personSelectionMode is NONE', async () => {
+        const user = userEvent.setup();
+        render(_jsx(MaterialProviders, { formStyle: InternalFormStyle, children: _jsx(ErkBookingPicker, { value: null, onChange: () => { }, label: "Agendar cita", durationMinutes: 30, personSelectionMode: PersonSelectionMode.NONE, fetchSlots: () => Promise.resolve(SLOTS) }) }));
+        await user.click(screen.getByRole('button', { name: 'Agendar cita' }));
+        expect(await screen.findByRole('heading', { name: 'Elige un día' })).toBeInTheDocument();
+        expect(screen.queryByText('¿Con quién quieres agendar?')).not.toBeInTheDocument();
+        expect(screen.queryByText('Persona')).not.toBeInTheDocument();
+    });
+    it('allows navigating back through the breadcrumb without losing the selection', async () => {
+        const user = userEvent.setup();
+        render(_jsx(MaterialProviders, { formStyle: InternalFormStyle, children: _jsx(ErkBookingPicker, { value: null, onChange: () => { }, label: "Agendar cita", durationMinutes: 50, personSelectionMode: PersonSelectionMode.REQUIRED, persons: PERSONS, fetchSlots: () => Promise.resolve(SLOTS) }) }));
+        await user.click(screen.getByRole('button', { name: 'Agendar cita' }));
+        await user.click(await screen.findByText('Carlos Ruiz'));
+        await user.click(screen.getByRole('button', { name: 'Siguiente' }));
+        expect(await screen.findByRole('heading', { name: 'Elige un día' })).toBeInTheDocument();
+        // Volver por el breadcrumb: el paso "Persona" completado es clicable
+        await user.click(screen.getByRole('button', { name: /Persona/ }));
+        expect(await screen.findByRole('heading', { name: '¿Con quién quieres agendar?' })).toBeInTheDocument();
+        // La selección se mantiene y permite avanzar de nuevo
+        expect(screen.getByRole('button', { name: 'Siguiente' })).toBeEnabled();
+    });
+    it('renders the compact summary when a value exists', () => {
+        render(_jsx(MaterialProviders, { formStyle: InternalFormStyle, children: _jsx(ErkBookingPicker, { value: {
+                    type: 'BOOKING_VALUE',
+                    slotId: 's-3',
+                    date: '2026-07-02',
+                    startTime: '11:00',
+                    endTime: '11:50',
+                    personName: 'María González',
+                    status: 'CONFIRMED',
+                }, onChange: () => { }, label: "Cita confirmada", durationMinutes: 50 }) }));
+        expect(screen.getByText(/María González .* 11:00–11:50/)).toBeInTheDocument();
+        expect(screen.getByRole('button', { name: 'Cambiar' })).toBeInTheDocument();
+    });
+});

package/dist/Shared/ErkDatePicker/ErkDatePicker.js

@@ -2,11 +2,9 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import React, { useMemo } from 'react';
 import { format as dateFnsFormat, isValid } from 'date-fns';
 import { InputAdornment, styled, Dialog as MuiDialog } from '@mui/material';
-import { MobileDatePicker as MuiDatePicker, MobileDateTimePicker as MuiDateTimePicker, DatePickerToolbar as MuiDatePickerToolbar, DateTimePickerToolbar as MuiDateTimePickerToolbar, usePickerContext, } from '@mui/x-date-pickers';
-import { PickerDay as MuiPickerDay } from '@mui/x-date-pickers/PickerDay';
+import { MobileDatePicker as MuiDatePicker, MobileDateTimePicker as MuiDateTimePicker, DatePickerToolbar as MuiDatePickerToolbar, DateTimePickerToolbar as MuiDateTimePickerToolbar, usePickerContext, PickerDay as MuiPickerDay, renderTimeViewClock, } from '@mui/x-date-pickers';
 import { StyledTextField } from '../ErkTextField/ErkTextField';
 import CalendarIcon from '../../Icons/CalendarIcon';
-import { renderTimeViewClock } from '@mui/x-date-pickers/timeViewRenderers';
 const StyledDateTimePicker = styled(MuiDateTimePicker, {
     shouldForwardProp: (propName) => propName !== 'size',
 })(({ disabled, readOnly, size }) => ({

package/dist/Shared/ErkDateRangePicker/ErkDateRangePicker.d.ts

@@ -1,7 +1,6 @@
 import React from 'react';
-import { MobileDateRangePickerProps as MuiDateRangePickerProps } from '@mui/x-date-pickers-pro/MobileDateRangePicker';
-import { DateRange } from '@mui/x-date-pickers-pro';
-import { PickersShortcutsItem } from '@mui/x-date-pickers/PickersShortcuts';
+import { PickersShortcutsItem } from '@mui/x-date-pickers';
+import { MobileDateRangePickerProps as MuiDateRangePickerProps, DateRange } from '@mui/x-date-pickers-pro';
 import { ErkTextFieldProps } from '../ErkTextField/ErkTextField';
 interface ErkDateRangePickerProps extends Omit<MuiDateRangePickerProps, 'ref' | 'onChange' | 'value' | 'slotProps'>, Pick<ErkTextFieldProps, 'error' | 'required' | 'helperText' | 'size'> {
     onChange?: (dateRange: DateRange<Date>) => void;

package/dist/Shared/ErkDateRangePicker/ErkDateRangePicker.js

@@ -2,8 +2,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import React, { useMemo } from 'react';
 import { InputAdornment, styled, Dialog as MuiDialog } from '@mui/material';
 import { DatePickerToolbar as MuiDatePickerToolbar, usePickerContext, } from '@mui/x-date-pickers';
-import { MobileDateRangePicker as MuiDateRangePicker, } from '@mui/x-date-pickers-pro/MobileDateRangePicker';
-import { DateRangePickerDay as MuiDateRangePickerDay } from '@mui/x-date-pickers-pro';
+import { MobileDateRangePicker as MuiDateRangePicker, DateRangePickerDay as MuiDateRangePickerDay, } from '@mui/x-date-pickers-pro';
 import { format, isValid } from 'date-fns';
 import { StyledTextField } from '../ErkTextField/ErkTextField';
 import CalendarIcon from '../../Icons/CalendarIcon';

package/dist/Shared/ErkIconButton/ErkIconButton.d.ts

@@ -0,0 +1,17 @@
+import React from 'react';
+export interface ErkIconButtonProps {
+    /** Tooltip y nombre accesible del botón. */
+    title: string;
+    onClick?: () => void;
+    disabled?: boolean;
+    /** Muestra un spinner en lugar del icono (y deshabilita el botón). */
+    loading?: boolean;
+    children: React.ReactNode;
+    className?: string;
+}
+/**
+ * Botón de icono de la casa: cuadrado redondeado con la misma altura y borde
+ * que los inputs del form (theming vía variables --eureka-*), con tooltip.
+ */
+declare function ErkIconButton({ title, onClick, disabled, loading, children, className, }: ErkIconButtonProps): JSX.Element;
+export default ErkIconButton;

package/dist/Shared/ErkIconButton/ErkIconButton.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { CircularProgress, Tooltip } from '@mui/material';
+import styles from './ErkIconButton.module.css';
+/**
+ * Botón de icono de la casa: cuadrado redondeado con la misma altura y borde
+ * que los inputs del form (theming vía variables --eureka-*), con tooltip.
+ */
+function ErkIconButton({ title, onClick, disabled = false, loading = false, children, className, }) {
+    return (_jsx(Tooltip, { title: title, children: _jsx("span", { className: styles.wrap, children: _jsx("button", { type: "button", "aria-label": title, disabled: disabled || loading, className: className ? `${styles.button} ${className}` : styles.button, onClick: onClick, children: loading ? _jsx(CircularProgress, { size: 16 }) : children }) }) }));
+}
+export default ErkIconButton;

package/dist/Shared/ErkIconButton/ErkIconButton.module.css

@@ -0,0 +1,41 @@
+.wrap {
+    display: inline-flex;
+    flex-shrink: 0;
+}
+
+/* Mismo alto, radio y borde que los inputs del form (ErkTextField small) */
+.button {
+    height: 31px;
+    width: 31px;
+    box-sizing: border-box;
+    border: 1px solid var(--eureka-outline, #b8b8b8);
+    border-radius: 10px;
+    background-color: var(--eureka-bg, #fff);
+    color: var(--eureka-text, #293241);
+    display: grid;
+    place-items: center;
+    padding: 0;
+    cursor: pointer;
+    transition: all 0.2s ease-in-out;
+}
+
+.button svg {
+    width: 18px;
+    height: 18px;
+}
+
+.button:hover:not(:disabled) {
+    background-color: rgba(0, 0, 0, 0.04);
+    border-color: var(--eureka-primary, #3d5a7f);
+    color: var(--eureka-primary, #3d5a7f);
+}
+
+.button:focus-visible {
+    outline: 2px solid var(--eureka-primary, #3d5a7f);
+    outline-offset: 1px;
+}
+
+.button:disabled {
+    opacity: 0.5;
+    cursor: default;
+}

package/dist/Shared/ErkLocationField/ErkLocationField.d.ts

@@ -0,0 +1,24 @@
+import React from 'react';
+import { LocationInputMode, LocationStep, LocationStepValue } from '../../@Types/LocationFormStep';
+export interface ErkLocationFieldProps {
+    value?: LocationStepValue | null;
+    onChange: (value: LocationStepValue | null) => void;
+    allowedModes: LocationInputMode[];
+    defaultMode?: LocationInputMode;
+    addressFields?: LocationStep['addressFields'];
+    /** ISO-2 para acotar el buscador (ej. ['co']). */
+    regionCodes?: string[];
+    error?: boolean;
+    helperText?: string | null;
+    required?: boolean;
+    readOnly?: boolean;
+    inputRef?: React.Ref<HTMLInputElement>;
+}
+/**
+ * Campo de ubicación: una sola fila con el buscador de direcciones (Base UI +
+ * Google Places) y botones de acción — GPS y edición manual (en modal). Al
+ * seleccionar, el campo muestra la dirección con opciones de editar/limpiar.
+ * La config por campo (fijo / omitir) se aplica a todos los modos.
+ */
+declare function ErkLocationField({ value, onChange, allowedModes, addressFields, regionCodes, error, helperText, required, readOnly, inputRef, }: ErkLocationFieldProps): JSX.Element;
+export default ErkLocationField;

package/dist/Shared/ErkLocationField/ErkLocationField.js

@@ -0,0 +1,128 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useState } from 'react';
+import { Dialog, DialogActions, DialogContent, DialogTitle } from '@mui/material';
+import { AddressFieldMode, LocationInputMode, } from '../../@Types/LocationFormStep';
+import ErkAddressAutocomplete from '../ErkAddressAutocomplete/ErkAddressAutocomplete';
+import { reverseGeocode } from '../ErkAddressAutocomplete/googlePlaces';
+import { applyAddressFields, fieldConfig } from './addressFields';
+import ErkTextField from '../ErkTextField/ErkTextField';
+import ErkButton from '../ErkButton/ErkButton';
+import ErkIconButton from '../ErkIconButton/ErkIconButton';
+import LocationIcon from '../../Icons/LocationIcon';
+import EditIcon from '../../Icons/EditIcon';
+import CloseIcon from '../../Icons/CloseIcon';
+import styles from './ErkLocationField.module.css';
+/** Claves que el formulario manual exige (si no están omitidas ni fijas). */
+const MANUAL_REQUIRED_KEYS = ['street', 'city', 'country'];
+/** Dirección legible a partir del desglose, en el orden natural de una dirección. */
+function composeAddress(detail) {
+    return [
+        detail.street,
+        detail.streetNumber,
+        detail.unit ? `Apto/Int ${detail.unit}` : '',
+        detail.neighborhood,
+        detail.city,
+        detail.state,
+        detail.country,
+    ]
+        .filter(Boolean)
+        .join(', ');
+}
+/**
+ * Campo de ubicación: una sola fila con el buscador de direcciones (Base UI +
+ * Google Places) y botones de acción — GPS y edición manual (en modal). Al
+ * seleccionar, el campo muestra la dirección con opciones de editar/limpiar.
+ * La config por campo (fijo / omitir) se aplica a todos los modos.
+ */
+function ErkLocationField({ value, onChange, allowedModes, addressFields, regionCodes = ['co'], error = false, helperText, required = false, readOnly = false, inputRef, }) {
+    const apiKey = import.meta.env.VITE_GOOGLE_MAPS_API_KEY ?? '';
+    const canGoogle = allowedModes.includes(LocationInputMode.GOOGLE_PLACES);
+    const canGps = allowedModes.includes(LocationInputMode.GPS);
+    const canManual = allowedModes.includes(LocationInputMode.MANUAL);
+    const [gpsLoading, setGpsLoading] = useState(false);
+    const [gpsError, setGpsError] = useState(null);
+    const [manualOpen, setManualOpen] = useState(false);
+    const [manualDetail, setManualDetail] = useState({});
+    const handleGoogle = useCallback((resolved) => {
+        onChange({ ...resolved, addressDetail: applyAddressFields(resolved.addressDetail ?? {}, addressFields) });
+    }, [onChange, addressFields]);
+    const handleGps = useCallback(() => {
+        if (!navigator.geolocation) {
+            setGpsError('La geolocalización no es compatible con este navegador.');
+            return;
+        }
+        setGpsLoading(true);
+        setGpsError(null);
+        navigator.geolocation.getCurrentPosition((position) => {
+            const lat = position.coords.latitude;
+            const lng = position.coords.longitude;
+            void reverseGeocode(apiKey, lat, lng)
+                .then(({ address, addressDetail }) => {
+                onChange({
+                    source: LocationInputMode.GPS,
+                    latitude: lat,
+                    longitude: lng,
+                    address: address ?? `${lat.toFixed(6)}, ${lng.toFixed(6)}`,
+                    addressDetail: applyAddressFields(addressDetail, addressFields),
+                });
+            })
+                .finally(() => setGpsLoading(false));
+        }, (err) => {
+            let message = 'No se pudo obtener la ubicación GPS.';
+            if (err.code === err.PERMISSION_DENIED) {
+                message =
+                    'Permiso denegado para acceder a la ubicación. Asegúrate de habilitar los permisos en tu navegador y en los Ajustes del Sistema (Privacidad y seguridad > Localización).';
+            }
+            else if (err.code === err.TIMEOUT) {
+                message =
+                    'Tiempo de espera agotado al obtener la ubicación. Si estás en Mac, asegúrate de activar el Wi-Fi para ayudar a la localización, o introduce la dirección manualmente.';
+            }
+            setGpsError(message);
+            setGpsLoading(false);
+        }, { enableHighAccuracy: false, timeout: 15000, maximumAge: 300000 });
+    }, [apiKey, onChange, addressFields]);
+    const openManual = useCallback(() => {
+        setManualDetail(value?.addressDetail ?? {});
+        setManualOpen(true);
+    }, [value]);
+    const manualFieldValue = useCallback((key) => {
+        const config = fieldConfig(addressFields, key);
+        if (config.mode === AddressFieldMode.FIXED)
+            return config.fixedValue ?? '';
+        return manualDetail[key] ?? '';
+    }, [addressFields, manualDetail]);
+    const canSaveManual = MANUAL_REQUIRED_KEYS.every((key) => {
+        const config = fieldConfig(addressFields, key);
+        if (config.mode === AddressFieldMode.OMIT)
+            return true;
+        if (config.mode === AddressFieldMode.FIXED)
+            return !!config.fixedValue;
+        return !!manualDetail[key];
+    });
+    const saveManual = () => {
+        if (!canSaveManual)
+            return;
+        const detail = applyAddressFields(manualDetail, addressFields);
+        onChange({ source: LocationInputMode.MANUAL, address: composeAddress(detail), addressDetail: detail });
+        setManualOpen(false);
+    };
+    const clearValue = () => {
+        onChange(null);
+        setGpsError(null);
+    };
+    const manualField = (key, label, requiredField = false) => {
+        const config = fieldConfig(addressFields, key);
+        if (config.mode === AddressFieldMode.OMIT)
+            return null;
+        const fixed = config.mode === AddressFieldMode.FIXED;
+        return (_jsx(ErkTextField, { label: fixed ? `${label} (fijo)` : label, value: manualFieldValue(key), readOnly: fixed, required: requiredField && !fixed, onChange: (text) => setManualDetail((detail) => ({ ...detail, [key]: text || undefined })) }));
+    };
+    // Vista de solo lectura: tarjeta con el resumen de la ubicación
+    if (readOnly) {
+        return (_jsx("div", { className: styles.readOnlyContainer, children: _jsxs("div", { className: styles.readOnlyCard, children: [_jsx("div", { className: styles.readOnlyIcon, children: _jsx(LocationIcon, { fill: "var(--eureka-primary)" }) }), _jsxs("div", { className: styles.readOnlyDetails, children: [value?.name && _jsx("span", { className: styles.readOnlyName, children: value.name }), _jsx("span", { className: styles.readOnlyAddress, children: value?.address ?? 'Ubicación no proporcionada' }), value?.latitude !== undefined && value?.longitude !== undefined && (_jsxs("span", { className: styles.readOnlyCoords, children: ["Coordenadas: ", value.latitude.toFixed(6), ", ", value.longitude.toFixed(6)] }))] })] }) }));
+    }
+    return (_jsxs("div", { className: styles.container, children: [_jsx("div", { className: styles.inputRow, children: value?.address ? (_jsxs(_Fragment, { children: [_jsx("div", { className: styles.grow, children: _jsx("input", { ref: inputRef, className: error ? `${styles.plainInput} ${styles.plainInputError}` : styles.plainInput, value: value.address, readOnly: true, "aria-label": "Ubicaci\u00F3n seleccionada" }) }), canManual && (_jsx(ErkIconButton, { title: "Editar direcci\u00F3n manualmente", onClick: openManual, children: _jsx(EditIcon, { fill: "currentColor" }) })), _jsx(ErkIconButton, { title: "Limpiar selecci\u00F3n", onClick: clearValue, children: _jsx(CloseIcon, { fill: "currentColor" }) })] })) : (_jsxs(_Fragment, { children: [_jsx("div", { className: styles.grow, children: canGoogle ? (_jsx(ErkAddressAutocomplete, { value: value, onChange: handleGoogle, regionCodes: regionCodes, error: error, required: required, inputRef: inputRef })) : canManual ? (_jsx("input", { ref: inputRef, className: error ? `${styles.plainInput} ${styles.plainInputError}` : styles.plainInput, placeholder: "Ingresa una ubicaci\u00F3n...", value: value?.address ?? '', required: required, onChange: (e) => onChange(e.target.value
+                                    ? { source: LocationInputMode.MANUAL, address: e.target.value }
+                                    : null) })) : (_jsx("input", { ref: inputRef, className: error ? `${styles.plainInput} ${styles.plainInputError}` : styles.plainInput, placeholder: "Usa el bot\u00F3n para obtener tu ubicaci\u00F3n", value: "", readOnly: true })) }), canGps && (_jsx(ErkIconButton, { title: "Obtener ubicaci\u00F3n por GPS", loading: gpsLoading, onClick: handleGps, children: _jsx(LocationIcon, { fill: "currentColor" }) })), canManual && (_jsx(ErkIconButton, { title: "Ingresar direcci\u00F3n manualmente", onClick: openManual, children: _jsx(EditIcon, { fill: "currentColor" }) }))] })) }), (gpsError ?? helperText) && (_jsx("div", { className: error || gpsError ? styles.errorText : styles.helperText, children: gpsError ?? helperText })), _jsxs(Dialog, { open: manualOpen, onClose: () => setManualOpen(false), maxWidth: "sm", fullWidth: true, slotProps: { paper: { className: styles.dialogPaper } }, children: [_jsx(DialogTitle, { className: styles.dialogTitle, children: "Ingresar Direcci\u00F3n" }), _jsx(DialogContent, { className: styles.dialogContent, children: _jsxs("div", { className: styles.manualGrid, children: [_jsx("div", { className: styles.manualRow, children: _jsx("div", { className: styles.col12, children: manualField('street', 'Calle / Carrera / Avenida (Línea 1)', true) }) }), _jsxs("div", { className: styles.manualRow, children: [_jsx("div", { className: styles.col6, children: manualField('streetNumber', 'Número / Portal') }), _jsx("div", { className: styles.col6, children: manualField('unit', 'Apto / Oficina / Interior') })] }), _jsxs("div", { className: styles.manualRow, children: [_jsx("div", { className: styles.col6, children: manualField('neighborhood', 'Barrio / Zona') }), _jsx("div", { className: styles.col6, children: manualField('city', 'Ciudad', true) })] }), _jsxs("div", { className: styles.manualRow, children: [_jsx("div", { className: styles.col4, children: manualField('state', 'Estado / Provincia / Dpto') }), _jsx("div", { className: styles.col4, children: manualField('postalCode', 'Código Postal') }), _jsx("div", { className: styles.col4, children: manualField('country', 'País', true) })] })] }) }), _jsxs(DialogActions, { style: { padding: '16px 0 0 0', gap: '12px' }, children: [_jsx(ErkButton, { text: "Cancelar", variant: "outlined", onClick: () => setManualOpen(false) }), _jsx(ErkButton, { text: "Guardar", variant: "contained", disabled: !canSaveManual, onClick: saveManual })] })] })] }));
+}
+export default ErkLocationField;