@open-mercato/core 0.4.5-develop-5191db4ef3 → 0.4.5-develop-9f9549ebc8

package/src/modules/messages/components/message-detail/hooks/useMessageDetailsActions.ts

@@ -0,0 +1,367 @@
+"use client"
+
+import * as React from 'react'
+import type { UseQueryResult } from '@tanstack/react-query'
+import type { TranslateFn } from '@open-mercato/shared/lib/i18n/context'
+import type { MessageActionsProps, MessageContentProps } from '@open-mercato/shared/modules/messages/types'
+import { flash } from '@open-mercato/ui/backend/FlashMessages'
+import { apiCall } from '@open-mercato/ui/backend/utils/apiCall'
+import type {
+  ActionResult,
+  MessageAction,
+  MessageAttachment,
+  MessageDetail,
+  PendingActionConfirmation,
+} from '../types'
+import { parseObjectActionId, toErrorMessage } from '../utils'
+
+type RequestAndRefreshOptions = {
+  skipDetailAutoMarkRead?: boolean
+}
+
+type ConversationActionKind = 'archiveConversation' | 'deleteConversation' | 'markAllUnread'
+
+type UseMessageDetailsActionsInput = {
+  id: string
+  t: TranslateFn
+  detail: MessageDetail | null
+  detailQuery: UseQueryResult<MessageDetail, Error>
+  attachments: MessageAttachment[] | undefined
+  isArchived: boolean
+  onDeleted: () => void
+  refreshDetailWithoutAutoMarkRead: () => Promise<MessageDetail>
+}
+
+export function useMessageDetailsActions({
+  id,
+  t,
+  detail,
+  detailQuery,
+  attachments,
+  isArchived,
+  onDeleted,
+  refreshDetailWithoutAutoMarkRead,
+}: UseMessageDetailsActionsInput) {
+  const [replyOpen, setReplyOpen] = React.useState(false)
+  const [forwardOpen, setForwardOpen] = React.useState(false)
+  const [editOpen, setEditOpen] = React.useState(false)
+  const [updatingState, setUpdatingState] = React.useState(false)
+  const [executingActionId, setExecutingActionId] = React.useState<string | null>(null)
+  const [pendingActionConfirmation, setPendingActionConfirmation] = React.useState<PendingActionConfirmation | null>(null)
+  const [deleteConfirmationOpen, setDeleteConfirmationOpen] = React.useState(false)
+  const [activeConversationAction, setActiveConversationAction] = React.useState<ConversationActionKind | null>(null)
+
+  const requestAndRefresh = React.useCallback(async (
+    url: string,
+    method: 'PUT' | 'DELETE',
+    options?: RequestAndRefreshOptions,
+  ) => {
+    setUpdatingState(true)
+    try {
+      const call = await apiCall<{ ok?: boolean }>(url, { method })
+      if (!call.ok) {
+        throw new Error(
+          toErrorMessage(call.result)
+          ?? t('messages.errors.stateChangeFailed', 'Failed to update message state.'),
+        )
+      }
+      if (options?.skipDetailAutoMarkRead) {
+        await refreshDetailWithoutAutoMarkRead()
+      } else {
+        await detailQuery.refetch()
+      }
+    } catch (err) {
+      flash(
+        err instanceof Error
+          ? err.message
+          : t('messages.errors.stateChangeFailed', 'Failed to update message state.'),
+        'error',
+      )
+    } finally {
+      setUpdatingState(false)
+    }
+  }, [detailQuery, refreshDetailWithoutAutoMarkRead, t])
+
+  const handleDelete = React.useCallback(async () => {
+    setUpdatingState(true)
+    try {
+      const call = await apiCall<{ ok?: boolean }>(`/api/messages/${encodeURIComponent(id)}`, {
+        method: 'DELETE',
+      })
+      if (!call.ok) {
+        throw new Error(toErrorMessage(call.result) ?? t('messages.errors.deleteFailed', 'Failed to delete message.'))
+      }
+      flash(t('messages.flash.deleted', 'Message deleted.'), 'success')
+      onDeleted()
+    } catch (err) {
+      flash(
+        err instanceof Error
+          ? err.message
+          : t('messages.errors.deleteFailed', 'Failed to delete message.'),
+        'error',
+      )
+    } finally {
+      setUpdatingState(false)
+    }
+  }, [id, onDeleted, t])
+
+  const runConversationAction = React.useCallback(async (
+    action: ConversationActionKind,
+    options: {
+      url: string
+      method: 'PUT' | 'DELETE'
+      successMessage: string
+      skipDetailAutoMarkRead?: boolean
+      onSuccess?: () => void
+    },
+  ) => {
+    setActiveConversationAction(action)
+    try {
+      const call = await apiCall<{ ok?: boolean; affectedCount?: number }>(options.url, { method: options.method })
+      if (!call.ok) {
+        throw new Error(
+          toErrorMessage(call.result)
+          ?? t('messages.errors.conversationActionFailed', 'Failed to update conversation.'),
+        )
+      }
+
+      flash(options.successMessage, 'success')
+
+      if (options.onSuccess) {
+        options.onSuccess()
+        return
+      }
+
+      if (options.skipDetailAutoMarkRead) {
+        await refreshDetailWithoutAutoMarkRead()
+      } else {
+        await detailQuery.refetch()
+      }
+    } catch (err) {
+      flash(
+        err instanceof Error
+          ? err.message
+          : t('messages.errors.conversationActionFailed', 'Failed to update conversation.'),
+        'error',
+      )
+    } finally {
+      setActiveConversationAction(null)
+    }
+  }, [detailQuery, refreshDetailWithoutAutoMarkRead, t])
+
+  const archiveConversation = React.useCallback(async (messageId?: string) => {
+    const targetMessageId = messageId ?? id
+    await runConversationAction('archiveConversation', {
+      url: `/api/messages/${encodeURIComponent(targetMessageId)}/conversation/archive`,
+      method: 'PUT',
+      successMessage: t('messages.flash.conversationArchived', 'Conversation archived.'),
+    })
+  }, [id, runConversationAction, t])
+
+  const markConversationUnread = React.useCallback(async (messageId?: string) => {
+    const targetMessageId = messageId ?? id
+    await runConversationAction('markAllUnread', {
+      url: `/api/messages/${encodeURIComponent(targetMessageId)}/conversation/read`,
+      method: 'DELETE',
+      successMessage: t('messages.flash.conversationMarkedUnread', 'Conversation marked unread.'),
+      skipDetailAutoMarkRead: true,
+    })
+  }, [id, runConversationAction, t])
+
+  const deleteConversation = React.useCallback(async (messageId?: string) => {
+    const targetMessageId = messageId ?? id
+    await runConversationAction('deleteConversation', {
+      url: `/api/messages/${encodeURIComponent(targetMessageId)}/conversation`,
+      method: 'DELETE',
+      successMessage: t('messages.flash.conversationDeleted', 'Conversation deleted.'),
+      onSuccess: onDeleted,
+    })
+  }, [id, onDeleted, runConversationAction, t])
+
+  const handleDeleteDialogKeyDown = React.useCallback((event: React.KeyboardEvent<HTMLDivElement>) => {
+    if ((event.metaKey || event.ctrlKey) && event.key === 'Enter') {
+      event.preventDefault()
+      void handleDelete()
+      return
+    }
+
+    if (event.key === 'Escape') {
+      event.preventDefault()
+      setDeleteConfirmationOpen(false)
+    }
+  }, [handleDelete])
+
+  const executeAction = React.useCallback(async (action: MessageAction, payload?: Record<string, unknown>) => {
+    setExecutingActionId(action.id)
+    try {
+      const call = await apiCall<ActionResult>(
+        `/api/messages/${encodeURIComponent(id)}/actions/${encodeURIComponent(action.id)}`,
+        {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify(payload ?? {}),
+        },
+      )
+
+      if (!call.ok) {
+        throw new Error(
+          toErrorMessage(call.result)
+          ?? t('messages.errors.actionFailed', 'Failed to execute action.'),
+        )
+      }
+
+      flash(t('messages.flash.actionSuccess', 'Action completed.'), 'success')
+
+      const redirectTarget = call.result?.result?.redirect
+      if (typeof redirectTarget === 'string' && redirectTarget.trim().length > 0) {
+        window.location.href = redirectTarget
+        return
+      }
+
+      await detailQuery.refetch()
+    } catch (err) {
+      flash(
+        err instanceof Error
+          ? err.message
+          : t('messages.errors.actionFailed', 'Failed to execute action.'),
+        'error',
+      )
+    } finally {
+      setExecutingActionId(null)
+    }
+  }, [detailQuery, id, t])
+
+  const handleExecuteAction = React.useCallback(async (action: MessageAction, payload?: Record<string, unknown>) => {
+    if (executingActionId || detail?.actionTaken) return
+
+    if (action.confirmRequired) {
+      setPendingActionConfirmation({ action, payload })
+      return
+    }
+
+    await executeAction(action, payload)
+  }, [detail?.actionTaken, executeAction, executingActionId])
+
+  const handleConfirmPendingAction = React.useCallback(async () => {
+    if (!pendingActionConfirmation || executingActionId || detail?.actionTaken) return
+    const { action, payload } = pendingActionConfirmation
+    setPendingActionConfirmation(null)
+    await executeAction(action, payload)
+  }, [detail?.actionTaken, executeAction, executingActionId, pendingActionConfirmation])
+
+  const handleActionConfirmDialogKeyDown = React.useCallback((event: React.KeyboardEvent<HTMLDivElement>) => {
+    if ((event.metaKey || event.ctrlKey) && event.key === 'Enter') {
+      event.preventDefault()
+      void handleConfirmPendingAction()
+      return
+    }
+
+    if (event.key === 'Escape') {
+      event.preventDefault()
+      setPendingActionConfirmation(null)
+    }
+  }, [handleConfirmPendingAction])
+
+  const contentProps = React.useMemo<MessageContentProps>(() => ({
+    message: {
+      id: detail?.id ?? '',
+      type: detail?.type ?? 'default',
+      subject: detail?.subject ?? '',
+      body: detail?.body ?? '',
+      bodyFormat: detail?.bodyFormat ?? 'text',
+      priority: (detail?.priority ?? 'normal') as 'low' | 'normal' | 'high' | 'urgent',
+      sentAt: detail?.sentAt ? new Date(detail.sentAt) : null,
+      senderName: detail?.senderName ?? undefined,
+      senderUserId: detail?.senderUserId ?? '',
+      actionData: detail?.actionData ?? null,
+      actionTaken: detail?.actionTaken ?? null,
+      actionTakenAt: detail?.actionTakenAt ? new Date(detail.actionTakenAt) : null,
+    },
+    objects: (detail?.objects ?? []).map((item) => ({
+      id: item.id,
+      entityModule: item.entityModule,
+      entityType: item.entityType,
+      entityId: item.entityId,
+      actionRequired: item.actionRequired,
+      snapshot: item.snapshot ?? undefined,
+    })),
+    attachments: (attachments ?? []).map((item) => ({
+      id: item.id,
+      fileName: item.fileName,
+      fileSize: item.fileSize,
+      mimeType: item.mimeType,
+      url: item.url,
+    })),
+  }), [attachments, detail])
+
+  const handleExecuteActionById = React.useCallback<MessageActionsProps['onExecuteAction']>(async (actionId, payload) => {
+    const action = detail?.actionData?.actions?.find((entry) => {
+      if (parseObjectActionId(entry.id)) return false
+      return entry.id === actionId
+    })
+    if (!action) return
+    await handleExecuteAction(action, payload)
+  }, [detail?.actionData?.actions, handleExecuteAction])
+
+  const messageActions = React.useMemo(() => {
+    return (detail?.actionData?.actions ?? []).filter((action) => !parseObjectActionId(action.id))
+  }, [detail?.actionData?.actions])
+
+  const objectActionsByObjectId = React.useMemo(() => {
+    const byObjectId = new Map<string, Map<string, MessageAction>>()
+    for (const action of detail?.actionData?.actions ?? []) {
+      const parsed = parseObjectActionId(action.id)
+      if (!parsed) continue
+      const current = byObjectId.get(parsed.objectId) ?? new Map<string, MessageAction>()
+      current.set(parsed.actionId, action)
+      byObjectId.set(parsed.objectId, current)
+    }
+    return byObjectId
+  }, [detail?.actionData?.actions])
+
+  const toggleRead = React.useCallback(async () => {
+    await requestAndRefresh(
+      `/api/messages/${encodeURIComponent(id)}/read`,
+      detail?.isRead ? 'DELETE' : 'PUT',
+      detail?.isRead ? { skipDetailAutoMarkRead: true } : undefined,
+    )
+  }, [detail?.isRead, id, requestAndRefresh])
+
+  const toggleArchive = React.useCallback(async () => {
+    await requestAndRefresh(
+      `/api/messages/${encodeURIComponent(id)}/archive`,
+      isArchived ? 'DELETE' : 'PUT',
+    )
+  }, [id, isArchived, requestAndRefresh])
+
+  return {
+    replyOpen,
+    setReplyOpen,
+    forwardOpen,
+    setForwardOpen,
+    editOpen,
+    setEditOpen,
+    updatingState,
+    executingActionId,
+    pendingActionConfirmation,
+    setPendingActionConfirmation,
+    deleteConfirmationOpen,
+    setDeleteConfirmationOpen,
+    activeConversationAction,
+    toggleRead,
+    toggleArchive,
+    archiveConversation,
+    deleteConversation,
+    markConversationUnread,
+    requestAndRefresh,
+    handleDelete,
+    handleDeleteDialogKeyDown,
+    handleExecuteAction,
+    handleConfirmPendingAction,
+    handleActionConfirmDialogKeyDown,
+    contentProps,
+    handleExecuteActionById,
+    messageActions,
+    objectActionsByObjectId,
+  }
+}

