@open-mercato/core 0.6.5-develop.4384.1.ce2ec6eaaa → 0.6.5-develop.4397.1.9a65481757

package/src/modules/communication_channels/widgets/injection/channel-info-panel/widget.ts

@@ -0,0 +1,24 @@
+import type { InjectionWidgetModule } from '@open-mercato/shared/modules/widgets/injection'
+import ChannelInfoPanelWidget from './widget.client'
+
+/**
+ * Channel info panel — renders a short summary of channel context for a message
+ * in the detail sidebar (`detail:messages:message:sidebar`).
+ *
+ * Reads `_channel` + `_channelContact` enrichments. Shows provider, channel
+ * type, direction + delivery status, and (when matched) the linked CRM person id.
+ */
+const widget: InjectionWidgetModule<Record<string, unknown>, Record<string, unknown>> = {
+  metadata: {
+    id: 'communication_channels.injection.channel-info-panel',
+    title: 'Channel info panel',
+    description:
+      'Sidebar panel showing channel + contact metadata for a channel-linked message.',
+    features: ['communication_channels.view'],
+    priority: 80,
+    enabled: true,
+  },
+  Widget: ChannelInfoPanelWidget,
+}
+
+export default widget

package/src/modules/communication_channels/widgets/injection/channel-payload-renderer/widget.client.tsx

@@ -0,0 +1,63 @@
+'use client'
+
+import * as React from 'react'
+import type { InjectionWidgetComponentProps } from '@open-mercato/shared/modules/widgets/injection'
+import { useT } from '@open-mercato/shared/lib/i18n/context'
+import { sanitizeChannelHtml } from '../../../lib/sanitize-channel-html'
+
+type ChannelPayloadEnrichment = {
+  channelContentType: string | null
+  channelPayload: Record<string, unknown> | null
+  interactiveState: Record<string, unknown> | null
+  channelMetadata: Record<string, unknown> | null
+}
+
+type MessageWithPayload = Record<string, unknown> & {
+  id?: string
+  _channelPayload?: ChannelPayloadEnrichment | null
+}
+
+export default function ChannelPayloadRendererWidget({
+  data,
+}: InjectionWidgetComponentProps<Record<string, unknown>, MessageWithPayload>) {
+  const t = useT()
+  const payload = data?._channelPayload ?? null
+  if (!payload || !payload.channelContentType) return null
+
+  const { channelContentType, channelPayload } = payload
+
+  // Email / HTML — sanitize, then render.
+  if (channelContentType.startsWith('email/') && typeof channelPayload?.html === 'string') {
+    const sanitized = sanitizeChannelHtml(channelPayload.html as string)
+    return (
+      <section
+        className="rounded-md border bg-card p-4 text-sm"
+        aria-label={t(
+          'communication_channels.channelPayload.email.aria',
+          'Channel payload — email',
+        )}
+      >
+        <div dangerouslySetInnerHTML={{ __html: sanitized }} />
+      </section>
+    )
+  }
+
+  // Provider-specific payloads (Slack Block Kit, WhatsApp interactive) —
+  // hub-level fallback shows raw JSON; provider packages override this widget.
+  return (
+    <section
+      className="rounded-md border bg-muted p-4 text-xs"
+      aria-label={t('communication_channels.channelPayload.aria', 'Channel payload')}
+    >
+      <header className="mb-2 text-overline text-muted-foreground">
+        {t(
+          `communication_channels.channelPayload.types.${channelContentType}`,
+          channelContentType,
+        )}
+      </header>
+      <pre className="overflow-auto whitespace-pre-wrap break-words">
+        {JSON.stringify(channelPayload, null, 2)}
+      </pre>
+    </section>
+  )
+}

package/src/modules/communication_channels/widgets/injection/channel-payload-renderer/widget.ts

