@asteby/metacore-runtime-react 23.9.2 → 23.10.0

package/src/__tests__/wizard-action-modal.test.tsx

@@ -0,0 +1,121 @@
+// @vitest-environment happy-dom
+//
+// WizardActionModal contract (the third render-path of ActionModalDispatcher):
+// when an action declares `steps: [{title, fields[]}]`, the dispatcher renders a
+// multi-step wizard instead of the single-page GenericActionModal. It:
+//   - shows only the current step's fields,
+//   - gates advancing on the current step's required fields,
+//   - accumulates every step's values and POSTs all of them, once, on submit.
+//
+// happy-dom gotcha: Radix Select resets its value in this environment, so these
+// tests gate on visible text/behavior (which fields render, what POST body is
+// sent), never on a Select's value.
+import { afterEach, describe, expect, it, vi } from 'vitest'
+import { cleanup, render, screen, fireEvent, waitFor } from '@testing-library/react'
+
+vi.mock('react-i18next', () => ({
+    useTranslation: () => ({ t: (k: string, o?: any) => o?.defaultValue ?? k }),
+}))
+
+import { ActionModalDispatcher } from '../action-modal-dispatcher'
+import { ApiProvider, type ApiClient } from '../api-context'
+import type { ActionMetadata } from '@asteby/metacore-sdk'
+
+afterEach(cleanup)
+
+function makeApi() {
+    const post = vi.fn().mockResolvedValue({ data: { success: true } })
+    const api = {
+        get: vi.fn().mockResolvedValue({ data: {} }),
+        post,
+    } as unknown as ApiClient
+    return { api, post }
+}
+
+const action: ActionMetadata = {
+    key: 'workshop_checklist',
+    label: 'Checklist de taller',
+    icon: 'wrench',
+    steps: [
+        {
+            title: 'Recepción',
+            fields: [
+                { key: 'plate', label: 'Placa', type: 'text', required: true },
+                { key: 'mileage', label: 'Kilometraje', type: 'number' },
+            ],
+        },
+        {
+            title: 'Diagnóstico',
+            fields: [{ key: 'notes', label: 'Notas', type: 'textarea', required: true }],
+        },
+    ],
+} as unknown as ActionMetadata
+
+function renderModal(api: ApiClient) {
+    return render(
+        <ApiProvider client={api}>
+            <ActionModalDispatcher
+                open
+                onOpenChange={() => {}}
+                action={action}
+                model="service_order"
+                record={{ id: '42' } as any}
+                endpoint="/data/service_order"
+                onSuccess={() => {}}
+            />
+        </ApiProvider>,
+    )
+}
+
+describe('WizardActionModal', () => {
+    it('renders only the first step initially and shows a progress indicator', () => {
+        const { api } = makeApi()
+        renderModal(api)
+        // First step fields present, later step field absent.
+        expect(screen.getByText('Placa')).toBeTruthy()
+        expect(screen.queryByText('Notas')).toBeNull()
+        // Progress label "Paso 1/2".
+        expect(screen.getByText(/1\/2/)).toBeTruthy()
+    })
+
+    it('blocks advancing when the current step has an unmet required field', () => {
+        const { api } = makeApi()
+        renderModal(api)
+        fireEvent.click(screen.getByText('Siguiente'))
+        // Still on step 1 (Notas not shown) because Placa is empty+required.
+        expect(screen.queryByText('Notas')).toBeNull()
+    })
+
+    it('advances to the next step once required fields pass', () => {
+        const { api } = makeApi()
+        renderModal(api)
+        fireEvent.change(document.getElementById('plate') as HTMLInputElement, {
+            target: { value: 'ABC-123' },
+        })
+        fireEvent.click(screen.getByText('Siguiente'))
+        expect(screen.getByText('Notas')).toBeTruthy()
+        // Back returns to step 1 with the value retained.
+        fireEvent.click(screen.getByText('Atrás'))
+        expect((document.getElementById('plate') as HTMLInputElement).value).toBe('ABC-123')
+    })
+
+    it('submits ALL accumulated fields once, to the record action endpoint', async () => {
+        const { api, post } = makeApi()
+        renderModal(api)
+        fireEvent.change(document.getElementById('plate') as HTMLInputElement, {
+            target: { value: 'ABC-123' },
+        })
+        fireEvent.click(screen.getByText('Siguiente'))
+        fireEvent.change(document.getElementById('notes') as HTMLTextAreaElement, {
+            target: { value: 'frenos' },
+        })
+        // Final step shows the action label as the submit button (the label also
+        // appears in the dialog title, so click the last match — the button).
+        const labels = screen.getAllByText('Checklist de taller')
+        fireEvent.click(labels[labels.length - 1])
+        await waitFor(() => expect(post).toHaveBeenCalledTimes(1))
+        const [url, body] = post.mock.calls[0]
+        expect(url).toBe('/data/service_order/42/action/workshop_checklist')
+        expect(body).toMatchObject({ plate: 'ABC-123', notes: 'frenos' })
+    })
+})

