@arquimedes.co/eureka-forms 3.0.56-new-steps → 3.0.56
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/@Types/FormStep.d.ts +2 -7
- package/dist/@Types/FormStep.js +1 -2
- package/dist/@Types/GenericFormSteps.d.ts +7 -0
- package/dist/App/App.cbr.test.js +78 -0
- package/dist/FormSteps/CheckBoxStep/CheckBoxStep.mobileLabel.test.js +123 -0
- package/dist/FormSteps/CheckBoxStep/MaterialCheckBoxStep/MaterialCheckBoxStep.js +34 -7
- package/dist/FormSteps/CheckBoxStep/MaterialCheckBoxStep/MaterialCheckBoxStep.module.css +30 -0
- package/dist/FormSteps/MapperStep/MaterialMapperStep/Element/MapperElementComponent.js +1 -1
- package/dist/FormSteps/PhoneInputStep/MaterialTextInputStep/MaterialPhoneInputStep.js +5 -4
- package/dist/FormSteps/Step.js +4 -19
- package/dist/FormSteps/StepFunctions.d.ts +16 -1
- package/dist/FormSteps/StepFunctions.js +58 -14
- package/dist/FormSteps/StepFunctions.test.js +32 -55
- package/dist/FormSteps/TextInputStep/MaterialTextInputStep/MaterialTextInputStep.js +5 -4
- package/dist/FormSteps/TitleStep/MaterialTitleStep/MaterialTitleStep.js +4 -4
- package/dist/FormSteps/Utils/@StepFiller/StepFiller.js +5 -4
- package/dist/FormSteps/Utils/MaterialInputContainer/MaterialInputContainer.js +5 -4
- package/dist/Shared/ErkDatePicker/ErkDatePicker.js +7 -5
- package/dist/Shared/ErkDateRangePicker/ErkDateRangePicker.d.ts +3 -2
- package/dist/Shared/ErkDateRangePicker/ErkDateRangePicker.js +5 -4
- package/dist/Utils/CBRFunctions.js +4 -2
- package/dist/Utils/CBRFunctions.test.d.ts +1 -0
- package/dist/Utils/CBRFunctions.test.js +123 -0
- package/dist/constants/FormStepTypes.d.ts +1 -5
- package/dist/constants/FormStepTypes.js +0 -4
- package/dist/hooks.d.ts +1 -0
- package/dist/hooks.js +1 -0
- package/dist/index.lib.d.ts +2 -4
- package/dist/index.lib.js +1 -3
- package/package.json +7 -8
- package/dist/@Types/AvailabilityFormStep.d.ts +0 -48
- package/dist/@Types/AvailabilityFormStep.js +0 -24
- package/dist/@Types/BankAccountFormStep.d.ts +0 -67
- package/dist/@Types/BankAccountFormStep.js +0 -14
- package/dist/@Types/BookingFormStep.d.ts +0 -166
- package/dist/@Types/BookingFormStep.js +0 -44
- package/dist/@Types/CalendarFormStep.d.ts +0 -209
- package/dist/@Types/CalendarFormStep.js +0 -55
- package/dist/@Types/CommunicationChannelFormStep.d.ts +0 -51
- package/dist/@Types/CommunicationChannelFormStep.js +0 -15
- package/dist/@Types/ConsentFormStep.d.ts +0 -36
- package/dist/@Types/ConsentFormStep.js +0 -8
- package/dist/@Types/EntityFormFormStep.d.ts +0 -66
- package/dist/@Types/EntityFormFormStep.js +0 -20
- package/dist/@Types/EventFormStep.d.ts +0 -52
- package/dist/@Types/EventFormStep.js +0 -13
- package/dist/@Types/ExternalReferenceFormStep.d.ts +0 -74
- package/dist/@Types/ExternalReferenceFormStep.js +0 -20
- package/dist/@Types/LocationFormStep.d.ts +0 -159
- package/dist/@Types/LocationFormStep.js +0 -46
- package/dist/@Types/NumericFormSteps.d.ts +0 -108
- package/dist/@Types/NumericFormSteps.js +0 -20
- package/dist/@Types/PredefinedSelectorFormStep.d.ts +0 -51
- package/dist/@Types/PredefinedSelectorFormStep.js +0 -39
- package/dist/@Types/StepRef.d.ts +0 -135
- package/dist/@Types/StepRef.js +0 -49
- package/dist/FormSteps/AvailabilityStep/AvailabilityStep.d.ts +0 -7
- package/dist/FormSteps/AvailabilityStep/AvailabilityStep.js +0 -14
- package/dist/FormSteps/AvailabilityStep/MaterialAvailabilityStep/MaterialAvailabilityStep.d.ts +0 -8
- package/dist/FormSteps/AvailabilityStep/MaterialAvailabilityStep/MaterialAvailabilityStep.js +0 -32
- package/dist/FormSteps/BookingStep/BookingStep.d.ts +0 -17
- package/dist/FormSteps/BookingStep/BookingStep.js +0 -14
- package/dist/FormSteps/BookingStep/MaterialBookingStep/MaterialBookingStep.d.ts +0 -7
- package/dist/FormSteps/BookingStep/MaterialBookingStep/MaterialBookingStep.js +0 -32
- package/dist/FormSteps/LocationStep/LocationStep.d.ts +0 -10
- package/dist/FormSteps/LocationStep/LocationStep.js +0 -14
- package/dist/FormSteps/LocationStep/MaterialLocationStep/MaterialLocationStep.d.ts +0 -3
- package/dist/FormSteps/LocationStep/MaterialLocationStep/MaterialLocationStep.js +0 -47
- package/dist/FormSteps/LocationStep/MaterialLocationStep/MaterialLocationStep.module.css +0 -18
- package/dist/FormSteps/NumberStep/MaterialNumberStep/MaterialNumberStep.d.ts +0 -3
- package/dist/FormSteps/NumberStep/MaterialNumberStep/MaterialNumberStep.js +0 -168
- package/dist/FormSteps/NumberStep/MaterialNumberStep/MaterialNumberStep.module.css +0 -94
- package/dist/FormSteps/NumberStep/NumberStep.d.ts +0 -10
- package/dist/FormSteps/NumberStep/NumberStep.js +0 -14
- package/dist/Icons/AddIcon.d.ts +0 -3
- package/dist/Icons/AddIcon.js +0 -7
- package/dist/Icons/EditIcon.d.ts +0 -3
- package/dist/Icons/EditIcon.js +0 -7
- package/dist/Icons/RemoveIcon.d.ts +0 -3
- package/dist/Icons/RemoveIcon.js +0 -7
- package/dist/Icons/ViewDayIcon.d.ts +0 -3
- package/dist/Icons/ViewDayIcon.js +0 -7
- package/dist/Icons/ViewWeekIcon.d.ts +0 -3
- package/dist/Icons/ViewWeekIcon.js +0 -7
- package/dist/Shared/ErkAddressAutocomplete/ErkAddressAutocomplete.d.ts +0 -19
- package/dist/Shared/ErkAddressAutocomplete/ErkAddressAutocomplete.js +0 -80
- package/dist/Shared/ErkAddressAutocomplete/ErkAddressAutocomplete.module.css +0 -82
- package/dist/Shared/ErkAddressAutocomplete/googlePlaces.d.ts +0 -29
- package/dist/Shared/ErkAddressAutocomplete/googlePlaces.js +0 -139
- package/dist/Shared/ErkAvailabilityPicker/ErkAvailabilityPicker.d.ts +0 -25
- package/dist/Shared/ErkAvailabilityPicker/ErkAvailabilityPicker.js +0 -112
- package/dist/Shared/ErkAvailabilityPicker/ErkAvailabilityPicker.module.css +0 -88
- package/dist/Shared/ErkAvailabilityPicker/ErkAvailabilityPicker.test.js +0 -75
- package/dist/Shared/ErkBookingPicker/ErkBookingPicker.d.ts +0 -31
- package/dist/Shared/ErkBookingPicker/ErkBookingPicker.js +0 -223
- package/dist/Shared/ErkBookingPicker/ErkBookingPicker.module.css +0 -608
- package/dist/Shared/ErkBookingPicker/ErkBookingPicker.stories.d.ts +0 -28
- package/dist/Shared/ErkBookingPicker/ErkBookingPicker.stories.js +0 -117
- package/dist/Shared/ErkBookingPicker/ErkBookingPicker.stories.test.js +0 -49
- package/dist/Shared/ErkBookingPicker/ErkBookingPicker.test.d.ts +0 -1
- package/dist/Shared/ErkBookingPicker/ErkBookingPicker.test.js +0 -107
- package/dist/Shared/ErkLocationField/ErkLocationField.d.ts +0 -23
- package/dist/Shared/ErkLocationField/ErkLocationField.js +0 -73
- package/dist/Shared/ErkLocationField/ErkLocationField.module.css +0 -29
- package/dist/Shared/ErkLocationField/addressFields.d.ts +0 -12
- package/dist/Shared/ErkLocationField/addressFields.js +0 -34
- package/dist/Shared/ErkLocationField/locationRestrictions.d.ts +0 -6
- package/dist/Shared/ErkLocationField/locationRestrictions.js +0 -51
- package/dist/Shared/ErkLocationInput/ErkLocationInput.d.ts +0 -15
- package/dist/Shared/ErkLocationInput/ErkLocationInput.js +0 -502
- package/dist/Shared/ErkLocationInput/ErkLocationInput.module.css +0 -115
- package/dist/Shared/ErkNumberField/ErkNumberField.d.ts +0 -42
- package/dist/Shared/ErkNumberField/ErkNumberField.js +0 -170
- /package/dist/{Shared/ErkAvailabilityPicker/ErkAvailabilityPicker.test.d.ts → App/App.cbr.test.d.ts} +0 -0
- /package/dist/{Shared/ErkBookingPicker/ErkBookingPicker.stories.test.d.ts → FormSteps/CheckBoxStep/CheckBoxStep.mobileLabel.test.d.ts} +0 -0
|
@@ -1,117 +0,0 @@
|
|
|
1
|
-
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
-
import { useState } from 'react';
|
|
3
|
-
import ErkBookingPicker from './ErkBookingPicker';
|
|
4
|
-
import { withFormStepProviders } from '../../FormSteps/@StoryDecorators/FormStepDecorator';
|
|
5
|
-
import { BookingMode, PersonSelectionMode } from '../../@Types/BookingFormStep';
|
|
6
|
-
const SLOTS = [
|
|
7
|
-
{ id: 's-1', startTime: '09:00', endTime: '09:50', available: true },
|
|
8
|
-
{ id: 's-2', startTime: '10:00', endTime: '10:50', available: false },
|
|
9
|
-
{ id: 's-3', startTime: '11:00', endTime: '11:50', available: true },
|
|
10
|
-
{ id: 's-4', startTime: '14:00', endTime: '14:50', available: true },
|
|
11
|
-
{ id: 's-5', startTime: '15:00', endTime: '15:50', available: false },
|
|
12
|
-
{ id: 's-6', startTime: '16:00', endTime: '16:50', available: true },
|
|
13
|
-
];
|
|
14
|
-
function mockFetchSlots() {
|
|
15
|
-
return new Promise((resolve) => setTimeout(() => resolve(SLOTS), 300));
|
|
16
|
-
}
|
|
17
|
-
const PERSONS = [
|
|
18
|
-
{ id: 'p-1', name: 'María González', role: 'Asesora' },
|
|
19
|
-
{ id: 'p-2', name: 'Carlos Ruiz', role: 'Técnico' },
|
|
20
|
-
];
|
|
21
|
-
/** Controlled wrapper so the picker's value is interactive in Storybook. */
|
|
22
|
-
function Interactive(args) {
|
|
23
|
-
const [value, setValue] = useState(args.value);
|
|
24
|
-
return (_jsx("div", { style: { maxWidth: 660 }, children: _jsx(ErkBookingPicker, { ...args, value: value, onChange: setValue }) }));
|
|
25
|
-
}
|
|
26
|
-
const meta = {
|
|
27
|
-
component: ErkBookingPicker,
|
|
28
|
-
tags: ['autodocs'],
|
|
29
|
-
decorators: [withFormStepProviders],
|
|
30
|
-
render: Interactive,
|
|
31
|
-
args: {
|
|
32
|
-
// Supplied by the Interactive wrapper; declared here so stories don't each repeat it.
|
|
33
|
-
onChange: () => undefined,
|
|
34
|
-
},
|
|
35
|
-
};
|
|
36
|
-
export default meta;
|
|
37
|
-
/** Full flow: person → date → time. */
|
|
38
|
-
export const WithPersonSelection = {
|
|
39
|
-
args: {
|
|
40
|
-
value: null,
|
|
41
|
-
label: 'Seleccionar cita',
|
|
42
|
-
description: 'Elige profesional, día y hora.',
|
|
43
|
-
durationMinutes: 50,
|
|
44
|
-
personSelectionMode: PersonSelectionMode.REQUIRED,
|
|
45
|
-
persons: PERSONS,
|
|
46
|
-
fetchSlots: mockFetchSlots,
|
|
47
|
-
},
|
|
48
|
-
};
|
|
49
|
-
/** Optional person — adds a "Cualquiera" option. */
|
|
50
|
-
export const PersonOptional = {
|
|
51
|
-
args: {
|
|
52
|
-
value: null,
|
|
53
|
-
label: 'Reservar turno',
|
|
54
|
-
description: 'Puedes elegir o dejar que asignemos.',
|
|
55
|
-
durationMinutes: 30,
|
|
56
|
-
personSelectionMode: PersonSelectionMode.OPTIONAL,
|
|
57
|
-
persons: PERSONS,
|
|
58
|
-
fetchSlots: mockFetchSlots,
|
|
59
|
-
},
|
|
60
|
-
};
|
|
61
|
-
/** No person selection → straight to date + time. */
|
|
62
|
-
export const NoPerson = {
|
|
63
|
-
args: {
|
|
64
|
-
value: null,
|
|
65
|
-
label: 'Seleccionar horario',
|
|
66
|
-
description: 'Elige tu día y hora.',
|
|
67
|
-
durationMinutes: 60,
|
|
68
|
-
personSelectionMode: PersonSelectionMode.NONE,
|
|
69
|
-
fetchSlots: mockFetchSlots,
|
|
70
|
-
},
|
|
71
|
-
};
|
|
72
|
-
/** Extra contact step (collectContact). */
|
|
73
|
-
export const WithContact = {
|
|
74
|
-
args: {
|
|
75
|
-
value: null,
|
|
76
|
-
label: 'Agendar cita',
|
|
77
|
-
description: 'Elige y déjanos tus datos.',
|
|
78
|
-
durationMinutes: 45,
|
|
79
|
-
personSelectionMode: PersonSelectionMode.OPTIONAL,
|
|
80
|
-
persons: PERSONS,
|
|
81
|
-
collectContact: true,
|
|
82
|
-
fetchSlots: mockFetchSlots,
|
|
83
|
-
},
|
|
84
|
-
};
|
|
85
|
-
/** Full config: contact data, buffer, lock notice and in-person mode. */
|
|
86
|
-
export const Complete = {
|
|
87
|
-
args: {
|
|
88
|
-
value: null,
|
|
89
|
-
label: 'Agendar cita',
|
|
90
|
-
description: 'Soporte postventa',
|
|
91
|
-
durationMinutes: 60,
|
|
92
|
-
bufferMinutes: 10,
|
|
93
|
-
bookingMode: BookingMode.IN_PERSON,
|
|
94
|
-
temporaryLockMinutes: 15,
|
|
95
|
-
personSelectionMode: PersonSelectionMode.OPTIONAL,
|
|
96
|
-
persons: PERSONS,
|
|
97
|
-
collectContact: true,
|
|
98
|
-
fetchSlots: mockFetchSlots,
|
|
99
|
-
},
|
|
100
|
-
};
|
|
101
|
-
/** Already booked / read-only summary. */
|
|
102
|
-
export const ReadOnly = {
|
|
103
|
-
args: {
|
|
104
|
-
readOnly: true,
|
|
105
|
-
label: 'Cita confirmada',
|
|
106
|
-
durationMinutes: 50,
|
|
107
|
-
value: {
|
|
108
|
-
type: 'BOOKING_VALUE',
|
|
109
|
-
slotId: 's-3',
|
|
110
|
-
date: '2026-07-02',
|
|
111
|
-
startTime: '11:00',
|
|
112
|
-
endTime: '11:50',
|
|
113
|
-
personName: 'María González',
|
|
114
|
-
status: 'CONFIRMED',
|
|
115
|
-
},
|
|
116
|
-
},
|
|
117
|
-
};
|
|
@@ -1,49 +0,0 @@
|
|
|
1
|
-
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
-
import { render, screen, waitFor } from '@testing-library/react';
|
|
3
|
-
import userEvent from '@testing-library/user-event';
|
|
4
|
-
import { composeStories } from '@storybook/react-vite';
|
|
5
|
-
import { describe, expect, it } from 'vitest';
|
|
6
|
-
import '@testing-library/jest-dom';
|
|
7
|
-
import { format } from 'date-fns';
|
|
8
|
-
import * as stories from './ErkBookingPicker.stories';
|
|
9
|
-
const { Complete } = composeStories(stories);
|
|
10
|
-
function clickableToday() {
|
|
11
|
-
// El número de hoy puede aparecer también como día de un mes adyacente (deshabilitado).
|
|
12
|
-
const candidates = screen.getAllByRole('button', { name: format(new Date(), 'd') });
|
|
13
|
-
const enabled = candidates.find((b) => !b.disabled);
|
|
14
|
-
if (!enabled)
|
|
15
|
-
throw new Error('No selectable day found for today');
|
|
16
|
-
return enabled;
|
|
17
|
-
}
|
|
18
|
-
describe('ErkBookingPicker Complete story', () => {
|
|
19
|
-
it('opens the wizard in a modal, completes it, and confirming closes the modal leaving the summary', async () => {
|
|
20
|
-
const user = userEvent.setup();
|
|
21
|
-
render(_jsx(Complete, {}));
|
|
22
|
-
// Trigger → modal con el wizard
|
|
23
|
-
await user.click(screen.getByRole('button', { name: 'Agendar cita' }));
|
|
24
|
-
expect(await screen.findByRole('heading', { name: '¿Con quién quieres agendar?' })).toBeInTheDocument();
|
|
25
|
-
// Persona
|
|
26
|
-
await user.click(screen.getByText('María González'));
|
|
27
|
-
await user.click(screen.getByRole('button', { name: 'Siguiente' }));
|
|
28
|
-
// Día
|
|
29
|
-
await screen.findByRole('heading', { name: 'Elige un día' });
|
|
30
|
-
await user.click(clickableToday());
|
|
31
|
-
await user.click(screen.getByRole('button', { name: 'Siguiente' }));
|
|
32
|
-
// Hora (los slots del mock llegan con delay)
|
|
33
|
-
await screen.findByRole('heading', { name: 'Elige una hora' });
|
|
34
|
-
await user.click(await screen.findByRole('button', { name: '09:00' }));
|
|
35
|
-
await user.click(screen.getByRole('button', { name: 'Siguiente' }));
|
|
36
|
-
// Confirmar
|
|
37
|
-
await screen.findByRole('heading', { name: 'Revisa y confirma tu cita' });
|
|
38
|
-
await user.type(screen.getByLabelText('Nombre'), 'Juan Pérez');
|
|
39
|
-
await user.type(screen.getByLabelText('Correo'), 'juan@correo.com');
|
|
40
|
-
await user.click(screen.getByRole('button', { name: 'Confirmar cita' }));
|
|
41
|
-
// El modal se cierra y queda el resumen compacto con opción de cambiar
|
|
42
|
-
await waitFor(() => expect(screen.queryByRole('heading', { name: 'Revisa y confirma tu cita' })).not.toBeInTheDocument());
|
|
43
|
-
expect(screen.getByText(/María González .* 09:00–09:50/)).toBeInTheDocument();
|
|
44
|
-
expect(screen.getByRole('button', { name: 'Cambiar' })).toBeInTheDocument();
|
|
45
|
-
// "Cambiar" limpia el valor y vuelve al botón de agendar
|
|
46
|
-
await user.click(screen.getByRole('button', { name: 'Cambiar' }));
|
|
47
|
-
expect(screen.getByRole('button', { name: 'Agendar cita' })).toBeInTheDocument();
|
|
48
|
-
});
|
|
49
|
-
});
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
import '@testing-library/jest-dom';
|
|
@@ -1,107 +0,0 @@
|
|
|
1
|
-
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
-
import { render, screen } from '@testing-library/react';
|
|
3
|
-
import userEvent from '@testing-library/user-event';
|
|
4
|
-
import { describe, expect, it, vi } from 'vitest';
|
|
5
|
-
import '@testing-library/jest-dom';
|
|
6
|
-
import { format } from 'date-fns';
|
|
7
|
-
import ErkBookingPicker from './ErkBookingPicker';
|
|
8
|
-
import MaterialProviders from '../../Utils/MaterialProviders';
|
|
9
|
-
import InternalFormStyle from '../../constants/InternalFormStyle';
|
|
10
|
-
import { PersonSelectionMode } from '../../@Types/BookingFormStep';
|
|
11
|
-
const SLOTS = [
|
|
12
|
-
{ id: 's-1', startTime: '09:00', endTime: '09:50', available: true },
|
|
13
|
-
{ id: 's-2', startTime: '10:00', endTime: '10:50', available: false },
|
|
14
|
-
{ id: 's-3', startTime: '11:00', endTime: '11:50', available: true },
|
|
15
|
-
];
|
|
16
|
-
const PERSONS = [
|
|
17
|
-
{ id: 'p-1', name: 'María González', role: 'Asesora' },
|
|
18
|
-
{ id: 'p-2', name: 'Carlos Ruiz', role: 'Técnico' },
|
|
19
|
-
];
|
|
20
|
-
function clickableToday() {
|
|
21
|
-
// El número de hoy puede aparecer también como día de un mes adyacente (deshabilitado).
|
|
22
|
-
const candidates = screen.getAllByRole('button', { name: format(new Date(), 'd') });
|
|
23
|
-
const enabled = candidates.find((b) => !b.disabled);
|
|
24
|
-
if (!enabled)
|
|
25
|
-
throw new Error('No selectable day found for today');
|
|
26
|
-
return enabled;
|
|
27
|
-
}
|
|
28
|
-
describe('ErkBookingPicker (wizard)', () => {
|
|
29
|
-
it('drives the full flow: person → day → hour → confirm', async () => {
|
|
30
|
-
const user = userEvent.setup();
|
|
31
|
-
const onChange = vi.fn();
|
|
32
|
-
const fetchSlots = vi.fn(() => Promise.resolve(SLOTS));
|
|
33
|
-
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 }) }));
|
|
34
|
-
// La tarjeta de entrada abre el wizard en un modal
|
|
35
|
-
await user.click(screen.getByRole('button', { name: 'Agendar cita' }));
|
|
36
|
-
// Paso 1: persona — Siguiente bloqueado hasta elegir
|
|
37
|
-
expect(await screen.findByRole('heading', { name: '¿Con quién quieres agendar?' })).toBeInTheDocument();
|
|
38
|
-
const next = screen.getByRole('button', { name: 'Siguiente' });
|
|
39
|
-
expect(next).toBeDisabled();
|
|
40
|
-
await user.click(screen.getByText('María González'));
|
|
41
|
-
expect(next).toBeEnabled();
|
|
42
|
-
await user.click(next);
|
|
43
|
-
// Paso 2: día
|
|
44
|
-
expect(await screen.findByRole('heading', { name: 'Elige un día' })).toBeInTheDocument();
|
|
45
|
-
expect(screen.getByRole('button', { name: 'Siguiente' })).toBeDisabled();
|
|
46
|
-
await user.click(clickableToday());
|
|
47
|
-
await user.click(screen.getByRole('button', { name: 'Siguiente' }));
|
|
48
|
-
// Paso 3: hora — slots del fetch; ocupados deshabilitados
|
|
49
|
-
expect(await screen.findByRole('heading', { name: 'Elige una hora' })).toBeInTheDocument();
|
|
50
|
-
expect(fetchSlots).toHaveBeenCalledWith({ personId: 'p-1', date: format(new Date(), 'yyyy-MM-dd') });
|
|
51
|
-
const taken = await screen.findByRole('button', { name: '10:00' });
|
|
52
|
-
expect(taken).toBeDisabled();
|
|
53
|
-
await user.click(screen.getByRole('button', { name: '09:00' }));
|
|
54
|
-
await user.click(screen.getByRole('button', { name: 'Siguiente' }));
|
|
55
|
-
// Paso 4: confirmar — datos de contacto en la barra y CTA
|
|
56
|
-
expect(await screen.findByRole('heading', { name: 'Revisa y confirma tu cita' })).toBeInTheDocument();
|
|
57
|
-
await user.type(screen.getByLabelText('Nombre'), 'Juan Pérez');
|
|
58
|
-
await user.type(screen.getByLabelText('Correo'), 'juan@correo.com');
|
|
59
|
-
await user.click(screen.getByRole('button', { name: 'Confirmar cita' }));
|
|
60
|
-
expect(onChange).toHaveBeenCalledWith({
|
|
61
|
-
type: 'BOOKING_VALUE',
|
|
62
|
-
slotId: 's-1',
|
|
63
|
-
date: format(new Date(), 'yyyy-MM-dd'),
|
|
64
|
-
startTime: '09:00',
|
|
65
|
-
endTime: '09:50',
|
|
66
|
-
personId: 'p-1',
|
|
67
|
-
personName: 'María González',
|
|
68
|
-
contactName: 'Juan Pérez',
|
|
69
|
-
contactEmail: 'juan@correo.com',
|
|
70
|
-
status: 'PENDING',
|
|
71
|
-
});
|
|
72
|
-
});
|
|
73
|
-
it('skips the person step when personSelectionMode is NONE', async () => {
|
|
74
|
-
const user = userEvent.setup();
|
|
75
|
-
render(_jsx(MaterialProviders, { formStyle: InternalFormStyle, children: _jsx(ErkBookingPicker, { value: null, onChange: () => { }, label: "Agendar cita", durationMinutes: 30, personSelectionMode: PersonSelectionMode.NONE, fetchSlots: () => Promise.resolve(SLOTS) }) }));
|
|
76
|
-
await user.click(screen.getByRole('button', { name: 'Agendar cita' }));
|
|
77
|
-
expect(await screen.findByRole('heading', { name: 'Elige un día' })).toBeInTheDocument();
|
|
78
|
-
expect(screen.queryByText('¿Con quién quieres agendar?')).not.toBeInTheDocument();
|
|
79
|
-
expect(screen.queryByText('Persona')).not.toBeInTheDocument();
|
|
80
|
-
});
|
|
81
|
-
it('allows navigating back through the breadcrumb without losing the selection', async () => {
|
|
82
|
-
const user = userEvent.setup();
|
|
83
|
-
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) }) }));
|
|
84
|
-
await user.click(screen.getByRole('button', { name: 'Agendar cita' }));
|
|
85
|
-
await user.click(await screen.findByText('Carlos Ruiz'));
|
|
86
|
-
await user.click(screen.getByRole('button', { name: 'Siguiente' }));
|
|
87
|
-
expect(await screen.findByRole('heading', { name: 'Elige un día' })).toBeInTheDocument();
|
|
88
|
-
// Volver por el breadcrumb: el paso "Persona" completado es clicable
|
|
89
|
-
await user.click(screen.getByRole('button', { name: /Persona/ }));
|
|
90
|
-
expect(await screen.findByRole('heading', { name: '¿Con quién quieres agendar?' })).toBeInTheDocument();
|
|
91
|
-
// La selección se mantiene y permite avanzar de nuevo
|
|
92
|
-
expect(screen.getByRole('button', { name: 'Siguiente' })).toBeEnabled();
|
|
93
|
-
});
|
|
94
|
-
it('renders the compact summary when a value exists', () => {
|
|
95
|
-
render(_jsx(MaterialProviders, { formStyle: InternalFormStyle, children: _jsx(ErkBookingPicker, { value: {
|
|
96
|
-
type: 'BOOKING_VALUE',
|
|
97
|
-
slotId: 's-3',
|
|
98
|
-
date: '2026-07-02',
|
|
99
|
-
startTime: '11:00',
|
|
100
|
-
endTime: '11:50',
|
|
101
|
-
personName: 'María González',
|
|
102
|
-
status: 'CONFIRMED',
|
|
103
|
-
}, onChange: () => { }, label: "Cita confirmada", durationMinutes: 50 }) }));
|
|
104
|
-
expect(screen.getByText(/María González .* 11:00–11:50/)).toBeInTheDocument();
|
|
105
|
-
expect(screen.getByRole('button', { name: 'Cambiar' })).toBeInTheDocument();
|
|
106
|
-
});
|
|
107
|
-
});
|
|
@@ -1,23 +0,0 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
import { LocationInputMode, LocationStep, LocationStepValue } from '../../@Types/LocationFormStep';
|
|
3
|
-
export interface ErkLocationFieldProps {
|
|
4
|
-
value?: LocationStepValue | null;
|
|
5
|
-
onChange: (value: LocationStepValue | null) => void;
|
|
6
|
-
allowedModes: LocationInputMode[];
|
|
7
|
-
defaultMode?: LocationInputMode;
|
|
8
|
-
addressFields?: LocationStep['addressFields'];
|
|
9
|
-
/** ISO-2 para acotar el buscador (ej. ['co']). */
|
|
10
|
-
regionCodes?: string[];
|
|
11
|
-
error?: boolean;
|
|
12
|
-
helperText?: string | null;
|
|
13
|
-
required?: boolean;
|
|
14
|
-
readOnly?: boolean;
|
|
15
|
-
inputRef?: React.Ref<HTMLInputElement>;
|
|
16
|
-
}
|
|
17
|
-
/**
|
|
18
|
-
* Campo de ubicación (rehecho con Base UI). Ofrece los modos habilitados
|
|
19
|
-
* (buscador de Google Places, GPS, entrada manual) y aplica la config por campo
|
|
20
|
-
* (fijo / omitir) al valor resultante.
|
|
21
|
-
*/
|
|
22
|
-
declare function ErkLocationField({ value, onChange, allowedModes, defaultMode, addressFields, regionCodes, error, helperText, required, readOnly, inputRef, }: ErkLocationFieldProps): JSX.Element;
|
|
23
|
-
export default ErkLocationField;
|
|
@@ -1,73 +0,0 @@
|
|
|
1
|
-
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
-
import { useCallback, useState } from 'react';
|
|
3
|
-
import { AddressFieldMode, LocationInputMode, } from '../../@Types/LocationFormStep';
|
|
4
|
-
import ErkAddressAutocomplete from '../ErkAddressAutocomplete/ErkAddressAutocomplete';
|
|
5
|
-
import { reverseGeocode } from '../ErkAddressAutocomplete/googlePlaces';
|
|
6
|
-
import { ADDRESS_FIELDS, applyAddressFields, fieldConfig } from './addressFields';
|
|
7
|
-
import ErkTextField from '../ErkTextField/ErkTextField';
|
|
8
|
-
import ErkButton from '../ErkButton/ErkButton';
|
|
9
|
-
import LocationIcon from '../../Icons/LocationIcon';
|
|
10
|
-
import styles from './ErkLocationField.module.css';
|
|
11
|
-
const MODE_LABELS = {
|
|
12
|
-
[LocationInputMode.GOOGLE_PLACES]: 'Buscar',
|
|
13
|
-
[LocationInputMode.GPS]: 'Mi ubicación',
|
|
14
|
-
[LocationInputMode.MANUAL]: 'Manual',
|
|
15
|
-
};
|
|
16
|
-
/**
|
|
17
|
-
* Campo de ubicación (rehecho con Base UI). Ofrece los modos habilitados
|
|
18
|
-
* (buscador de Google Places, GPS, entrada manual) y aplica la config por campo
|
|
19
|
-
* (fijo / omitir) al valor resultante.
|
|
20
|
-
*/
|
|
21
|
-
function ErkLocationField({ value, onChange, allowedModes, defaultMode, addressFields, regionCodes = ['co'], error = false, helperText, required = false, readOnly = false, inputRef, }) {
|
|
22
|
-
const apiKey = import.meta.env.VITE_GOOGLE_MAPS_API_KEY ?? '';
|
|
23
|
-
const initialMode = defaultMode && allowedModes.includes(defaultMode) ? defaultMode : allowedModes[0];
|
|
24
|
-
const [mode, setMode] = useState(initialMode);
|
|
25
|
-
const [gpsLoading, setGpsLoading] = useState(false);
|
|
26
|
-
const [gpsError, setGpsError] = useState(null);
|
|
27
|
-
const handleGoogle = useCallback((resolved) => {
|
|
28
|
-
onChange({ ...resolved, addressDetail: applyAddressFields(resolved.addressDetail ?? {}, addressFields) });
|
|
29
|
-
}, [onChange, addressFields]);
|
|
30
|
-
const handleGps = useCallback(() => {
|
|
31
|
-
if (!navigator.geolocation) {
|
|
32
|
-
setGpsError('La geolocalización no es compatible con este navegador.');
|
|
33
|
-
return;
|
|
34
|
-
}
|
|
35
|
-
setGpsLoading(true);
|
|
36
|
-
setGpsError(null);
|
|
37
|
-
navigator.geolocation.getCurrentPosition((position) => {
|
|
38
|
-
const lat = position.coords.latitude;
|
|
39
|
-
const lng = position.coords.longitude;
|
|
40
|
-
void reverseGeocode(apiKey, lat, lng)
|
|
41
|
-
.then(({ address, addressDetail }) => {
|
|
42
|
-
onChange({
|
|
43
|
-
source: LocationInputMode.GPS,
|
|
44
|
-
latitude: lat,
|
|
45
|
-
longitude: lng,
|
|
46
|
-
address: address ?? `${lat.toFixed(6)}, ${lng.toFixed(6)}`,
|
|
47
|
-
addressDetail: applyAddressFields(addressDetail, addressFields),
|
|
48
|
-
});
|
|
49
|
-
})
|
|
50
|
-
.finally(() => setGpsLoading(false));
|
|
51
|
-
}, () => {
|
|
52
|
-
setGpsError('No se pudo obtener la ubicación.');
|
|
53
|
-
setGpsLoading(false);
|
|
54
|
-
}, { enableHighAccuracy: false, timeout: 15000, maximumAge: 300000 });
|
|
55
|
-
}, [apiKey, onChange, addressFields]);
|
|
56
|
-
const updateManualField = useCallback((key, text) => {
|
|
57
|
-
const base = value?.source === LocationInputMode.MANUAL ? (value.addressDetail ?? {}) : {};
|
|
58
|
-
const nextDetail = applyAddressFields({ ...base, [key]: text || undefined }, addressFields);
|
|
59
|
-
const address = ADDRESS_FIELDS.map(({ key: k }) => nextDetail[k])
|
|
60
|
-
.filter(Boolean)
|
|
61
|
-
.join(', ');
|
|
62
|
-
onChange({ source: LocationInputMode.MANUAL, address, addressDetail: nextDetail });
|
|
63
|
-
}, [value, onChange, addressFields]);
|
|
64
|
-
const manualDetail = value?.source === LocationInputMode.MANUAL ? (value.addressDetail ?? {}) : {};
|
|
65
|
-
return (_jsxs("div", { className: styles.container, children: [allowedModes.length > 1 && (_jsx("div", { className: styles.modeSwitch, children: allowedModes.map((m) => (_jsx(ErkButton, { color: m === mode ? 'primary' : 'secondary', disabled: readOnly, onClick: () => setMode(m), children: MODE_LABELS[m] }, m))) })), mode === LocationInputMode.GOOGLE_PLACES && (_jsx(ErkAddressAutocomplete, { value: value, onChange: handleGoogle, regionCodes: regionCodes, error: error, required: required, readOnly: readOnly, inputRef: inputRef })), mode === LocationInputMode.GPS && (_jsxs(ErkButton, { color: "primary", loading: gpsLoading, disabled: readOnly, onClick: handleGps, children: [_jsx(LocationIcon, { fill: "currentColor" }), " Usar mi ubicaci\u00F3n actual"] })), mode === LocationInputMode.MANUAL && (_jsx("div", { className: styles.manualGrid, children: ADDRESS_FIELDS.map(({ key, label }) => {
|
|
66
|
-
const config = fieldConfig(addressFields, key);
|
|
67
|
-
if (config.mode === AddressFieldMode.OMIT)
|
|
68
|
-
return null;
|
|
69
|
-
const fixed = config.mode === AddressFieldMode.FIXED;
|
|
70
|
-
return (_jsx(ErkTextField, { label: fixed ? `${label} (fijo)` : label, value: fixed ? (config.fixedValue ?? '') : (manualDetail[key] ?? ''), readOnly: fixed || readOnly, onChange: (text) => updateManualField(key, text) }, key));
|
|
71
|
-
}) })), (gpsError ?? helperText) && (_jsx("div", { className: error || gpsError ? styles.errorText : styles.helperText, children: gpsError ?? helperText }))] }));
|
|
72
|
-
}
|
|
73
|
-
export default ErkLocationField;
|
|
@@ -1,29 +0,0 @@
|
|
|
1
|
-
.container {
|
|
2
|
-
display: flex;
|
|
3
|
-
flex-direction: column;
|
|
4
|
-
gap: 10px;
|
|
5
|
-
width: 100%;
|
|
6
|
-
}
|
|
7
|
-
|
|
8
|
-
.modeSwitch {
|
|
9
|
-
display: flex;
|
|
10
|
-
gap: 8px;
|
|
11
|
-
flex-wrap: wrap;
|
|
12
|
-
}
|
|
13
|
-
|
|
14
|
-
.manualGrid {
|
|
15
|
-
display: grid;
|
|
16
|
-
grid-template-columns: repeat(2, 1fr);
|
|
17
|
-
gap: 10px;
|
|
18
|
-
}
|
|
19
|
-
|
|
20
|
-
.helperText {
|
|
21
|
-
font-size: 12px;
|
|
22
|
-
color: var(--eureka-text, #666);
|
|
23
|
-
opacity: 0.7;
|
|
24
|
-
}
|
|
25
|
-
|
|
26
|
-
.errorText {
|
|
27
|
-
font-size: 12px;
|
|
28
|
-
color: var(--eureka-error, #e53935);
|
|
29
|
-
}
|
|
@@ -1,12 +0,0 @@
|
|
|
1
|
-
import { AddressFieldConfig, AddressFieldKey, LocationAddressDetail, LocationStep } from '../../@Types/LocationFormStep';
|
|
2
|
-
/** Campos de dirección en orden de render, con su etiqueta de UI. */
|
|
3
|
-
export declare const ADDRESS_FIELDS: {
|
|
4
|
-
key: AddressFieldKey;
|
|
5
|
-
label: string;
|
|
6
|
-
}[];
|
|
7
|
-
export declare function fieldConfig(addressFields: LocationStep['addressFields'], key: AddressFieldKey): AddressFieldConfig;
|
|
8
|
-
/**
|
|
9
|
-
* Aplica la config por campo a una dirección resuelta (Google/GPS):
|
|
10
|
-
* los `FIXED` se sobreescriben con el valor del diseñador y los `OMIT` se descartan.
|
|
11
|
-
*/
|
|
12
|
-
export declare function applyAddressFields(detail: LocationAddressDetail, addressFields: LocationStep['addressFields']): LocationAddressDetail;
|
|
@@ -1,34 +0,0 @@
|
|
|
1
|
-
import { AddressFieldMode, } from '../../@Types/LocationFormStep';
|
|
2
|
-
/** Campos de dirección en orden de render, con su etiqueta de UI. */
|
|
3
|
-
export const ADDRESS_FIELDS = [
|
|
4
|
-
{ key: 'street', label: 'Calle' },
|
|
5
|
-
{ key: 'streetNumber', label: 'Número' },
|
|
6
|
-
{ key: 'unit', label: 'Interior / Apto' },
|
|
7
|
-
{ key: 'neighborhood', label: 'Barrio' },
|
|
8
|
-
{ key: 'city', label: 'Ciudad' },
|
|
9
|
-
{ key: 'state', label: 'Departamento / Región' },
|
|
10
|
-
{ key: 'postalCode', label: 'Código postal' },
|
|
11
|
-
{ key: 'country', label: 'País' },
|
|
12
|
-
];
|
|
13
|
-
export function fieldConfig(addressFields, key) {
|
|
14
|
-
return addressFields?.[key] ?? { mode: AddressFieldMode.ASK };
|
|
15
|
-
}
|
|
16
|
-
/**
|
|
17
|
-
* Aplica la config por campo a una dirección resuelta (Google/GPS):
|
|
18
|
-
* los `FIXED` se sobreescriben con el valor del diseñador y los `OMIT` se descartan.
|
|
19
|
-
*/
|
|
20
|
-
export function applyAddressFields(detail, addressFields) {
|
|
21
|
-
if (!addressFields)
|
|
22
|
-
return detail;
|
|
23
|
-
const result = { ...detail };
|
|
24
|
-
for (const { key } of ADDRESS_FIELDS) {
|
|
25
|
-
const config = addressFields[key];
|
|
26
|
-
if (!config)
|
|
27
|
-
continue;
|
|
28
|
-
if (config.mode === AddressFieldMode.OMIT)
|
|
29
|
-
delete result[key];
|
|
30
|
-
else if (config.mode === AddressFieldMode.FIXED)
|
|
31
|
-
result[key] = config.fixedValue;
|
|
32
|
-
}
|
|
33
|
-
return result;
|
|
34
|
-
}
|
|
@@ -1,6 +0,0 @@
|
|
|
1
|
-
import { LocationRestriction } from '../../@Types/LocationFormStep';
|
|
2
|
-
/**
|
|
3
|
-
* Valida una coordenada contra todas las restricciones (lógica AND).
|
|
4
|
-
* Devuelve el mensaje de error de la primera restricción que falla, o `null` si es válida.
|
|
5
|
-
*/
|
|
6
|
-
export declare function validateRestrictions(lat: number, lng: number, restrictions: LocationRestriction[] | undefined): string | null;
|
|
@@ -1,51 +0,0 @@
|
|
|
1
|
-
import { LocationRestrictionBehavior, LocationRestrictionType, } from '../../@Types/LocationFormStep';
|
|
2
|
-
const EARTH_RADIUS_M = 6371000;
|
|
3
|
-
function toRad(deg) {
|
|
4
|
-
return (deg * Math.PI) / 180;
|
|
5
|
-
}
|
|
6
|
-
/** Distancia en metros entre dos coordenadas (haversine). */
|
|
7
|
-
function haversineMeters(aLat, aLng, bLat, bLng) {
|
|
8
|
-
const dLat = toRad(bLat - aLat);
|
|
9
|
-
const dLng = toRad(bLng - aLng);
|
|
10
|
-
const lat1 = toRad(aLat);
|
|
11
|
-
const lat2 = toRad(bLat);
|
|
12
|
-
const h = Math.sin(dLat / 2) ** 2 + Math.cos(lat1) * Math.cos(lat2) * Math.sin(dLng / 2) ** 2;
|
|
13
|
-
return 2 * EARTH_RADIUS_M * Math.asin(Math.min(1, Math.sqrt(h)));
|
|
14
|
-
}
|
|
15
|
-
/** Punto dentro de polígono (ray casting). El polígono se cierra automáticamente. */
|
|
16
|
-
function pointInPolygon(lat, lng, polygon) {
|
|
17
|
-
let inside = false;
|
|
18
|
-
for (let i = 0, j = polygon.length - 1; i < polygon.length; j = i++) {
|
|
19
|
-
const yi = polygon[i].latitude;
|
|
20
|
-
const xi = polygon[i].longitude;
|
|
21
|
-
const yj = polygon[j].latitude;
|
|
22
|
-
const xj = polygon[j].longitude;
|
|
23
|
-
const intersects = yi > lat !== yj > lat && lng < ((xj - xi) * (lat - yi)) / (yj - yi) + xi;
|
|
24
|
-
if (intersects)
|
|
25
|
-
inside = !inside;
|
|
26
|
-
}
|
|
27
|
-
return inside;
|
|
28
|
-
}
|
|
29
|
-
function isInside(lat, lng, restriction) {
|
|
30
|
-
if (restriction.type === LocationRestrictionType.RADIUS) {
|
|
31
|
-
return (haversineMeters(lat, lng, restriction.center.latitude, restriction.center.longitude) <=
|
|
32
|
-
restriction.radiusMeters);
|
|
33
|
-
}
|
|
34
|
-
return pointInPolygon(lat, lng, restriction.polygon);
|
|
35
|
-
}
|
|
36
|
-
/**
|
|
37
|
-
* Valida una coordenada contra todas las restricciones (lógica AND).
|
|
38
|
-
* Devuelve el mensaje de error de la primera restricción que falla, o `null` si es válida.
|
|
39
|
-
*/
|
|
40
|
-
export function validateRestrictions(lat, lng, restrictions) {
|
|
41
|
-
for (const restriction of restrictions ?? []) {
|
|
42
|
-
const inside = isInside(lat, lng, restriction);
|
|
43
|
-
if (restriction.behavior === LocationRestrictionBehavior.ALLOW && !inside) {
|
|
44
|
-
return restriction.errorMessage ?? 'La ubicación está fuera de la zona permitida.';
|
|
45
|
-
}
|
|
46
|
-
if (restriction.behavior === LocationRestrictionBehavior.DENY && inside) {
|
|
47
|
-
return restriction.errorMessage ?? 'La ubicación está en una zona no permitida.';
|
|
48
|
-
}
|
|
49
|
-
}
|
|
50
|
-
return null;
|
|
51
|
-
}
|
|
@@ -1,15 +0,0 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
import { LocationInputMode, LocationStepValue } from '../../@Types/LocationFormStep';
|
|
3
|
-
export interface ErkLocationInputProps {
|
|
4
|
-
value?: LocationStepValue | null;
|
|
5
|
-
onChange?: (value: LocationStepValue | null) => void;
|
|
6
|
-
allowedModes: LocationInputMode[];
|
|
7
|
-
defaultMode?: LocationInputMode;
|
|
8
|
-
label: string;
|
|
9
|
-
helperText?: string | null;
|
|
10
|
-
required?: boolean;
|
|
11
|
-
error?: boolean;
|
|
12
|
-
readOnly?: boolean;
|
|
13
|
-
inputRef?: React.Ref<any>;
|
|
14
|
-
}
|
|
15
|
-
export default function ErkLocationInput({ value, onChange, allowedModes, label, helperText, required, error, readOnly, inputRef, }: ErkLocationInputProps): JSX.Element;
|