@@ -0,0 +1,29 @@
+import type { InjectionWidgetModule } from '@open-mercato/shared/modules/widgets/injection'
+import ChannelPayloadRendererWidget from './widget.client'
+
+/**
+ * Channel payload renderer — renders the channel-native rich payload of a message
+ * (Slack Block Kit, WhatsApp interactive, email MIME, etc.) below the body in the
+ * messages detail page (`detail:messages:message:body:after`).
+ *
+ * For `email/*` content types, HTML is sanitized via `sanitizeChannelHtml` before
+ * being passed to `dangerouslySetInnerHTML` — see SPEC-045d §4.6.
+ *
+ * Provider packages override this via UMES component replacement (handle
+ * `widget:communication_channels.injection.channel-payload-renderer`) to render
+ * Block Kit, interactive buttons, contact cards, location maps, etc.
+ */
+const widget: InjectionWidgetModule<Record<string, unknown>, Record<string, unknown>> = {
+  metadata: {
+    id: 'communication_channels.injection.channel-payload-renderer',
+    title: 'Channel payload renderer',
+    description:
+      'Renders channel-native rich payload (Block Kit, interactive, MIME) below the message body in the detail view. Generic fallback; provider packages can replace it for richer rendering.',
+    features: ['communication_channels.view'],
+    priority: 100,
+    enabled: true,
+  },
+  Widget: ChannelPayloadRendererWidget,
+}
+
+export default widget

package/src/modules/communication_channels/widgets/injection/profile-channels-menu/widget.ts

@@ -0,0 +1,34 @@
+import { InjectionPosition } from '@open-mercato/shared/modules/widgets/injection-position'
+import type { InjectionMenuItemWidget } from '@open-mercato/shared/modules/widgets/injection'
+
+/**
+ * Adds a "My communication channels" entry to the top-right profile dropdown,
+ * directly under "Change Password". The per-user channel-connect page
+ * (`/backend/profile/communication-channels`) is `pageContext: 'profile'`, so it
+ * is excluded from the main sidebar and otherwise only reachable via the
+ * profile-mode sidebar or a direct URL — this gives it a discoverable entry.
+ *
+ * Feature-gated on `communication_channels.connect_user_channel` (the same guard
+ * as the page), so users who cannot connect a channel don't see a dead link.
+ * Wildcard grants (`communication_channels.*`, `*`) are honored by the menu
+ * filter's wildcard-aware matcher.
+ */
+const widget: InjectionMenuItemWidget = {
+  metadata: {
+    id: 'communication_channels.injection.profile-channels-menu',
+    title: 'My communication channels profile menu item',
+  },
+  menuItems: [
+    {
+      id: 'communication-channels-profile-link',
+      labelKey: 'communication_channels.profile.title',
+      label: 'My communication channels',
+      icon: 'Mail',
+      href: '/backend/profile/communication-channels',
+      features: ['communication_channels.connect_user_channel'],
+      placement: { position: InjectionPosition.After, relativeTo: 'change-password' },
+    },
+  ],
+}
+
+export default widget

package/src/modules/communication_channels/widgets/injection/reaction-bar/widget.client.tsx

