@adatechnology/notification-ui 0.2.1 → 0.4.0

package/dist/index.d.ts

@@ -1,7 +1,7 @@
 export { D as DEFAULT_LOCALE, N as NOTIFICATION_QUERY_KEYS, a as NotificationContextValue, b as NotificationLocale, c as NotificationMessages, d as NotificationProvider, e as NotificationProviderProps, f as NotificationTheme, S as SORT_DIRECTIONS, g as SortDirection, T as TEMPLATE_COLUMNS, h as TEMPLATE_SORT_FIELDS, i as TEMPLATE_VIEWS, j as TemplateColumn, k as TemplateDraft, l as TemplateDraftField, m as TemplatePreviewFrame, n as TemplateSort, o as TemplateSortField, p as TemplateView, U as UseCategoryPoliciesResult, q as UseNotificationStreamOptions, r as UseNotificationsOptions, s as UseTemplateEditorParams, t as UseTemplateEditorResult, u as flattenNotificationPages, v as formatNotificationTime, w as formatNotificationTimestamp, x as resolveMessages, y as useCategoryPolicies, z as useDeactivateTemplate, A as useDeleteNotification, B as useMarkAllAsRead, C as useMarkAsRead, E as useNotificationContext, F as useNotificationStream, G as useNotifications, H as usePreferences, I as useRestoreTemplateDefault, J as useTemplateEditor, K as useTemplateVariables, L as useTemplates, M as useUnreadCount, O as useUpdatePreferences, P as useUpsertTemplate } from './headless-03_gfBEI.js';
 import * as react from 'react';
 import { ReactNode } from 'react';
-import { NotificationSummary, NotificationTemplate } from '@adatechnology/notification-contracts';
+import { NotificationSummary, NotificationTemplate, RenderedTemplatePreview } from '@adatechnology/notification-contracts';
 import '@adatechnology/notification-client';
 import '@tanstack/react-query';
 
@@ -228,6 +228,50 @@ type MessageBodyFieldProps = {
 };
 declare function MessageBodyField({ value, rows, onChange, onSelect, onFocus, labelOf }: MessageBodyFieldProps): react.JSX.Element;
 
+type TemplatePreviewProps = {
+    readonly channel: string;
+    readonly viewport: string;
+    readonly rendered: RenderedTemplatePreview;
+    /**
+     * O documento de e-mail COMPLETO, já com a moldura da marca em volta do corpo. Vem do produto:
+     * o pacote não conhece logo, cartão de usuário nem rodapé. Ausente, o corpo aparece como texto.
+     */
+    readonly emailHtml?: string;
+    /** Nome do produto, para o cabeçalho do e-mail e o do push. O pacote não sabe de quem é a marca. */
+    readonly senderName?: string;
+    /**
+     * Arquivo que segue com a mensagem (ex.: o PDF do boleto). Aparece como cartão de documento no
+     * balão do WhatsApp e como chip no fim do e-mail. O nome e o tamanho vêm do produto.
+     */
+    readonly attachment?: PreviewAttachment;
+    /** Os textos da moldura. Nada aqui é hardcoded — nem "para você", nem "agora" (web.md §6). */
+    readonly labels: PreviewLabels;
+};
+type PreviewAttachment = {
+    readonly name: string;
+    /** Já formatado pelo produto (ex.: "4,4 KB · PDF"). Ausente, só o nome. */
+    readonly detail?: string;
+};
+type PreviewLabels = {
+    readonly to: string;
+    readonly now: string;
+    readonly mailbox: string;
+    /** Hora da barra de status do aparelho. */
+    readonly time: string;
+    readonly address: string;
+    readonly counter: string;
+    readonly folder: string;
+    readonly senderAddress: string;
+    readonly unsubscribe: string;
+    readonly online: string;
+    readonly today: string;
+    readonly compose: string;
+    readonly reply: string;
+    readonly forward: string;
+    readonly replyAll: string;
+};
+declare function TemplatePreview({ channel, viewport, rendered, emailHtml, senderName, attachment, labels, }: TemplatePreviewProps): react.JSX.Element;
+
 /**
  * Copyright (c) 2026 Ada Technology. MIT License.
  *
@@ -315,4 +359,4 @@ declare function insertAt({ text, insertion, selectionStart, selectionEnd, }: {
     readonly selectionEnd: number;
 }): ApplyMarkResult;
 
-export { HTML_TOKEN, HtmlCodeField, type HtmlCodeFieldProblem, type HtmlCodeFieldProps, type HtmlToken, type HtmlTokenKind, MESSAGE_EMOJI, MESSAGE_FORMAT, MESSAGE_FORMAT_MARKS, MessageBodyField, type MessageBodyFieldProps, type MessageFormat, type MessageFormatMark, MessageToolbar, type MessageToolbarProps, NotificationBell, type NotificationBellProps, type NotificationCategoryOption, type NotificationChannelOption, NotificationItem, type NotificationItemProps, NotificationList, type NotificationListProps, NotificationSettingsWorkspace, type NotificationSettingsWorkspaceProps, NotificationsWorkspace, type NotificationsWorkspaceProps, PreferencesPanel, type PreferencesPanelProps, applyMark, insertAt, tokenizeHtml };
+export { HTML_TOKEN, HtmlCodeField, type HtmlCodeFieldProblem, type HtmlCodeFieldProps, type HtmlToken, type HtmlTokenKind, MESSAGE_EMOJI, MESSAGE_FORMAT, MESSAGE_FORMAT_MARKS, MessageBodyField, type MessageBodyFieldProps, type MessageFormat, type MessageFormatMark, MessageToolbar, type MessageToolbarProps, NotificationBell, type NotificationBellProps, type NotificationCategoryOption, type NotificationChannelOption, NotificationItem, type NotificationItemProps, NotificationList, type NotificationListProps, NotificationSettingsWorkspace, type NotificationSettingsWorkspaceProps, NotificationsWorkspace, type NotificationsWorkspaceProps, PreferencesPanel, type PreferencesPanelProps, type PreviewAttachment, type PreviewLabels, TemplatePreview, type TemplatePreviewProps, applyMark, insertAt, tokenizeHtml };

package/dist/index.js

@@ -611,6 +611,7 @@ function MessageBodyField({ value, rows = 5, onChange, onSelect, onFocus, labelO
 }
 
 // src/components/TemplatePreview.tsx
+import { parseWhatsAppFormatting } from "@adatechnology/conversations-ui";
 import { jsx as jsx9, jsxs as jsxs9 } from "react/jsx-runtime";
 function StatusIcons() {
   return /* @__PURE__ */ jsxs9("span", { className: "adn-preview-status__icons", children: [
@@ -631,12 +632,7 @@ function StatusIcons() {
     ] })
   ] });
 }
