@asteby/metacore-runtime-react 46.4.0 → 47.0.0

package/src/action-modal-dispatcher.tsx

@@ -14,7 +14,8 @@
 //
 // The host injects its axios-like client via <ApiProvider>; we no longer
 // depend on a bundler alias to `@/lib/api`.
-import { useState, useEffect, useMemo, useRef, useSyncExternalStore } from 'react'
+import { emitRecordMutation } from './record-mutation-events'
+import { useState, useCallback, useEffect, useMemo, useRef, useSyncExternalStore } from 'react'
 import { useTranslation } from 'react-i18next'
 import {
     Dialog,
@@ -44,7 +45,9 @@ import {
 import { Loader2 } from 'lucide-react'
 import { ProcessStepper } from '@asteby/metacore-ui/wizard'
 import { toast } from 'sonner'
-import { toastServerError, toastServerSuccess, extractFieldErrors, localizeFieldErrorMap } from './server-error'
+import { toastServerError, toastServerSuccess, extractFieldErrors, extractServerError, localizeFieldErrorMap } from './server-error'
+import { FormErrorBanner } from './business/feedback'
+import { CfdiStampResultDialog, extractStampResult, type CfdiStampResult } from './cfdi-stamp-panel'
 import { useBranchCreateGate } from './branch-create-gate'
 import type { Translate } from './server-error'
 import { validateValues, bagHasErrors } from './validator'
@@ -358,8 +361,15 @@ export function ActionModalDispatcher({
     model,
     record,
     endpoint,
-    onSuccess,
+    onSuccess: onSuccessProp,
 }: ActionModalProps) {
+    // Every successful action may have created/updated/deleted a record of
+    // `model` (federated component, wizard, generic form or confirmation), so
+    // announce it: mounted lists of the model reload on their own (#1020).
+    const onSuccess = useCallback(() => {
+        emitRecordMutation(model, 'update')
+        onSuccessProp?.()
+    }, [model, onSuccessProp])
     // Reactive read: a federated remote usually registers AFTER the first
     // render, and a memoized lookup would pin the fallback forever.
     const readComponent = () => getActionComponent(model, action.key)
@@ -794,10 +804,34 @@ function toastActionError(
     toastServerError(err, { t, language })
 }
 
+/** Text for the in-dialog error banner of a failed action (PIT-046, #1023): a
+ *  422 with per-field `errors` -> "Revisa los campos" + each localized line; any
+ *  other failure (500, network) -> the server's own message and cause. Unlike
+ *  the toast it stays on screen until the next attempt. */
+export function actionErrorBannerMessage(
+    err: unknown,
+    fields: readonly ActionFieldDef[] | undefined,
+    t: Translate,
+    language?: string,
+): string {
+    const localized = localizeActionFieldErrors(err, fields, t, language)
+    if (localized) {
+        const head = t('validation.failed', { defaultValue: validationCatalog(language).failed })
+        const lines = Object.values(localized).filter(Boolean)
+        return lines.length ? `${head}: ${lines.join(' · ')}` : head
+    }
+    const fallback = t('common.error', { defaultValue: 'Algo salió mal. Intenta de nuevo.' })
+    const ex = extractServerError(err, fallback)
+    const title = t(ex.title, { defaultValue: ex.title })
+    return ex.description && ex.description !== title ? `${title} — ${ex.description}` : title
+}
+
 function ConfirmActionDialog({ open, onOpenChange, action, model, record, endpoint, onSuccess }: ActionModalProps) {
     const { t, i18n } = useTranslation()
     const api = useApi()
     const [executing, setExecuting] = useState(false)
+    const [formError, setFormError] = useState<string | undefined>()
+    const [stamp, setStamp] = useState<CfdiStampResult | undefined>()
     // Actions listed in the model's `reason_required.actions` (cancel, void…)
     // answer 422 errors.reason without a motive; the prompt asks and retries.
     const reasonPrompt = useReasonPrompt()
@@ -809,6 +843,7 @@ function ConfirmActionDialog({ open, onOpenChange, action, model, record, endpoi
 
     const execute = async () => {
         setExecuting(true)
+        setFormError(undefined)
         try {
             const url = buildActionUrl(endpoint, model, record.id, action.key)
             // Supervisor PIN first (action.supervisorPolicy); null = cancelled.
@@ -823,18 +858,41 @@ function ConfirmActionDialog({ open, onOpenChange, action, model, record, endpoi
             if (!res) return
             if (res.data.success) {
                 toastServerSuccess(res.data, { t })
+                const result = extractStampResult(res.data)
+                if (result) {
+                    setStamp(result)
+                    return
+                }
                 onOpenChange(false)
                 onSuccess()
             } else {
+                setFormError(actionErrorBannerMessage({ response: { data: res.data } }, action.fields, t, i18n.language))
                 toastActionError({ response: { data: res.data } }, action.fields, t, i18n.language)
             }
         } catch (err: any) {
+            setFormError(actionErrorBannerMessage(err, action.fields, t, i18n.language))
             toastActionError(err, action.fields, t, i18n.language)
         } finally {
             setExecuting(false)
         }
     }
 
+    if (stamp) {
+        return (
+            <CfdiStampResultDialog
+                open={open}
+                result={stamp}
+                title={label}
+                onOpenChange={(o) => {
+                    if (o) return
+                    setStamp(undefined)
+                    onOpenChange(false)
+                    onSuccess()
+                }}
+            />
+        )
+    }
+
     return (
         <>
         {reasonPrompt.dialog}
@@ -850,6 +908,7 @@ function ConfirmActionDialog({ open, onOpenChange, action, model, record, endpoi
                     </AlertDialogDescription>
                 </AlertDialogHeader>
                 {record ? <RecordPreview model={model} record={record} /> : null}
+                <FormErrorBanner message={formError} />
                 <AlertDialogFooter>
                     <AlertDialogCancel disabled={executing}>{t('common.cancel')}</AlertDialogCancel>
                     <AlertDialogAction
@@ -881,6 +940,10 @@ function GenericActionModal({ open, onOpenChange, action, model, record, endpoin
     const [executing, setExecuting] = useState(false)
     // Per-field validation errors (localized), shown inline under each input.
     const [fieldErrors, setFieldErrors] = useState<Record<string, string>>({})
+    // Persistent in-dialog banner for a failed submit (422 / 500) — the toast
+    // alone vanished and, for some failures, only the console had the cause.
+    const [formError, setFormError] = useState<string | undefined>()
+    const [stamp, setStamp] = useState<CfdiStampResult | undefined>()
     // Related records to surface BELOW the form, as read-only context for the
     // record being acted on — e.g. the reception history of a transfer while
     // receiving against it. Sourced from the model's metadata.relations (the
@@ -912,6 +975,7 @@ function GenericActionModal({ open, onOpenChange, action, model, record, endpoin
         if (open && action.fields) {
             setFormData(buildFieldDefaults(action.fields, record))
             setFieldErrors({})
+            setFormError(undefined)
         }
     }, [open, action.fields, record])
 
@@ -999,6 +1063,7 @@ function GenericActionModal({ open, onOpenChange, action, model, record, endpoin
 
     const lang = i18n.language
     const handleActionError = (err: unknown) => {
+        setFormError(actionErrorBannerMessage(err, action.fields, t, lang))
         const labels = labelsForValidationFields(action.fields, t)
         const localized = localizeActionFieldErrors(err, action.fields, t, lang)
         if (localized) {
@@ -1035,6 +1100,7 @@ function GenericActionModal({ open, onOpenChange, action, model, record, endpoin
             }
         }
         setFieldErrors({})
+        setFormError(undefined)
         setExecuting(true)
         try {
             let payload: Record<string, any> = { ...formData }
@@ -1069,6 +1135,11 @@ function GenericActionModal({ open, onOpenChange, action, model, record, endpoin
             if (!res) return
             if (res.data.success) {
                 toastServerSuccess(res.data, { t })
+                const result = extractStampResult(res.data)
+                if (result) {
+                    setStamp(result)
+                    return
+                }
                 onOpenChange(false)
                 onSuccess()
             } else {
@@ -1102,6 +1173,22 @@ function GenericActionModal({ open, onOpenChange, action, model, record, endpoin
               ? '820px'
               : undefined
 
+    if (stamp) {
+        return (
+            <CfdiStampResultDialog
+                open={open}
+                result={stamp}
+                title={tl(action.label)}
+                onOpenChange={(o) => {
+                    if (o) return
+                    setStamp(undefined)
+                    onOpenChange(false)
+                    onSuccess()
+                }}
+            />
+        )
+    }
+
     return (
         <Dialog open={open} onOpenChange={onOpenChange}>
             {/* Sticky header + footer, scrollable body: the form can grow tall
@@ -1127,6 +1214,7 @@ function GenericActionModal({ open, onOpenChange, action, model, record, endpoin
                     (in FieldCell) keeps a long select/input value from blowing the
                     grid past the dialog and spawning a horizontal scrollbar. */}
                 <div className="-mx-1 min-h-0 flex-1 overflow-y-auto px-1 py-4">
+                    <FormErrorBanner message={formError} className="mb-3" />
                     <FieldGrid>
                         {action.fields?.map((field) => {
                             const fullWidth =
@@ -1183,7 +1271,7 @@ 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> {
+export function buildFieldDefaults(fields: ActionFieldDef[], record: any): Record<string, any> {
     const defaults: Record<string, any> = {}
     for (const field of fields) {
         if (isLineItemsField(field)) {
@@ -1235,6 +1323,8 @@ function WizardActionModal({ open, onOpenChange, action, model, record, endpoint
     const [stepIndex, setStepIndex] = useState(0)
     const [formData, setFormData] = useState<Record<string, any>>({})
     const [executing, setExecuting] = useState(false)
+    const [formError, setFormError] = useState<string | undefined>()
+    const [stamp, setStamp] = useState<CfdiStampResult | undefined>()
 
     // 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.
@@ -1243,6 +1333,7 @@ function WizardActionModal({ open, onOpenChange, action, model, record, endpoint
         const allFields = steps.flatMap((s) => s.fields ?? [])
         setFormData(buildFieldDefaults(allFields, record))
         setStepIndex(0)
+        setFormError(undefined)
     }, [open, action.steps, record])
 
     const updateField = (key: string, value: any) =>
@@ -1284,6 +1375,7 @@ function WizardActionModal({ open, onOpenChange, action, model, record, endpoint
             }
         }
         setExecuting(true)
+        setFormError(undefined)
         try {
             const url = buildActionUrl(endpoint, model, record?.id, action.key)
             const auth = await supervisor.authorize(
@@ -1297,14 +1389,22 @@ function WizardActionModal({ open, onOpenChange, action, model, record, endpoint
                 request: (reason) => api.post(url, withApproval(reason ? { ...formData, reason } : formData, auth)),
             })
             if (!res) return
+            const allFields = steps.flatMap(s => s.fields ?? [])
             if (res.data.success) {
                 toastServerSuccess(res.data, { t })
+                const result = extractStampResult(res.data)
+                if (result) {
+                    setStamp(result)
+                    return
+                }
                 onOpenChange(false)
                 onSuccess()
             } else {
-                toastActionError({ response: { data: res.data } }, steps.flatMap(s => s.fields ?? []), t, i18n.language)
+                setFormError(actionErrorBannerMessage({ response: { data: res.data } }, allFields, t, i18n.language))
+                toastActionError({ response: { data: res.data } }, allFields, t, i18n.language)
             }
         } catch (err: any) {
+            setFormError(actionErrorBannerMessage(err, steps.flatMap(s => s.fields ?? []), t, i18n.language))
             toastActionError(err, steps.flatMap(s => s.fields ?? []), t, i18n.language)
         } finally {
             setExecuting(false)
@@ -1313,6 +1413,22 @@ function WizardActionModal({ open, onOpenChange, action, model, record, endpoint
 
     if (steps.length === 0) return null
 
+    if (stamp) {
+        return (
+            <CfdiStampResultDialog
+                open={open}
+                result={stamp}
+                title={tl(action.label)}
+                onOpenChange={(o) => {
+                    if (o) return
+                    setStamp(undefined)
+                    onOpenChange(false)
+                    onSuccess()
+                }}
+            />
+        )
+    }
+
     return (
         <Dialog open={open} onOpenChange={onOpenChange}>
             <DialogContent
@@ -1347,6 +1463,7 @@ function WizardActionModal({ open, onOpenChange, action, model, record, endpoint
                     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">
+                    <FormErrorBanner message={formError} className="mb-3" />
                     <FieldGrid>
                         {stepFields.map((field) => {
                             const fullWidth =
@@ -1423,7 +1540,8 @@ function seedOptionFromRecord(
     }
 }
 
-function renderField(
+/** Renders one action field (same widgets as the action modals). Shared with DocumentFormDialog. */
+export function renderField(
     field: ActionFieldDef,
     value: any,
     onChange: (value: any) => void,

package/src/business/catalog.ts

@@ -94,4 +94,28 @@ export const BUSINESS_COMPONENTS: readonly BusinessComponentSpec[] = [
             'recommendationsToLines',
         ],
     },
+    {
+        name: 'VehiclePicker',
+        value: 'value: VehicleResult | null',
+        events: ['onChange'],
+        permissions: ['<model>.create (alta rápida; default Vehicle → vehicle.create)'],
+        usedBy: ['POS', 'Recepción de vehículo', 'OT', 'Cotización', 'Pedido'],
+        helpers: ['describeVehicle'],
+    },
+    {
+        name: 'RelateDocuments',
+        value: 'value: RelatedDocument[] (related_document_id + relation_type)',
+        events: ['onChange'],
+        permissions: [],
+        usedBy: ['Nota de crédito', 'Devolución', 'Sustitución de CFDI', 'REP'],
+        helpers: ['serializeRelatedDocuments'],
+    },
+    {
+        name: 'PrintSendDialog',
+        value: 'document: PrintableDocument (+ open)',
+        events: ['onSend', 'onPrint', 'onOpenChange'],
+        permissions: [],
+        usedBy: ['Cotización', 'Factura', 'Nota de crédito', 'Pedido', 'OC'],
+        helpers: [],
+    },
 ] as const

package/src/business/index.ts

@@ -16,3 +16,6 @@ export * from './return'
 export * from './return-wizard'
 export * from './inspection'
 export * from './inspection-checklist'
+export * from './vehicle-picker'
+export * from './relate-documents'
+export * from './print-send-dialog'

package/src/business/print-send-dialog.tsx

@@ -0,0 +1,175 @@
+// PrintSendDialog — imprimir o enviar un documento ya emitido (cotización,
+// factura, nota de crédito…). El SDK NO llama a un proveedor de mensajería: el
+// host recibe `onSend(channel, destination, document)` y decide qué hacer.
+// Imprimir usa la URL del PDF que pasa el host (o su propio `onPrint`).
+import { useEffect, useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import { Mail, MessageCircle, Printer, Loader2 } from 'lucide-react'
+import {
+    Button,
+    Dialog,
+    DialogContent,
+    DialogDescription,
+    DialogFooter,
+    DialogHeader,
+    DialogTitle,
+    Input,
+} from '@asteby/metacore-ui/primitives'
+import { FormErrorBanner } from './feedback'
+
+export type SendChannel = 'email' | 'whatsapp'
+
+export interface PrintableDocument {
+    folio: string
+    /** URL del PDF ya generado. Sin ella no hay «Imprimir». */
+    pdfUrl?: string
+    /** Texto de cabecera («Factura», «Cotización»). */
+    title?: string
+    /** Destinos sugeridos (datos del cliente). */
+    email?: string
+    phone?: string
+}
+
+export interface PrintSendDialogProps {
+    open: boolean
+    onOpenChange: (open: boolean) => void
+    document: PrintableDocument
+    /** Canales de envío disponibles. Default: ambos. Vacío = solo imprimir. */
+    channels?: SendChannel[]
+    /**
+     * Envío a cargo del host. Si rechaza, el mensaje se muestra en el diálogo.
+     * Sin `onSend` no se ofrece enviar.
+     */
+    onSend?: (channel: SendChannel, destination: string, document: PrintableDocument) => Promise<void> | void
+    /** Reemplaza la impresión por defecto (abrir `pdfUrl` en otra pestaña). */
+    onPrint?: (document: PrintableDocument) => void
+}
+
+function defaultPrint(doc: PrintableDocument): void {
+    if (!doc.pdfUrl || typeof window === 'undefined') return
+    window.open(doc.pdfUrl, '_blank', 'noopener,noreferrer')
+}
+
+export function PrintSendDialog({
+    open,
+    onOpenChange,
+    document: doc,
+    channels = ['email', 'whatsapp'],
+    onSend,
+    onPrint,
+}: PrintSendDialogProps) {
+    const { t } = useTranslation()
+    const [channel, setChannel] = useState<SendChannel>(channels[0] ?? 'email')
+    const [destination, setDestination] = useState('')
+    const [sending, setSending] = useState(false)
+    const [sent, setSent] = useState(false)
+    const [error, setError] = useState<string | undefined>()
+
+    const suggested = channel === 'email' ? doc.email : doc.phone
+    useEffect(() => {
+        if (open) {
+            setDestination(suggested ?? '')
+            setSent(false)
+            setError(undefined)
+        }
+    }, [open, channel, suggested])
+
+    const canSend = !!onSend && channels.length > 0
+    const send = async () => {
+        const dest = destination.trim()
+        if (!onSend || !dest) return
+        setSending(true)
+        setError(undefined)
+        setSent(false)
+        try {
+            await onSend(channel, dest, doc)
+            setSent(true)
+        } catch (e) {
+            const msg = (e as { message?: unknown } | undefined)?.message
+            setError(
+                typeof msg === 'string' && msg
+                    ? msg
+                    : t('printSend.error', { defaultValue: 'No se pudo enviar el documento. Inténtalo de nuevo.' }),
+            )
+        } finally {
+            setSending(false)
+        }
+    }
+
+    const channelLabel = (c: SendChannel) =>
+        c === 'email' ? t('printSend.email', { defaultValue: 'Correo' }) : t('printSend.whatsapp', { defaultValue: 'WhatsApp' })
+
+    return (
+        <Dialog open={open} onOpenChange={onOpenChange}>
+            <DialogContent className="sm:max-w-md">
+                <DialogHeader>
+                    <DialogTitle>
+                        {t('printSend.title', { defaultValue: 'Imprimir o enviar' })}
+                        {doc.title ? ` · ${doc.title}` : ''}
+                    </DialogTitle>
+                    <DialogDescription>{doc.folio}</DialogDescription>
+                </DialogHeader>
+
+                <div className="space-y-4">
+                    <Button
+                        type="button"
+                        variant="outline"
+                        className="w-full justify-start"
+                        disabled={!doc.pdfUrl && !onPrint}
+                        onClick={() => (onPrint ?? defaultPrint)(doc)}
+                    >
+                        <Printer className="mr-2 size-4" aria-hidden />
+                        {t('printSend.print', { defaultValue: 'Imprimir' })}
+                    </Button>
+
+                    {canSend && (
+                        <div className="space-y-2">
+                            {channels.length > 1 && (
+                                <div className="flex gap-2" role="group" aria-label={t('printSend.channel', { defaultValue: 'Canal de envío' })}>
+                                    {channels.map((c) => (
+                                        <Button
+                                            key={c}
+                                            type="button"
+                                            size="sm"
+                                            variant={c === channel ? 'default' : 'outline'}
+                                            aria-pressed={c === channel}
+                                            onClick={() => setChannel(c)}
+                                        >
+                                            {c === 'email' ? <Mail className="mr-1.5 size-4" aria-hidden /> : <MessageCircle className="mr-1.5 size-4" aria-hidden />}
+                                            {channelLabel(c)}
+                                        </Button>
+                                    ))}
+                                </div>
+                            )}
+                            <Input
+                                value={destination}
+                                type={channel === 'email' ? 'email' : 'tel'}
+                                aria-label={t('printSend.destination', { defaultValue: 'Destino' })}
+                                placeholder={channel === 'email' ? 'cliente@ejemplo.com' : '+52 55 0000 0000'}
+                                onChange={(e) => setDestination(e.target.value)}
+                            />
+                            <FormErrorBanner message={error} />
+                            {sent && (
+                                <p role="status" className="text-sm text-emerald-600 dark:text-emerald-400">
+                                    {t('printSend.sent', { defaultValue: 'Enviado.' })}
+                                </p>
+                            )}
+                        </div>
+                    )}
+                </div>
+
+                <DialogFooter>
+                    <Button type="button" variant="outline" onClick={() => onOpenChange(false)}>
+                        {t('common.close', { defaultValue: 'Cerrar' })}
+                    </Button>
+                    {canSend && (
+                        <Button type="button" onClick={send} disabled={sending || !destination.trim()}>
+                            {sending && <Loader2 className="mr-2 size-4 animate-spin" aria-hidden />}
+                            {t('printSend.send', { defaultValue: 'Enviar' })}
+                        </Button>
+                    )}
+                </DialogFooter>
+            </DialogContent>
+        </Dialog>
+    )
+}