@@ -0,0 +1,177 @@
+'use client'
+
+import * as React from 'react'
+import type { InjectionWidgetComponentProps } from '@open-mercato/shared/modules/widgets/injection'
+import { Button } from '@open-mercato/ui/primitives/button'
+import { apiCall } from '@open-mercato/ui/backend/utils/apiCall'
+import { useGuardedMutation } from '@open-mercato/ui/backend/injection/useGuardedMutation'
+import { flash } from '@open-mercato/ui/backend/FlashMessages'
+import { useT } from '@open-mercato/shared/lib/i18n/context'
+
+type ReactionGroup = {
+  emoji: string
+  count: number
+  users: Array<{
+    userId?: string | null
+    externalId?: string | null
+    displayName?: string | null
+  }>
+  reactedByMe: boolean
+  myReactionId: string | null
+}
+
+type MessageWithReactions = Record<string, unknown> & {
+  id?: string
+  _reactions?: ReactionGroup[]
+}
+
+const REACTION_BAR_MUTATION_CONTEXT_ID = 'communication-channels-reaction-bar'
+
+type ReactionMutationContext = {
+  formId: string
+  resourceKind: string
+  resourceId: string
+  retryLastMutation: () => Promise<boolean>
+}
+
+export default function ReactionBarWidget({
+  data,
+}: InjectionWidgetComponentProps<Record<string, unknown>, MessageWithReactions>) {
+  const t = useT()
+  const messageId = data?.id ?? null
+  const initial = React.useMemo(() => data?._reactions ?? [], [data?._reactions])
+  const [groups, setGroups] = React.useState<ReactionGroup[]>(initial)
+  const [busyEmoji, setBusyEmoji] = React.useState<string | null>(null)
+  const { runMutation, retryLastMutation } = useGuardedMutation<ReactionMutationContext>({
+    contextId: REACTION_BAR_MUTATION_CONTEXT_ID,
+    blockedMessage: t('ui.forms.flash.saveBlocked', 'Save blocked by validation'),
+  })
+
+  // Keep local state in sync if the host page re-renders with fresh data.
+  React.useEffect(() => setGroups(initial), [initial])
+
+  if (!messageId || groups.length === 0) return null
+
+  const onToggle = async (group: ReactionGroup) => {
+    if (busyEmoji) return
+    setBusyEmoji(group.emoji)
+    try {
+      if (group.reactedByMe) {
+        if (!group.myReactionId) {
+          flash(
+            t(
+              'communication_channels.reaction.cannotRemoveExternal',
+              'Reactions from external participants can only be removed in the provider app.',
+            ),
+            'error',
+          )
+          return
+        }
+        const response = await runMutation({
+          operation: () => apiCall<{ ok?: boolean; error?: string }>(
+            `/api/communication_channels/messages/${messageId}/reactions/${group.myReactionId}`,
+            { method: 'DELETE' },
+          ),
+          context: {
+            formId: REACTION_BAR_MUTATION_CONTEXT_ID,
+            resourceKind: 'communication_channels.message',
+            resourceId: messageId,
+            retryLastMutation,
+          },
+          mutationPayload: { action: 'remove-reaction', reactionId: group.myReactionId, emoji: group.emoji },
+        })
+        if (!response.ok) {
+          const errBody = response.result as { error?: string } | null
+          flash(
+            errBody?.error
+              ?? t('communication_channels.errors.reactionFailed', 'Reaction failed'),
+            'error',
+          )
+          return
+        }
+        setGroups((prev) =>
+          prev
+            .map((g) =>
+              g.emoji === group.emoji
+                ? { ...g, count: Math.max(0, g.count - 1), reactedByMe: false, myReactionId: null }
+                : g,
+            )
+            .filter((g) => g.count > 0),
+        )
+        return
+      }
+      const response = await runMutation({
+        operation: () => apiCall<{ id: string; messageId: string; emoji: string }>(
+          `/api/communication_channels/messages/${messageId}/reactions`,
+          {
+            method: 'POST',
+            body: JSON.stringify({ emoji: group.emoji }),
+            headers: { 'content-type': 'application/json' },
+          },
+        ),
+        context: {
+          formId: REACTION_BAR_MUTATION_CONTEXT_ID,
+          resourceKind: 'communication_channels.message',
+          resourceId: messageId,
+          retryLastMutation,
+        },
+        mutationPayload: { action: 'add-reaction', emoji: group.emoji },
+      })
+      if (!response.ok) {
+        const errBody = response.result as { error?: string } | null
+        flash(
+          errBody?.error
+            ?? t('communication_channels.errors.reactionFailed', 'Reaction failed'),
+          'error',
+        )
+        return
+      }
+      const created = response.result as { id?: string } | null
+      setGroups((prev) =>
+        prev.map((g) =>
+          g.emoji === group.emoji
+            ? {
+                ...g,
+                count: g.count + 1,
+                reactedByMe: true,
+                myReactionId: created?.id ?? g.myReactionId,
+              }
+            : g,
+        ),
+      )
+    } catch (err) {
+      flash(
+        err instanceof Error
+          ? err.message
+          : t('communication_channels.errors.reactionFailed', 'Reaction failed'),
+        'error',
+      )
+    } finally {
+      setBusyEmoji(null)
+    }
+  }
+
+  return (
+    <div
+      className="mt-2 flex flex-wrap gap-1"
+      aria-label={t('communication_channels.reaction.bar.aria', 'Reactions')}
+    >
+      {groups.map((group) => (
+        <Button
+          key={group.emoji}
+          type="button"
+          variant={group.reactedByMe ? 'default' : 'outline'}
+          size="sm"
+          disabled={busyEmoji === group.emoji}
+          onClick={() => void onToggle(group)}
+          aria-label={t('communication_channels.reaction.toggleAria', 'Toggle {emoji} reaction', {
+            emoji: group.emoji,
+          })}
+        >
+          <span aria-hidden>{group.emoji}</span>
+          <span className="ml-1 text-xs">{group.count}</span>
+        </Button>
+      ))}
+    </div>
+  )
+}