-function Phone({
-  children,
-  os,
-  tone,
-  time
-}) {
+function Phone({ children, os, tone, time }) {
   const android = os === "android";
   const classes = ["adn-preview-phone", `adn-preview-phone--${android ? "android" : "ios"}`];
   if (tone === "dark") classes.push("adn-preview-phone--dark");
@@ -697,13 +693,15 @@ var ICON = {
   forward: "M15 17h5V7M20 7l-7 7M4 17v-3a6 6 0 0 1 6-6h10",
   replyAll: "M7 17H3V9M3 9l5 5M11 17H8V9M8 9l5 5M20 17v-3a6 6 0 0 0-6-6H8",
   chevron: "m6 9 6 6 6-6",
+  file: "M14 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8zM14 3v5h5",
   settings: "M12 15a3 3 0 1 0 0-6 3 3 0 0 0 0 6M19 12a7 7 0 0 0-.1-1l2-1.5-2-3.4-2.3 1a7 7 0 0 0-1.7-1L14.5 3h-4l-.4 2.6a7 7 0 0 0-1.7 1l-2.3-1-2 3.4L6.1 11a7 7 0 0 0 0 2l-2 1.5 2 3.4 2.3-1a7 7 0 0 0 1.7 1l.4 2.6h4l.4-2.6a7 7 0 0 0 1.7-1l2.3 1 2-3.4-2-1.5c.1-.3.1-.7.1-1"
 };
 function EmailDesktop({
   rendered,
   emailHtml,
   senderName,
-  labels
+  labels,
+  attachment
 }) {
   return /* @__PURE__ */ jsxs9("div", { className: "adn-preview-browser", children: [
     /* @__PURE__ */ jsxs9("div", { className: "adn-preview-browser__bar", children: [
@@ -777,7 +775,8 @@ function EmailDesktop({
                 /* @__PURE__ */ jsx9(Icon, { d: ICON.more, size: 15 })
               ] })
             ] }),
-            /* @__PURE__ */ jsx9(MailBody, { html: emailHtml, text: rendered.body })
+            /* @__PURE__ */ jsx9(MailBody, { html: emailHtml, text: rendered.body }),
+            attachment ? /* @__PURE__ */ jsx9(AttachmentCard, { attachment, block: "adn-preview-attachment--mail" }) : null
           ] })
         ] })
       ] })