package/src/action-modal-dispatcher.tsx

@@ -170,6 +170,20 @@ export function ActionModalDispatcher({
         )
     }
 
+    if (action.steps && action.steps.length > 0) {
+        return (
+            <WizardActionModal
+                open={open}
+                onOpenChange={onOpenChange}
+                action={action}
+                model={model}
+                record={record}
+                endpoint={endpoint}
+                onSuccess={onSuccess}
+            />
+        )
+    }
+
     if (action.fields && action.fields.length > 0) {
         return (
             <GenericActionModal
@@ -447,6 +461,225 @@ function GenericActionModal({ open, onOpenChange, action, model, record, endpoin
     )
 }
 
+// buildFieldDefaults seeds formData for a set of action fields, honoring the
+// same line-items prefill spec + boolean/empty rules GenericActionModal uses, so
+// wizard steps and single-page forms initialize identically.
+function buildFieldDefaults(fields: ActionFieldDef[], record: any): Record<string, any> {
+    const defaults: Record<string, any> = {}
+    for (const field of fields) {
+        if (isLineItemsField(field)) {
+            const dv = lineItemsDefault(field)
+            defaults[field.key] = isPrefillSpec(dv)
+                ? buildPrefillRows(dv, record)
+                : Array.isArray(dv)
+                  ? dv
+                  : []
+            continue
+        }
+        defaults[field.key] = field.defaultValue ?? (field.type === 'boolean' ? false : '')
+    }
+    return defaults
+}
+
+// validateFields returns the first validation error for a set of required
+// fields, or null when they all pass. Shared by the wizard (per-step gate) and
+// mirrors GenericActionModal's inline checks. `tl` localizes the field label.
+function validateFields(
+    fields: ActionFieldDef[],
+    formData: Record<string, any>,
+    tl: (s: string) => string,
+): string | null {
+    for (const field of fields) {
+        if (!field.required) continue
+        if (isLineItemsField(field)) {
+            const rows = formData[field.key]
+            if (!Array.isArray(rows) || rows.length === 0) {
+                return `${tl(field.label)} requiere al menos un renglón`
+            }
+            continue
+        }
+        if (!formData[field.key] && formData[field.key] !== false) {
+            return `${tl(field.label)} es requerido`
+        }
+    }
+    return null
+}
+
+// WizardActionModal — the third render-path: a multi-step form. It accumulates
+// every step's fields into ONE formData object and, on the final step, POSTs all
+// of them to the same endpoint GenericActionModal uses (buildActionUrl). Each
+// step is validated before "Siguiente" advances; a progress/step bar shows where
+// the user is. Widgets are rendered by the same renderField/resolveWidget path,
+// so line-items, dynamic_select, uploads and dates behave identically to a
+// single-page action form — no widget is duplicated.
+function WizardActionModal({ open, onOpenChange, action, model, record, endpoint, onSuccess }: ActionModalProps) {
+    const { t } = useTranslation()
+    const tl = (s: string) => t(s, { defaultValue: s })
+    const api = useApi()
+    const steps = action.steps ?? []
+    const [stepIndex, setStepIndex] = useState(0)
+    const [formData, setFormData] = useState<Record<string, any>>({})
+    const [executing, setExecuting] = useState(false)
+
+    // Reset to the first step and seed defaults for EVERY step's fields whenever
+    // the modal (re)opens, so accumulated values from a prior run don't leak.
+    useEffect(() => {
+        if (!open) return
+        const allFields = steps.flatMap((s) => s.fields ?? [])
+        setFormData(buildFieldDefaults(allFields, record))
+        setStepIndex(0)
+    }, [open, action.steps, record])
+
+    const updateField = (key: string, value: any) =>
+        setFormData((prev: Record<string, any>) => ({ ...prev, [key]: value }))
+
+    const step = steps[stepIndex]
+    const isLast = stepIndex === steps.length - 1
+    const stepFields = step?.fields ?? []
+
+    const hasLineItems = useMemo(
+        () => stepFields.some(isLineItemsField),
+        [stepFields],
+    )
+    const widthPx = hasLineItems ? '820px' : undefined
+
+    const goNext = () => {
+        const err = validateFields(stepFields, formData, tl)
+        if (err) {
+            toast.error(err)
+            return
+        }
+        setStepIndex((i) => Math.min(i + 1, steps.length - 1))
+    }
+
+    const goBack = () => setStepIndex((i) => Math.max(i - 1, 0))
+
+    const submit = async () => {
+        // Guard every step's required fields on final submit (a user could reach
+        // the last step with an untouched earlier line-items grid otherwise).
+        for (const s of steps) {
+            const err = validateFields(s.fields ?? [], formData, tl)
+            if (err) {
+                toast.error(err)
+                return
+            }
+        }
+        setExecuting(true)
+        try {
+            const url = buildActionUrl(endpoint, model, record?.id, action.key)
+            const res = await api.post(url, formData)
+            if (res.data.success) {
+                toast.success(res.data.message ? t(res.data.message, { defaultValue: res.data.message }) : t('common.success'))
+                onOpenChange(false)
+                onSuccess()
+            } else {
+                toast.error(res.data.message ? t(res.data.message, { defaultValue: res.data.message }) : t('common.error'))
+            }
+        } catch (err: any) {
+            toast.error(err?.response?.data?.message || t('common.error'))
+        } finally {
+            setExecuting(false)
+        }
+    }
+
+    if (steps.length === 0) return null
+
+    return (
+        <Dialog open={open} onOpenChange={onOpenChange}>
+            <DialogContent
+                className={'flex max-h-[90vh] flex-col overflow-hidden ' + (widthPx ? '' : 'sm:max-w-xl')}
+                style={{ maxHeight: '90vh', ...(widthPx ? { maxWidth: widthPx, width: '95vw' } : {}) }}
+            >
+                <DialogHeader className="shrink-0">
+                    <DialogTitle className="flex items-center gap-2">
+                        <DynamicIcon name={action.icon} className="h-5 w-5" />
+                        {tl(action.label)}
+                    </DialogTitle>
+                    {/* Progress/step bar: one segment per step. The current and
+                        completed segments are filled; a numbered marker + the
+                        current step's title tell the user where they are. Inline
+                        styles for the fill color guarantee it shows even if the
+                        host's Tailwind scan drops an arbitrary class. */}
+                    <div className="pt-2">
+                        <div className="flex items-center gap-1.5" role="list" aria-label="progress">
+                            {steps.map((s, i) => (
+                                <div
+                                    key={i}
+                                    role="listitem"
+                                    aria-current={i === stepIndex ? 'step' : undefined}
+                                    className="h-1.5 flex-1 rounded-full"
+                                    style={{
+                                        backgroundColor: i <= stepIndex ? (action.color || 'hsl(var(--primary))') : 'hsl(var(--muted))',
+                                    }}
+                                />
+                            ))}
+                        </div>
+                        <DialogDescription className="pt-2">
+                            {t('common.step', { defaultValue: 'Paso' })} {stepIndex + 1}/{steps.length}
+                            {step?.title ? ` · ${tl(step.title)}` : ''}
+                        </DialogDescription>
+                        {step?.description && (
+                            <p className="pt-1 text-sm text-muted-foreground">{tl(step.description)}</p>
+                        )}
+                    </div>
+                </DialogHeader>
+                {/* Body: only the current step's fields, laid out on the same
+                    shared FieldGrid the single-page form uses. Every step's values
+                    persist in the one formData object, so navigating back and
+                    forth keeps entries intact. */}
+                <div className="-mx-1 min-h-0 flex-1 overflow-y-auto px-1 py-4">
+                    <FieldGrid>
+                        {stepFields.map((field) => {
+                            const fullWidth =
+                                isLineItemsField(field) ||
+                                resolveWidget(field) === 'textarea' ||
+                                resolveWidget(field) === 'richtext'
+                            return (
+                                <FieldCell key={field.key} fullWidth={fullWidth}>
+                                    <FieldLabel htmlFor={field.key} required={field.required}>
+                                        {tl(field.label)}
+                                    </FieldLabel>
+                                    {renderField(field, formData[field.key], (v: any) => updateField(field.key, v), formData)}
+                                </FieldCell>
+                            )
+                        })}
+                    </FieldGrid>
+                </div>
+                <DialogFooter className="shrink-0">
+                    {/* Back is available from the second step on; Cancel closes. */}
+                    {stepIndex > 0 ? (
+                        <Button variant="outline" onClick={goBack} disabled={executing}>
+                            {t('common.back', { defaultValue: 'Atrás' })}
+                        </Button>
+                    ) : (
+                        <Button variant="outline" onClick={() => onOpenChange(false)} disabled={executing}>
+                            {t('common.cancel')}
+                        </Button>
+                    )}
+                    {isLast ? (
+                        <Button
+                            onClick={submit}
+                            disabled={executing}
+                            style={action.color ? { backgroundColor: action.color, color: 'white' } : undefined}
+                        >
+                            {executing ? <Loader2 className="mr-2 h-4 w-4 animate-spin" /> : <DynamicIcon name={action.icon} className="mr-2 h-4 w-4" />}
+                            {tl(action.label)}
+                        </Button>
+                    ) : (
+                        <Button
+                            onClick={goNext}
+                            disabled={executing}
+                            style={action.color ? { backgroundColor: action.color, color: 'white' } : undefined}
+                        >
+                            {t('common.next', { defaultValue: 'Siguiente' })}
+                        </Button>
+                    )}
+                </DialogFooter>
+            </DialogContent>
+        </Dialog>
+    )
+}
+
 function renderField(
     field: ActionFieldDef,
     value: any,

package/src/dynamic-kanban.tsx

@@ -27,6 +27,7 @@
 import * as React from 'react'
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
+import { useI18nResourceVersion } from './use-i18n-resource-version'
 import {
     DndContext,
     DragOverlay,
@@ -1919,6 +1920,11 @@ function KanbanLane({
     children,
 }: KanbanLaneProps) {
     const { t } = useTranslation()
+    // Re-resolve the lane label when an addon i18n bundle lands after the board
+    // painted (async addResourceBundle) — otherwise a manifest-key label like
+    // "integration_github.stage.in_progress" stays raw until an unrelated
+    // re-render. Independent of the host's react-i18next bindI18nStore config.
+    useI18nResourceVersion()
     // Infinite scroll: the sentinel lives at the bottom of the lane's own scroll
     // container; a load in flight or an exhausted stage disables it.
     const { rootRef, sentinelRef } = useInfiniteScrollSentinel({

package/src/index.ts

@@ -4,6 +4,21 @@
 // duplicate-symbol conflict; consumers who want the canonical SDK type
 // should import from `@asteby/metacore-sdk` directly.
 export * from './types'
+export {
+    LicenseGate,
+    LicenseExpiryBanner,
+    LicenseStatusBadge,
+    isLicenseOperable,
+    isLicenseBlocking,
+    isPresetEntitled,
+    isTrialExpired,
+    type LicenseGateProps,
+    type LicenseExpiryBannerProps,
+    type LicenseStatusBadgeProps,
+    type LicenseState,
+    type LicenseStatus,
+    type LicenseBranding,
+} from './license'
 export * from './options-context'
 export * from './dynamic-table'
 export {

package/src/license/index.ts

@@ -0,0 +1,21 @@
+export {
+    LicenseGate,
+    type LicenseGateProps,
+} from './license-gate'
+export {
+    LicenseExpiryBanner,
+    type LicenseExpiryBannerProps,
+} from './license-expiry-banner'
+export {
+    LicenseStatusBadge,
+    type LicenseStatusBadgeProps,
+} from './license-status-badge'
+export {
+    isLicenseOperable,
+    isLicenseBlocking,
+    isPresetEntitled,
+    isTrialExpired,
+    type LicenseState,
+    type LicenseStatus,
+    type LicenseBranding,
+} from './types'

package/src/license/license-expiry-banner.tsx

@@ -0,0 +1,151 @@
+/**
+ * Banner de vencimiento de licencia — la señal degradada que acompaña a las
+ * posturas que NO bloquean la app pero exigen atención:
+ *   - valid && days_remaining <= threshold  → aviso de renovación próxima
+ *   - stale                                  → check-in con el hub pendiente
+ *   - grace                                  → vencida, dentro de la gracia
+ *   - expired                                → vencida en duro (persistente)
+ *
+ * Silencioso sin enforcement o si el estado aún no cargó — nunca rompe el shell.
+ *
+ * Descartabilidad: todas las posturas son descartables con TTL en localStorage
+ * (re-aparecen pasado el TTL) MENOS `expired`, que se queda fijo como recordatorio
+ * porque el backend ya bloquea escrituras nuevas.
+ */
+import { useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import { AlertTriangle, Clock, CloudOff, X } from 'lucide-react'
+import { Button } from '@asteby/metacore-ui'
+import type { LicenseState } from './types'
+
+const DISMISS_KEY = 'license_banner_dismissed_at'
+const DISMISS_TTL_MS = 12 * 60 * 60 * 1000 // re-mostrar cada 12h aunque se descarte
+const UPCOMING_THRESHOLD_DAYS = 15
+
+function cx(...parts: Array<string | false | undefined>): string {
+    return parts.filter(Boolean).join(' ')
+}
+
+export interface LicenseExpiryBannerProps {
+    state: LicenseState | undefined
+    /** Días de anticipación para el aviso de renovación. Default 15. */
+    upcomingThresholdDays?: number
+    /** Clave localStorage para recordar el descarte. */
+    dismissStorageKey?: string
+    /** Acción "Gestionar licencia" — el host enruta a sus Ajustes. Si se omite,
+     * no se muestra el botón (el gate no asume rutas del host). */
+    onManage?: () => void
+    /** Etiqueta del botón de gestión (default localizado). */
+    manageLabel?: string
+    className?: string
+}
+
+export function LicenseExpiryBanner({
+    state,
+    upcomingThresholdDays = UPCOMING_THRESHOLD_DAYS,
+    dismissStorageKey = DISMISS_KEY,
+    onManage,
+    manageLabel,
+    className,
+}: LicenseExpiryBannerProps) {
+    const { t } = useTranslation()
+    const [dismissed, setDismissed] = useState(() => {
+        if (typeof window === 'undefined') return false
+        const raw = window.localStorage.getItem(dismissStorageKey)
+        if (!raw) return false
+        return Date.now() - Number(raw) < DISMISS_TTL_MS
+    })
+
+    if (!state || !state.enforced) return null
+
+    const isUpcoming =
+        state.status === 'valid' && state.days_remaining <= upcomingThresholdDays
+    const isStale = state.status === 'stale'
+    const isGrace = state.status === 'grace'
+    const isExpired = state.status === 'expired'
+    if (!isUpcoming && !isStale && !isGrace && !isExpired) return null
+
+    // Expired no es descartable — se queda como recordatorio constante.
+    if (dismissed && !isExpired) return null
+
+    const dismiss = () => {
+        setDismissed(true)
+        try {
+            window.localStorage.setItem(dismissStorageKey, String(Date.now()))
+        } catch {
+            // cuota/entorno sin storage — el descarte solo dura la sesión.
+        }
+    }
+
+    const message = isExpired
+        ? t('license.banner.expired', {
+              defaultValue:
+                  'Tu licencia venció. Algunas acciones pueden estar bloqueadas.',
+          })
+        : isStale
+          ? t('license.banner.stale', {
+                defaultValue:
+                    'Esta instancia no ha podido verificar su licencia con el hub. Reconéctala para completar el check-in.',
+            })
+          : isGrace
+            ? t('license.banner.grace', {
+                  defaultValue:
+                      'Tu licencia venció y está en periodo de gracia hasta {{date}} ({{days}} días restantes).',
+                  date: state.grace_until
+                      ? new Date(state.grace_until).toLocaleDateString()
+                      : '—',
+                  days: state.days_remaining,
+              })
+            : t('license.banner.upcoming', {
+                  defaultValue: 'Tu licencia vence en {{days}} días.',
+                  days: state.days_remaining,
+              })
+
+    const Icon = isExpired ? AlertTriangle : isStale ? CloudOff : Clock
+
+    return (
+        <div
+            role="alert"
+            data-license-status={state.status}
+            className={cx(
+                'flex items-center justify-between gap-3 border-b px-4 py-2.5 text-sm',
+                isExpired
+                    ? 'border-destructive/30 bg-destructive text-white'
+                    : 'border-amber-500/30 bg-amber-500/10 text-foreground',
+                className,
+            )}
+        >
+            <div className="flex min-w-0 items-center gap-2">
+                <Icon className="h-4 w-4 shrink-0" aria-hidden />
+                <span className="truncate">{message}</span>
+            </div>
+            <div className="flex shrink-0 items-center gap-2">
+                {onManage && (
+                    <Button
+                        size="sm"
+                        variant={isExpired ? 'secondary' : 'outline'}
+                        onClick={onManage}
+                    >
+                        {manageLabel ??
+                            t('license.banner.manage', {
+                                defaultValue: 'Gestionar licencia',
+                            })}
+                    </Button>
+                )}
+                {!isExpired && (
+                    <Button
+                        size="icon"
+                        variant="ghost"
+                        className="h-7 w-7"
+                        onClick={dismiss}
+                        title={t('license.banner.dismiss', {
+                            defaultValue: 'Descartar',
+                        })}
+                    >
+                        <X className="h-4 w-4" />
+                    </Button>
+                )}
+            </div>
+        </div>
+    )
+}