package/src/modules/messages/components/message-detail/hooks/useMessageDetailsConversation.ts

@@ -0,0 +1,134 @@
+"use client"
+
+import * as React from 'react'
+import type { TranslateFn } from '@open-mercato/shared/lib/i18n/context'
+import type { MessageListItemProps } from '@open-mercato/shared/modules/messages/types'
+import type { MessageDetail } from '../types'
+
+export type ConversationItem = {
+  id: string
+  senderUserId: string
+  senderName?: string | null
+  senderEmail?: string | null
+  body: string
+  bodyFormat?: 'text' | 'markdown'
+  sentAt?: string | null
+  objects?: Array<{ id: string }>
+}
+
+type UseMessageDetailsConversationInput = {
+  detail: MessageDetail | null
+  t: TranslateFn
+}
+
+export function useMessageDetailsConversation({
+  detail,
+  t,
+}: UseMessageDetailsConversationInput) {
+  const conversationItems = React.useMemo<ConversationItem[]>(() => {
+    const thread = detail?.thread ?? []
+    if (thread.length === 0 && detail) {
+      return [{
+        id: detail.id,
+        senderUserId: detail.senderUserId,
+        senderName: detail.senderName,
+        senderEmail: detail.senderEmail,
+        body: detail.body,
+        bodyFormat: detail.bodyFormat,
+        sentAt: detail.sentAt,
+        objects: detail.objects.map((item) => ({ id: item.id })),
+      }]
+    }
+
+    const items = thread
+      .map((item) => ({
+        id: item.id,
+        senderUserId: item.senderUserId,
+        senderName: item.senderName,
+        senderEmail: item.senderEmail,
+        body: item.body,
+        bodyFormat: item.bodyFormat,
+        sentAt: item.sentAt,
+        objects: item.objects?.map((entry) => ({ id: entry.id })) ?? [],
+      }))
+
+    if (detail && !items.some((item) => item.id === detail.id)) {
+      items.push({
+        id: detail.id,
+        senderUserId: detail.senderUserId,
+        senderName: detail.senderName,
+        senderEmail: detail.senderEmail,
+        body: detail.body,
+        bodyFormat: detail.bodyFormat,
+        sentAt: detail.sentAt,
+        objects: detail.objects.map((entry) => ({ id: entry.id })),
+      })
+    }
+
+    items.sort((a, b) => {
+      const aTime = a.sentAt ? new Date(a.sentAt).getTime() : 0
+      const bTime = b.sentAt ? new Date(b.sentAt).getTime() : 0
+      return aTime - bTime
+    })
+
+    return items
+  }, [detail])
+
+  const forcedExpandedItemId = conversationItems.length > 0
+    ? conversationItems[conversationItems.length - 1].id
+    : null
+
+  const [expandedById, setExpandedById] = React.useState<Record<string, boolean>>({})
+  const conversationIdsKey = React.useMemo(
+    () => conversationItems.map((item) => item.id).join('|'),
+    [conversationItems],
+  )
+
+  React.useEffect(() => {
+    const nextState: Record<string, boolean> = {}
+    for (const item of conversationItems) {
+      nextState[item.id] = forcedExpandedItemId === item.id
+    }
+    setExpandedById(nextState)
+  }, [conversationIdsKey, conversationItems, forcedExpandedItemId])
+
+  const toggleConversationItem = React.useCallback((itemId: string) => {
+    if (itemId === forcedExpandedItemId) return
+    setExpandedById((previous) => ({
+      ...previous,
+      [itemId]: !previous[itemId],
+    }))
+  }, [forcedExpandedItemId])
+
+  const isConversationItemExpanded = React.useCallback((itemId: string) => {
+    if (itemId === forcedExpandedItemId) return true
+    return Boolean(expandedById[itemId])
+  }, [expandedById, forcedExpandedItemId])
+
+  const buildConversationListItemMessage = React.useCallback((item: ConversationItem): MessageListItemProps['message'] => ({
+    id: item.id,
+    type: detail?.type ?? 'default',
+    typeLabel: detail ? t(detail.typeDefinition.labelKey, detail.type) : undefined,
+    subject: detail?.subject ?? '',
+    body: item.body,
+    bodyFormat: item.bodyFormat ?? 'text',
+    priority: 'normal',
+    sentAt: item.sentAt ? new Date(item.sentAt) : null,
+    senderName: item.senderName || item.senderEmail || item.senderUserId,
+    hasObjects: (item.objects ?? []).length > 0,
+    objectCount: (item.objects ?? []).length,
+    hasAttachments: false,
+    attachmentCount: 0,
+    hasActions: false,
+    actionTaken: null,
+    unread: false,
+  }), [detail, t])
+
+  return {
+    conversationItems,
+    forcedExpandedItemId,
+    toggleConversationItem,
+    isConversationItemExpanded,
+    buildConversationListItemMessage,
+  }
+}