@@ -789,7 +788,8 @@ function EmailMobile({
   emailHtml,
   senderName,
   os,
-  labels
+  labels,
+  attachment
 }) {
   return /* @__PURE__ */ jsxs9(Phone, { os, time: labels.time, children: [
     /* @__PURE__ */ jsxs9("div", { className: "adn-preview-mailapp__actions", children: [
@@ -818,6 +818,7 @@ function EmailMobile({
         /* @__PURE__ */ jsx9("span", { className: "adn-preview-mail__from-actions", children: /* @__PURE__ */ jsx9(Icon, { d: ICON.star, size: 17 }) })
       ] }),
       /* @__PURE__ */ jsx9(MailBody, { html: emailHtml, text: rendered.body }),
+      attachment ? /* @__PURE__ */ jsx9(AttachmentCard, { attachment, block: "adn-preview-attachment--mail" }) : null,
       /* @__PURE__ */ jsxs9("div", { className: "adn-preview-mail__reply", children: [
         /* @__PURE__ */ jsxs9("span", { className: "adn-preview-mail__reply-button", children: [
           /* @__PURE__ */ jsx9(Icon, { d: ICON.reply, size: 14 }),
@@ -839,7 +840,8 @@ function WhatsAppPreview({
   rendered,
   labels,
   os,
-  senderName
+  senderName,
+  attachment
 }) {
   return /* @__PURE__ */ jsxs9(Phone, { os, time: labels.time, children: [
     /* @__PURE__ */ jsxs9("div", { className: "adn-preview-wa__header", children: [
@@ -858,7 +860,8 @@ function WhatsAppPreview({
     /* @__PURE__ */ jsxs9("div", { className: "adn-preview-wa", children: [
       /* @__PURE__ */ jsx9("div", { className: "adn-preview-wa__day", children: labels.today }),
       /* @__PURE__ */ jsxs9("div", { className: "adn-preview-wa__bubble", children: [
-        /* @__PURE__ */ jsx9("div", { className: "adn-preview-wa__text", children: rendered.body }),
+        attachment ? /* @__PURE__ */ jsx9(AttachmentCard, { attachment, block: "adn-preview-attachment--wa" }) : null,
+        /* @__PURE__ */ jsx9("div", { className: "adn-preview-wa__text", children: parseWhatsAppFormatting(rendered.body) }),
         /* @__PURE__ */ jsx9("div", { className: "adn-preview-wa__time", children: labels.now })
       ] })
     ] }),
@@ -900,6 +903,15 @@ function InboxPreview({ rendered }) {
     ] })
   ] });
 }
+function AttachmentCard({ attachment, block }) {
+  return /* @__PURE__ */ jsxs9("div", { className: `adn-preview-attachment ${block}`, children: [
+    /* @__PURE__ */ jsx9(Icon, { d: ICON.file, size: 18 }),
+    /* @__PURE__ */ jsxs9("span", { className: "adn-preview-attachment__text", children: [
+      /* @__PURE__ */ jsx9("span", { className: "adn-preview-attachment__name", children: attachment.name }),
+      attachment.detail ? /* @__PURE__ */ jsx9("span", { className: "adn-preview-attachment__detail", children: attachment.detail }) : null
+    ] })
+  ] });
+}
 function MailBody({ html, text }) {
   if (!html) return /* @__PURE__ */ jsx9("div", { className: "adn-preview-mail__body", children: text });
   return /* @__PURE__ */ jsx9(
@@ -912,17 +924,44 @@ function MailBody({ html, text }) {
     }
   );
 }
-function TemplatePreview({ channel, viewport, rendered, emailHtml, senderName, labels }) {
+function TemplatePreview({
+  channel,
+  viewport,
+  rendered,
+  emailHtml,
+  senderName,
+  attachment,
+  labels
+}) {
   const sender = senderName ?? rendered.title.slice(0, 1).toUpperCase();
   if (channel === "whatsapp") {
-    return /* @__PURE__ */ jsx9(WhatsAppPreview, { rendered, labels, os: viewport, senderName: sender });
+    return /* @__PURE__ */ jsx9(WhatsAppPreview, { rendered, labels, os: viewport, senderName: sender, attachment });
   }
   if (channel === "sms") return /* @__PURE__ */ jsx9(SmsPreview, { rendered, os: viewport, labels });
   if (channel === "push") {
     return /* @__PURE__ */ jsx9(PushPreview, { rendered, senderName: sender, labels, os: viewport });
   }
   if (channel === "inbox") return /* @__PURE__ */ jsx9(InboxPreview, { rendered });
-  return viewport === "browser" ? /* @__PURE__ */ jsx9(EmailDesktop, { rendered, emailHtml, senderName: sender, labels }) : /* @__PURE__ */ jsx9(EmailMobile, { rendered, emailHtml, senderName: sender, os: viewport, labels });
+  return viewport === "browser" ? /* @__PURE__ */ jsx9(
+    EmailDesktop,
+    {
+      rendered,
+      emailHtml,
+      senderName: sender,
+      labels,
+      attachment
+    }
+  ) : /* @__PURE__ */ jsx9(
+    EmailMobile,
+    {
+      rendered,
+      emailHtml,
+      senderName: sender,
+      os: viewport,
+      labels,
+      attachment
+    }
+  );
 }
 
 // src/components/NotificationSettingsWorkspace.tsx
@@ -1480,6 +1519,7 @@ export {
   TEMPLATE_COLUMNS,
   TEMPLATE_SORT_FIELDS,
   TEMPLATE_VIEWS,
+  TemplatePreview,
   applyMark,
   flattenNotificationPages,
   formatNotificationTime,