package/src/modules/communication_channels/widgets/injection/reaction-bar/widget.ts

@@ -0,0 +1,26 @@
+import type { InjectionWidgetModule } from '@open-mercato/shared/modules/widgets/injection'
+import ReactionBarWidget from './widget.client'
+
+/**
+ * Reaction bar — renders the grouped emoji counts below a channel-linked message
+ * (`detail:messages:message:body:after`). Click an emoji to toggle the current
+ * user's reaction (calls the slice-2d outbound reactions API).
+ *
+ * Reads the `_reactions` enrichment field added by `messageReactionsEnricher`.
+ * Gated by the `communication_channels.react` feature at the API layer; the
+ * widget itself surfaces only when there is at least one reaction.
+ */
+const widget: InjectionWidgetModule<Record<string, unknown>, Record<string, unknown>> = {
+  metadata: {
+    id: 'communication_channels.injection.reaction-bar',
+    title: 'Reaction bar',
+    description:
+      'Renders grouped emoji reactions below channel-linked messages. Tapping an emoji toggles the current user\'s reaction.',
+    features: ['communication_channels.view'],
+    priority: 90,
+    enabled: true,
+  },
+  Widget: ReactionBarWidget,
+}
+
+export default widget

package/src/modules/communication_channels/widgets/injection-table.ts

@@ -0,0 +1,47 @@
+import type { ModuleInjectionTable } from '@open-mercato/shared/modules/widgets/injection'
+
+/**
+ * Hub widget → messages-module spot wiring (SPEC-045d §9.3).
+ *
+ * The Messages module exposes 4 injection spots (registered in slice 2a). The
+ * hub mounts its widgets here so channel-linked messages get channel-aware
+ * rendering without modifying the Messages module's templates.
+ *
+ * Provider packages can register additional widgets at the same spots OR
+ * replace these hub-default widgets via UMES component replacement (handles
+ * like `widget:communication_channels.injection.channel-badge`).
+ */
+export const injectionTable: ModuleInjectionTable = {
+  'data-table:messages:columns': [
+    {
+      widgetId: 'communication_channels.injection.channel-badge',
+      priority: 100,
+    },
+  ],
+  'detail:messages:message:body:after': [
+    {
+      widgetId: 'communication_channels.injection.channel-payload-renderer',
+      priority: 100,
+    },
+    {
+      widgetId: 'communication_channels.injection.reaction-bar',
+      priority: 90,
+    },
+  ],
+  'detail:messages:message:sidebar': [
+    {
+      widgetId: 'communication_channels.injection.channel-info-panel',
+      priority: 100,
+    },
+  ],
+  // Profile dropdown (top-right avatar): a discoverable entry to the per-user
+  // channel-connect page, placed directly under "Change Password".
+  'menu:topbar:profile-dropdown': [
+    {
+      widgetId: 'communication_channels.injection.profile-channels-menu',
+      priority: 100,
+    },
+  ],
+}
+
+export default injectionTable