package/src/modules/messages/components/message-detail/hooks/useMessageDetailsQueries.ts

@@ -0,0 +1,102 @@
+"use client"
+
+import * as React from 'react'
+import { useQuery } from '@tanstack/react-query'
+import type { QueryClient } from '@tanstack/react-query'
+import type { TranslateFn } from '@open-mercato/shared/lib/i18n/context'
+import { apiCall } from '@open-mercato/ui/backend/utils/apiCall'
+import type { MessageAttachment, MessageDetail } from '../types'
+import { toErrorMessage } from '../utils'
+
+type UseMessageDetailsQueriesInput = {
+  id: string
+  t: TranslateFn
+  scopeVersion: unknown
+  queryClient: QueryClient
+}
+
+export function useMessageDetailsQueries({
+  id,
+  t,
+  scopeVersion,
+  queryClient,
+}: UseMessageDetailsQueriesInput) {
+  const detailQueryKey = React.useMemo(
+    () => ['messages', 'detail', id, scopeVersion],
+    [id, scopeVersion],
+  )
+
+  const detailQuery = useQuery({
+    queryKey: detailQueryKey,
+    queryFn: async () => {
+      const call = await apiCall<MessageDetail>(`/api/messages/${encodeURIComponent(id)}`)
+      if (!call.ok || !call.result) {
+        throw new Error(
+          toErrorMessage(call.result)
+          ?? t('messages.errors.loadDetailFailed', 'Failed to load message details.'),
+        )
+      }
+      return call.result
+    },
+  })
+
+  const detail = detailQuery.data ?? null
+  const isLoadingDetail = detailQuery.isLoading
+  const loadErrorMessage = detailQuery.error instanceof Error
+    ? detailQuery.error.message
+    : t('messages.errors.loadDetailFailed', 'Failed to load message details.')
+
+  const attachmentsQuery = useQuery({
+    queryKey: ['messages', 'detail', id, 'attachments', scopeVersion],
+    queryFn: async () => {
+      const call = await apiCall<{ attachments?: MessageAttachment[] }>(
+        `/api/messages/${encodeURIComponent(id)}/attachments`,
+      )
+
+      if (!call.ok) {
+        throw new Error(
+          toErrorMessage(call.result)
+          ?? t('messages.errors.loadDetailFailed', 'Failed to load message details.'),
+        )
+      }
+
+      return call.result?.attachments ?? []
+    },
+  })
+
+  const attachments = attachmentsQuery.data
+
+  const refreshDetailWithoutAutoMarkRead = React.useCallback(async () => {
+    const call = await apiCall<MessageDetail>(
+      `/api/messages/${encodeURIComponent(id)}?skipMarkRead=1`,
+    )
+
+    if (!call.ok || !call.result) {
+      throw new Error(
+        toErrorMessage(call.result)
+        ?? t('messages.errors.stateChangeFailed', 'Failed to update message state.'),
+      )
+    }
+
+    queryClient.setQueryData(detailQueryKey, call.result)
+    return call.result
+  }, [detailQueryKey, id, queryClient, t])
+
+  const listItemComponentKey = detail?.typeDefinition.ui?.listItemComponent ?? null
+  const contentComponentKey = detail?.typeDefinition.ui?.contentComponent ?? null
+  const actionsComponentKey = detail?.typeDefinition.ui?.actionsComponent ?? null
+
+  return {
+    detailQueryKey,
+    detailQuery,
+    detail,
+    isLoadingDetail,
+    loadErrorMessage,
+    attachmentsQuery,
+    attachments,
+    refreshDetailWithoutAutoMarkRead,
+    listItemComponentKey,
+    contentComponentKey,
+    actionsComponentKey,
+  }
+}