@devpablocristo/modules-scheduling 0.4.0

package/package.json

@@ -0,0 +1,49 @@
+{
+  "name": "@devpablocristo/modules-scheduling",
+  "version": "0.4.0",
+  "description": "Scheduling calendar, queue operator, and public booking flow for Pymes (React + FullCalendar).",
+  "type": "module",
+  "exports": {
+    ".": "./src/index.ts",
+    "./next": "./src/next.ts",
+    "./styles.css": "./src/styles.css",
+    "./styles.next.css": "./src/styles.next.css"
+  },
+  "files": [
+    "src"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "peerDependencies": {
+    "@devpablocristo/core-browser": "^0.2.0",
+    "@devpablocristo/modules-calendar-board": "^0.1.0",
+    "@fullcalendar/core": "^6.1.20",
+    "@fullcalendar/interaction": "^6.1.20",
+    "@fullcalendar/react": "^6.1.20",
+    "@tanstack/react-query": "^5.66.0",
+    "react": "^18.0.0 || ^19.0.0",
+    "react-dom": "^18.0.0 || ^19.0.0"
+  },
+  "scripts": {
+    "typecheck": "tsc --noEmit",
+    "test": "vitest run --globals --passWithNoTests"
+  },
+  "devDependencies": {
+    "@testing-library/react": "^14.3.1",
+    "@devpablocristo/core-browser": "^0.2.0",
+    "@devpablocristo/modules-calendar-board": "^0.1.0",
+    "@fullcalendar/core": "^6.1.20",
+    "@fullcalendar/interaction": "^6.1.20",
+    "@fullcalendar/react": "^6.1.20",
+    "@tanstack/react-query": "^5.66.0",
+    "@types/node": "^24.0.0",
+    "@types/react": "^18.3.0",
+    "@types/react-dom": "^18.3.0",
+    "jsdom": "^24.1.3",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "typescript": "^5.8.0",
+    "vitest": "^3.2.4"
+  }
+}

package/src/BlockedRangeModal.tsx

@@ -0,0 +1,256 @@
+import { useEffect, useState, type FormEvent } from 'react';
+import { confirmAction } from '@devpablocristo/core-browser';
+import type { BlockedRange, BlockedRangeKind, SchedulingCalendarCopy } from './types';
+
+export type BlockedRangeModalState =
+  | { open: false }
+  | {
+      open: true;
+      mode: 'create';
+      branchId: string;
+      resourceId: string | null;
+      resourceOptions: Array<{ id: string; name: string }>;
+      initial: BlockedRangeDraft;
+    }
+  | {
+      open: true;
+      mode: 'edit';
+      id: string;
+      branchId: string;
+      resourceOptions: Array<{ id: string; name: string }>;
+      initial: BlockedRangeDraft;
+    };
+
+export type BlockedRangeDraft = {
+  kind: BlockedRangeKind;
+  reason: string;
+  date: string; // YYYY-MM-DD
+  startTime: string; // HH:MM
+  endTime: string; // HH:MM
+  resourceId: string; // '' === all resources
+};
+
+type Props = {
+  state: BlockedRangeModalState;
+  copy: SchedulingCalendarCopy;
+  saving?: boolean;
+  onClose: () => void;
+  onSave: (draft: BlockedRangeDraft) => Promise<void> | void;
+  onDelete?: (id: string) => Promise<void> | void;
+};
+
+const BLOCKED_KINDS: BlockedRangeKind[] = ['manual', 'holiday', 'maintenance', 'leave'];
+
+export function blockedRangeDraftFromRange(range: BlockedRange): BlockedRangeDraft {
+  const start = new Date(range.start_at);
+  const end = new Date(range.end_at);
+  return {
+    kind: range.kind,
+    reason: range.reason ?? '',
+    date: toDateInputValue(start),
+    startTime: toTimeInputValue(start),
+    endTime: toTimeInputValue(end),
+    resourceId: range.resource_id ?? '',
+  };
+}
+
+export function emptyBlockedRangeDraft(date: string): BlockedRangeDraft {
+  return {
+    kind: 'manual',
+    reason: '',
+    date,
+    startTime: '09:00',
+    endTime: '10:00',
+    resourceId: '',
+  };
+}
+
+function toDateInputValue(value: Date): string {
+  const year = value.getFullYear();
+  const month = String(value.getMonth() + 1).padStart(2, '0');
+  const day = String(value.getDate()).padStart(2, '0');
+  return `${year}-${month}-${day}`;
+}
+
+function toTimeInputValue(value: Date): string {
+  const hours = String(value.getHours()).padStart(2, '0');
+  const minutes = String(value.getMinutes()).padStart(2, '0');
+  return `${hours}:${minutes}`;
+}
+
+export function BlockedRangeModal({ state, copy, saving = false, onClose, onSave, onDelete }: Props) {
+  const [draft, setDraft] = useState<BlockedRangeDraft>(() =>
+    state.open ? state.initial : emptyBlockedRangeDraft(toDateInputValue(new Date())),
+  );
+
+  useEffect(() => {
+    if (state.open) {
+      setDraft(state.initial);
+    }
+  }, [state]);
+
+  if (!state.open) {
+    return null;
+  }
+
+  const handleSubmit = async (event: FormEvent<HTMLFormElement>) => {
+    event.preventDefault();
+    if (!draft.date || !draft.startTime || !draft.endTime) {
+      return;
+    }
+    if (draft.startTime >= draft.endTime) {
+      return;
+    }
+    await onSave(draft);
+  };
+
+  const handleDeleteClick = async () => {
+    if (state.mode !== 'edit' || !onDelete) {
+      return;
+    }
+    const confirmed = await confirmAction({
+      title: copy.blockedRangeDeleteTitle,
+      description: copy.blockedRangeDeleteDescription,
+      confirmLabel: copy.blockedRangeDelete,
+      cancelLabel: copy.close,
+      tone: 'danger',
+    });
+    if (!confirmed) {
+      return;
+    }
+    await onDelete(state.id);
+  };
+
+  const isEdit = state.mode === 'edit';
+  const title = isEdit ? copy.blockedRangeEditTitle : copy.blockedRangeCreateTitle;
+  const submitLabel = saving ? copy.saving : isEdit ? copy.blockedRangeUpdate : copy.blockedRangeCreate;
+
+  return (
+    <div className="modules-scheduling__backdrop app-modal-backdrop" role="presentation" onClick={onClose}>
+      <div
+        className="modules-scheduling__modal app-modal"
+        role="dialog"
+        aria-modal="true"
+        onClick={(event) => event.stopPropagation()}
+      >
+        <div className="app-modal__header">
+          <div className="app-modal__title-block">
+            <p className="app-modal__eyebrow">{copy.blockedRangeEyebrow}</p>
+            <h3 className="app-modal__title">{title}</h3>
+          </div>
+          <button type="button" className="app-modal__close" aria-label={copy.close} onClick={onClose}>
+            ×
+          </button>
+        </div>
+
+        <form className="app-modal__body modules-scheduling__modal-form" onSubmit={handleSubmit}>
+          <div className="form-group">
+            <label htmlFor="blocked-range-kind">{copy.blockedRangeKindLabel}</label>
+            <select
+              id="blocked-range-kind"
+              value={draft.kind}
+              onChange={(event) => setDraft((current) => ({ ...current, kind: event.target.value as BlockedRangeKind }))}
+            >
+              {BLOCKED_KINDS.map((kind) => (
+                <option key={kind} value={kind}>
+                  {copy.blockedRangeKindOptions[kind]}
+                </option>
+              ))}
+            </select>
+          </div>
+
+          <div className="form-group">
+            <label htmlFor="blocked-range-reason">{copy.blockedRangeReasonLabel}</label>
+            <input
+              id="blocked-range-reason"
+              value={draft.reason}
+              placeholder={copy.blockedRangeReasonPlaceholder}
+              onChange={(event) => setDraft((current) => ({ ...current, reason: event.target.value }))}
+              autoFocus
+            />
+          </div>
+
+          <div className="modules-scheduling__form-row">
+            <div className="form-group grow">
+              <label htmlFor="blocked-range-date">{copy.focusDateLabel}</label>
+              <input
+                id="blocked-range-date"
+                type="date"
+                value={draft.date}
+                onChange={(event) => setDraft((current) => ({ ...current, date: event.target.value }))}
+                required
+              />
+            </div>
+            <div className="form-group grow">
+              <label htmlFor="blocked-range-resource">{copy.resourceNameLabel}</label>
+              <select
+                id="blocked-range-resource"
+                value={draft.resourceId}
+                onChange={(event) => setDraft((current) => ({ ...current, resourceId: event.target.value }))}
+              >
+                <option value="">{copy.anyResource}</option>
+                {state.resourceOptions.map((resource) => (
+                  <option key={resource.id} value={resource.id}>
+                    {resource.name}
+                  </option>
+                ))}
+              </select>
+            </div>
+          </div>
+
+          <div className="modules-scheduling__form-row">
+            <div className="form-group grow">
+              <label htmlFor="blocked-range-start">{copy.slotStartLabel}</label>
+              <input
+                id="blocked-range-start"
+                type="time"
+                value={draft.startTime}
+                onChange={(event) => setDraft((current) => ({ ...current, startTime: event.target.value }))}
+                required
+              />
+            </div>
+            <div className="form-group grow">
+              <label htmlFor="blocked-range-end">{copy.slotEndLabel}</label>
+              <input
+                id="blocked-range-end"
+                type="time"
+                value={draft.endTime}
+                onChange={(event) => setDraft((current) => ({ ...current, endTime: event.target.value }))}
+                required
+              />
+            </div>
+          </div>
+
+          <div className="app-modal__footer">
+            {isEdit && onDelete ? (
+              <button
+                type="button"
+                className="btn-danger btn-sm app-modal__action"
+                onClick={() => void handleDeleteClick()}
+                disabled={saving}
+              >
+                {copy.blockedRangeDelete}
+              </button>
+            ) : null}
+            <div className="app-modal__footer-spacer" aria-hidden />
+            <button
+              type="button"
+              className="btn-secondary btn-sm app-modal__action"
+              disabled={saving}
+              onClick={onClose}
+            >
+              {copy.close}
+            </button>
+            <button
+              type="submit"
+              className="btn-primary btn-sm app-modal__action"
+              disabled={saving || draft.startTime >= draft.endTime}
+            >
+              {submitLabel}
+            </button>
+          </div>
+        </form>
+      </div>
+    </div>
+  );
+}

package/src/PublicSchedulingFlow.test.tsx

@@ -0,0 +1,192 @@
+// @vitest-environment jsdom
+
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { cleanup, fireEvent, render, screen, waitFor } from '@testing-library/react';
+import type { ComponentProps } from 'react';
+import { describe, expect, it, vi } from 'vitest';
+import type { PublicSchedulingClient } from './client';
+import { PublicSchedulingFlow } from './PublicSchedulingFlow';
+import type {
+  PublicAvailabilitySlot,
+  PublicBooking,
+  PublicBusinessInfo,
+  PublicQueueSummary,
+  PublicService,
+} from './types';
+
+function createClient(overrides?: Partial<Record<keyof PublicSchedulingClient, unknown>>): PublicSchedulingClient {
+  const business: PublicBusinessInfo = {
+    org_id: 'org-demo',
+    name: 'Demo Org',
+    slug: 'demo-org',
+    business_name: 'Demo Scheduling',
+    business_address: 'Main street 123',
+    business_phone: '+54 381 555 0101',
+    business_email: 'hello@example.com',
+    scheduling_enabled: true,
+    appointments_enabled: true,
+  };
+  const services: PublicService[] = [
+    {
+      id: 'service-1',
+      name: 'Consulta inicial',
+      type: 'schedule',
+      description: 'Consulta general',
+      unit: 'session',
+      price: 100,
+      currency: 'ARS',
+    },
+  ];
+  const availability: PublicAvailabilitySlot[] = [
+    {
+      start_at: '2099-04-05T10:00:00Z',
+      end_at: '2099-04-05T10:30:00Z',
+      remaining: 1,
+    },
+  ];
+  const queues: PublicQueueSummary[] = [];
+  const bookings: PublicBooking[] = [];
+
+  return {
+    getBusinessInfo: vi.fn(async () => business),
+    listServices: vi.fn(async () => services),
+    getAvailability: vi.fn(async () => availability),
+    book: vi.fn(async () => ({
+      id: 'booking-1',
+      party_name: 'Ada Lovelace',
+      party_phone: '+54 381 555 0202',
+      title: 'Consulta inicial',
+      status: 'pending_confirmation',
+      start_at: availability[0].start_at,
+      end_at: availability[0].end_at,
+      duration: 30,
+      actions: {
+        confirm_token: 'confirm-token',
+        cancel_token: 'cancel-token',
+      },
+    })),
+    listMyBookings: vi.fn(async () => bookings),
+    listQueues: vi.fn(async () => queues),
+    createQueueTicket: vi.fn(),
+    getQueuePosition: vi.fn(),
+    joinWaitlist: vi.fn(),
+    confirmBooking: vi.fn(),
+    cancelBooking: vi.fn(),
+    ...(overrides ?? {}),
+  } as PublicSchedulingClient;
+}
+
+function renderFlow(client: PublicSchedulingClient, props?: Partial<ComponentProps<typeof PublicSchedulingFlow>>) {
+  cleanup();
+  const queryClient = new QueryClient({
+    defaultOptions: {
+      queries: { retry: false },
+      mutations: { retry: false },
+    },
+  });
+
+  return render(
+    <QueryClientProvider client={queryClient}>
+      <PublicSchedulingFlow
+        client={client}
+        orgRef="demo-org"
+        locale="es"
+        {...props}
+      />
+    </QueryClientProvider>,
+  );
+}
+
+describe('PublicSchedulingFlow', () => {
+  it('shows the disabled state when public scheduling is turned off', async () => {
+    const client = createClient({
+      getBusinessInfo: vi.fn(async () => ({
+        org_id: 'org-demo',
+        name: 'Demo Org',
+        slug: 'demo-org',
+        business_name: 'Demo Scheduling',
+        business_address: '',
+        business_phone: '',
+        business_email: '',
+        scheduling_enabled: false,
+        appointments_enabled: false,
+      })),
+    });
+
+    renderFlow(client);
+
+    expect(await screen.findByText('La agenda pública está deshabilitada')).toBeTruthy();
+    expect(screen.getByText('Activá la agenda de esta organización para exponer el flujo público.')).toBeTruthy();
+  });
+
+  it('books the selected slot with the canonical public payload', async () => {
+    const client = createClient();
+
+    renderFlow(client);
+
+    const selectSlotButton = await screen.findByRole('button', { name: /Elegir slot/i });
+    const bookingPhoneInput = document.getElementById('public-scheduling-phone');
+
+    fireEvent.click(selectSlotButton);
+    fireEvent.change(screen.getByLabelText('Cliente'), { target: { value: 'Ada Lovelace' } });
+    fireEvent.change(bookingPhoneInput as HTMLElement, { target: { value: '+54 381 555 0202' } });
+    fireEvent.change(screen.getByLabelText('Email'), { target: { value: 'ada@example.com' } });
+    fireEvent.change(screen.getByLabelText('Notas'), { target: { value: 'Primera visita' } });
+    fireEvent.click(screen.getByRole('button', { name: 'Reservar' }));
+
+    await waitFor(() => {
+      expect(client.book).toHaveBeenCalledWith('demo-org', {
+        service_id: 'service-1',
+        customer_name: 'Ada Lovelace',
+        customer_phone: '+54 381 555 0202',
+        customer_email: 'ada@example.com',
+        start_at: '2099-04-05T10:00:00Z',
+        notes: 'Primera visita',
+      });
+    });
+    expect(await screen.findByText('Reserva creada')).toBeTruthy();
+  });
+
+  it('keeps spanish copy when using a regional spanish locale', async () => {
+    const client = createClient();
+
+    renderFlow(client, { locale: 'es-AR' });
+
+    expect(await screen.findByRole('button', { name: /Elegir slot/i })).toBeTruthy();
+    expect(screen.getByText(/\d{1,2}\/\d{1,2}\/\d{4}/)).toBeTruthy();
+  });
+
+  it('localizes booking action buttons when using english regional locales', async () => {
+    const client = createClient({
+      listMyBookings: vi.fn(async () => [
+        {
+          id: 'booking-1',
+          party_name: 'Ada Lovelace',
+          party_phone: '+54 381 555 0202',
+          title: 'Initial consult',
+          status: 'pending_confirmation',
+          start_at: '2099-04-05T10:00:00Z',
+          end_at: '2099-04-05T10:30:00Z',
+          duration: 30,
+          actions: {
+            confirm_token: 'confirm-token',
+            cancel_token: 'cancel-token',
+          },
+        },
+      ]),
+    });
+
+    renderFlow(client, { locale: 'en-US' });
+
+    const lookupPhoneInput = await screen.findByLabelText('Phone', {
+      selector: 'input#public-scheduling-bookings-phone',
+    });
+    fireEvent.change(lookupPhoneInput, {
+      target: { value: '+54 381 555 0202' },
+    });
+    fireEvent.click(screen.getByRole('button', { name: 'Find bookings' }));
+
+    expect(await screen.findByRole('button', { name: 'Confirm' })).toBeTruthy();
+    expect(screen.getByRole('button', { name: 'Cancel' })).toBeTruthy();
+  });
+});