package/src/modules/communication_channels/widgets/notifications/ChannelRequiresReauthRenderer.tsx

@@ -0,0 +1,48 @@
+'use client'
+
+import * as React from 'react'
+import { useT } from '@open-mercato/shared/lib/i18n/context'
+
+type NotificationRendererProps = {
+  notification: {
+    id: string
+    type: string
+    title?: string | null
+    body?: string | null
+    sourceEntityType?: string | null
+    sourceEntityId?: string | null
+    metadata?: Record<string, unknown> | null
+  }
+}
+
+export function ChannelRequiresReauthRenderer({ notification }: NotificationRendererProps) {
+  const t = useT()
+  const channelName =
+    (notification.metadata?.channelDisplayName as string | undefined) ??
+    t('communication_channels.notifications.channel_requires_reauth.unknownChannel', 'A channel')
+  const providerKey = (notification.metadata?.providerKey as string | undefined) ?? ''
+
+  return (
+    <div className="flex flex-col gap-1">
+      <span className="font-medium text-status-warning-text">
+        {notification.title ??
+          t(
+            'communication_channels.notifications.channel_requires_reauth.title',
+            'Channel needs reconnection',
+          )}
+      </span>
+      <span className="text-sm text-muted-foreground">
+        {providerKey ? `${channelName} (${providerKey})` : channelName}
+      </span>
+      <span className="text-sm text-muted-foreground">
+        {notification.body ??
+          t(
+            'communication_channels.notifications.channel_requires_reauth.body',
+            'Authentication expired. Reconnect this channel to resume sending and receiving messages.',
+          )}
+      </span>
+    </div>
+  )
+}
+
+export default ChannelRequiresReauthRenderer

package/src/modules/communication_channels/widgets/notifications/MessageReceivedRenderer.tsx

@@ -0,0 +1,45 @@
+'use client'
+
+import * as React from 'react'
+import { useT } from '@open-mercato/shared/lib/i18n/context'
+
+type NotificationRendererProps = {
+  notification: {
+    id: string
+    type: string
+    title?: string | null
+    body?: string | null
+    sourceEntityType?: string | null
+    sourceEntityId?: string | null
+    metadata?: Record<string, unknown> | null
+  }
+}
+
+export function MessageReceivedRenderer({ notification }: NotificationRendererProps) {
+  const t = useT()
+  const senderName =
+    (notification.metadata?.senderDisplayName as string | undefined) ??
+    (notification.metadata?.senderIdentifier as string | undefined) ??
+    t('communication_channels.notifications.message_received.unknownSender', 'Unknown sender')
+  const channelLabel =
+    (notification.metadata?.channelDisplayName as string | undefined) ??
+    (notification.metadata?.providerKey as string | undefined) ??
+    ''
+
+  return (
+    <div className="flex flex-col gap-1">
+      <span className="font-medium text-foreground">
+        {notification.title ??
+          t('communication_channels.notifications.message_received.title', 'New external message')}
+      </span>
+      <span className="text-sm text-muted-foreground">
+        {channelLabel ? `${senderName} · ${channelLabel}` : senderName}
+      </span>
+      {notification.body ? (
+        <span className="text-sm text-muted-foreground line-clamp-2">{notification.body}</span>
+      ) : null}
+    </div>
+  )
+}
+
+export default MessageReceivedRenderer

package/src/modules/communication_channels/widgets/notifications/index.ts

@@ -0,0 +1,2 @@
+export { MessageReceivedRenderer } from './MessageReceivedRenderer'
+export { ChannelRequiresReauthRenderer } from './ChannelRequiresReauthRenderer'