@open-mercato/core 0.6.8-develop.6998.1.d2bc46c56c → 0.6.8-develop.7001.1.03608ab252

package/dist/modules/warranty_claims/frontend/[orgSlug]/portal/claims/[id]/page.js

@@ -0,0 +1,825 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import Link from "next/link";
+import { useRouter } from "next/navigation";
+import { ArrowLeft, Check, CircleAlert, Info, Paperclip, RefreshCw, ShieldCheck, Trash2, TriangleAlert } from "lucide-react";
+import { useLocale, useT } from "@open-mercato/shared/lib/i18n/context";
+import { localizeDictionaryLabel } from "@open-mercato/core/modules/warranty_claims/lib/dictionaryLabels";
+import { formatQuantity } from "@open-mercato/core/modules/warranty_claims/lib/quantity";
+import {
+  ATTACHMENT_ACCEPT_TYPES,
+  validateAttachmentFile
+} from "@open-mercato/core/modules/warranty_claims/lib/portalAttachmentValidation";
+import { Button } from "@open-mercato/ui/primitives/button";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle
+} from "@open-mercato/ui/primitives/dialog";
+import { Textarea } from "@open-mercato/ui/primitives/textarea";
+import { Spinner } from "@open-mercato/ui/primitives/spinner";
+import { ErrorMessage, LoadingMessage } from "@open-mercato/ui/backend/detail";
+import { flash } from "@open-mercato/ui/backend/FlashMessages";
+import { useConfirmDialog } from "@open-mercato/ui/backend/confirm-dialog";
+import { useGuardedMutation } from "@open-mercato/ui/backend/injection/useGuardedMutation";
+import { apiCall, withScopedApiRequestHeaders } from "@open-mercato/ui/backend/utils/apiCall";
+import { buildOptimisticLockHeader } from "@open-mercato/ui/backend/utils/optimisticLock";
+import { usePortalContext } from "@open-mercato/ui/portal/PortalContext";
+import { PortalEmptyState } from "@open-mercato/ui/portal/components/PortalEmptyState";
+const TRACKER_STEP_KEYS = ["received", "review", "decision", "return", "resolved"];
+const STATUS_STEP_INDEX = {
+  draft: 0,
+  submitted: 1,
+  in_review: 1,
+  info_requested: 1,
+  rejected: 2,
+  cancelled: 2,
+  approved: 3,
+  awaiting_return: 3,
+  received: 4,
+  inspecting: 4,
+  resolved: 5,
+  closed: 5
+};
+const LINE_STATUS_DOT_CLASSES = {
+  pending: "bg-status-neutral-icon",
+  approved: "bg-status-success-icon",
+  rejected: "bg-status-error-icon",
+  received: "bg-status-info-icon",
+  inspected: "bg-status-info-icon",
+  resolved: "bg-status-success-icon"
+};
+const BANNER_TONE_CLASSES = {
+  info: {
+    wrapper: "bg-status-info-bg",
+    text: "text-status-info-text",
+    icon: "text-status-info-icon"
+  },
+  success: {
+    wrapper: "bg-status-success-bg",
+    text: "text-status-success-text",
+    icon: "text-status-success-icon"
+  },
+  warning: {
+    wrapper: "bg-status-warning-bg",
+    text: "text-status-warning-text",
+    icon: "text-status-warning-icon"
+  },
+  error: {
+    wrapper: "bg-status-error-bg",
+    text: "text-status-error-text",
+    icon: "text-status-error-icon"
+  }
+};
+function bannerTone(status) {
+  if (status === "rejected" || status === "cancelled") return "error";
+  if (status === "info_requested") return "warning";
+  if (status === "approved" || status === "resolved" || status === "closed") return "success";
+  return "info";
+}
+function bannerMessage(claim, t) {
+  switch (claim.status) {
+    case "draft":
+      return t("warranty_claims.portal.tracker.banner.draft");
+    case "info_requested":
+      return t("warranty_claims.portal.tracker.banner.infoRequested");
+    case "approved":
+      return t("warranty_claims.portal.tracker.banner.approved");
+    case "awaiting_return":
+      return t("warranty_claims.portal.tracker.banner.awaitingReturn");
+    case "received":
+    case "inspecting":
+      return t("warranty_claims.portal.tracker.banner.goodsFlow");
+    case "resolved":
+    case "closed":
+      return claim.resolutionSummary ?? t("warranty_claims.portal.tracker.banner.resolved");
+    case "rejected": {
+      const reason = claim.rejectionReasonCode ? localizeDictionaryLabel(t, "rejection", claim.rejectionReasonCode, claim.rejectionReasonCode) : null;
+      const base = t("warranty_claims.portal.detail.terminal.rejected");
+      const parts = [base, reason, claim.resolutionSummary].filter((part) => Boolean(part));
+      return parts.join(" ");
+    }
+    case "cancelled":
+      return t("warranty_claims.portal.detail.terminal.cancelled");
+    default:
+      return t("warranty_claims.portal.tracker.banner.review");
+  }
+}
+function formatShortDate(value, locale) {
+  if (!value) return null;
+  const date = new Date(value);
+  if (Number.isNaN(date.getTime())) return null;
+  return date.toLocaleDateString(locale || void 0, { month: "short", day: "numeric" });
+}
+function formatLongDate(value, locale) {
+  if (!value) return null;
+  const date = new Date(value);
+  if (Number.isNaN(date.getTime())) return null;
+  return date.toLocaleDateString(locale || void 0, { year: "numeric", month: "short", day: "numeric" });
+}
+function buildTrackerSteps(claim, t, locale) {
+  const currentIndex = STATUS_STEP_INDEX[claim.status] ?? 1;
+  const terminalComplete = claim.status === "resolved" || claim.status === "closed";
+  return TRACKER_STEP_KEYS.map((key, index) => {
+    const state = index < currentIndex || terminalComplete && index === currentIndex ? "complete" : index === currentIndex ? "current" : "pending";
+    let dateLabel = null;
+    if (index === 0 && state === "complete") dateLabel = formatShortDate(claim.submittedAt, locale);
+    if (index === TRACKER_STEP_KEYS.length - 1 && state === "complete") {
+      dateLabel = formatShortDate(
+        claim.status === "closed" ? claim.closedAt ?? claim.resolvedAt : claim.resolvedAt ?? claim.closedAt,
+        locale
+      );
+    }
+    if (state === "current") dateLabel = t("warranty_claims.portal.tracker.step.now");
+    return {
+      id: key,
+      title: t(`warranty_claims.portal.tracker.step.${key}.title`),
+      description: t(`warranty_claims.portal.tracker.step.${key}.description`),
+      state,
+      dateLabel
+    };
+  });
+}
+function buildClaimTitle(claim, t) {
+  const typeLabel = t(`warranty_claims.claimType.${claim.claimType}`);
+  if (claim.reasonCode) {
+    const reasonLabel = localizeDictionaryLabel(t, "reason", claim.reasonCode, claim.reasonCode);
+    return t("warranty_claims.portal.tracker.titleWithReason", { reason: reasonLabel, type: typeLabel });
+  }
+  return t("warranty_claims.portal.tracker.titleFallback", { type: typeLabel });
+}
+function buildClaimSubtitle(claim, t, locale) {
+  if (claim.status === "draft") {
+    const created = formatLongDate(claim.createdAt, locale);
+    return created ? t("warranty_claims.portal.tracker.draftCreated", { date: created }) : t("warranty_claims.portal.detail.notSubmitted");
+  }
+  const submitted = formatLongDate(claim.submittedAt, locale) ?? formatLongDate(claim.createdAt, locale);
+  if (!submitted) return t("warranty_claims.portal.value.notAvailable");
+  if (claim.orderNumber) {
+    return t("warranty_claims.portal.tracker.submittedFromOrder", { date: submitted, order: claim.orderNumber });
+  }
+  return t("warranty_claims.portal.tracker.submittedOn", { date: submitted });
+}
+function formatEventBody(event, t) {
+  if (event.body) return event.body;
+  const payload = event.payload;
+  const from = typeof payload?.from === "string" ? payload.from : null;
+  const to = typeof payload?.to === "string" ? payload.to : null;
+  if (from && to) {
+    return t("warranty_claims.portal.event.transition", {
+      from: t(`warranty_claims.status.${from}`),
+      to: t(`warranty_claims.status.${to}`)
+    });
+  }
+  return t("warranty_claims.portal.event.noDetails");
+}
+function eventTitle(event, t) {
+  if (event.kind === "comment") {
+    return event.actorCustomerId ? t("warranty_claims.portal.tracker.event.youReplied") : t("warranty_claims.portal.tracker.event.teamReplied");
+  }
+  return t(`warranty_claims.portal.event.${event.kind}`);
+}
+function buildActivityEntries(events, attachments, t) {
+  const eventEntries = events.map((event) => ({
+    id: `event-${event.id}`,
+    title: eventTitle(event, t),
+    description: formatEventBody(event, t),
+    createdAt: event.createdAt
+  }));
+  const attachmentEntries = attachments.map((attachment) => ({
+    id: `attachment-${attachment.id}`,
+    title: t("warranty_claims.portal.tracker.event.attachmentAdded"),
+    description: attachment.fileName,
+    createdAt: attachment.createdAt,
+    href: attachment.downloadUrl,
+    attachment
+  }));
+  return [...eventEntries, ...attachmentEntries].sort((left, right) => {
+    const leftTime = left.createdAt ? new Date(left.createdAt).getTime() : 0;
+    const rightTime = right.createdAt ? new Date(right.createdAt).getTime() : 0;
+    return rightTime - leftTime;
+  });
+}
+const DETAIL_MUTATION_CONTEXT_ID = "warranty_claims.portal.claim.detail";
+const SECTION_CLASS = "flex w-full flex-col gap-3 border-t border-border px-6 pb-6 pt-5";
+const SECTION_HEADING_CLASS = "text-sm font-semibold text-foreground";
+const DARK_BUTTON_CLASS = "rounded-md px-3 py-2 text-sm font-medium";
+function WarrantyClaimPortalDetailPage({ params }) {
+  const t = useT();
+  const locale = useLocale();
+  const router = useRouter();
+  const { auth } = usePortalContext();
+  const { user, loading } = auth;
+  const guardedMutation = useGuardedMutation({
+    contextId: DETAIL_MUTATION_CONTEXT_ID,
+    blockedMessage: t("warranty_claims.portal.detail.blocked")
+  });
+  const { confirm, ConfirmDialogElement } = useConfirmDialog();
+  const [claim, setClaim] = React.useState(null);
+  const [events, setEvents] = React.useState([]);
+  const [attachments, setAttachments] = React.useState([]);
+  const [isLoading, setIsLoading] = React.useState(true);
+  const [error, setError] = React.useState(null);
+  const [notFound, setNotFound] = React.useState(false);
+  const [comment, setComment] = React.useState("");
+  const [commentSubmitting, setCommentSubmitting] = React.useState(false);
+  const [fileInputKey, setFileInputKey] = React.useState(0);
+  const [uploading, setUploading] = React.useState(false);
+  const [attachmentMutationId, setAttachmentMutationId] = React.useState(null);
+  const [claimAction, setClaimAction] = React.useState(null);
+  const [actionSubmitting, setActionSubmitting] = React.useState(false);
+  const replacementInputRef = React.useRef(null);
+  const replacementTargetRef = React.useRef(null);
+  React.useEffect(() => {
+    if (!loading && !user) {
+      router.replace(`/${params.orgSlug}/portal/login`);
+    }
+  }, [loading, user, router, params.orgSlug]);
+  const refreshEvents = React.useCallback(async (claimId) => {
+    const result = await apiCall(`/api/warranty_claims/portal/events?claimId=${encodeURIComponent(claimId)}`);
+    if (result.ok && result.result) setEvents(result.result.items);
+  }, []);
+  const refreshAttachments = React.useCallback(async (claimId) => {
+    const result = await apiCall(`/api/warranty_claims/portal/attachments?claimId=${encodeURIComponent(claimId)}`);
+    if (result.ok && result.result) setAttachments(result.result.items);
+  }, []);
+  const loadClaim = React.useCallback(async () => {
+    setIsLoading(true);
+    setError(null);
+    setNotFound(false);
+    try {
+      const detail = await apiCall(`/api/warranty_claims/portal/claims/${encodeURIComponent(params.id)}`);
+      if (detail.status === 404) {
+        setClaim(null);
+        setNotFound(true);
+        return;
+      }
+      if (!detail.ok || !detail.result) {
+        setError(t("warranty_claims.portal.detail.loadError"));
+        return;
+      }
+      setClaim(detail.result.item);
+      await Promise.all([
+        refreshEvents(detail.result.item.id),
+        refreshAttachments(detail.result.item.id)
+      ]);
+    } catch {
+      setError(t("warranty_claims.portal.detail.loadError"));
+    } finally {
+      setIsLoading(false);
+    }
+  }, [params.id, refreshAttachments, refreshEvents, t]);
+  React.useEffect(() => {
+    if (user) void loadClaim();
+  }, [loadClaim, user]);
+  const submitComment = React.useCallback(async () => {
+    if (!claim || commentSubmitting) return;
+    const body = comment.trim();
+    if (!body) return;
+    setCommentSubmitting(true);
+    setError(null);
+    try {
+      const result = await guardedMutation.runMutation({
+        operation: () => apiCall("/api/warranty_claims/portal/events", {
+          method: "POST",
+          headers: { "Content-Type": "application/json" },
+          credentials: "include",
+          body: JSON.stringify({ claimId: claim.id, body })
+        }),
+        context: {
+          moduleId: "warranty_claims",
+          entityId: "warranty_claims.claim_event",
+          operation: "portal_comment",
+          claimId: claim.id,
+          formId: DETAIL_MUTATION_CONTEXT_ID,
+          resourceKind: "warranty_claims.claim_event",
+          resourceId: claim.id,
+          retryLastMutation: guardedMutation.retryLastMutation
+        },
+        mutationPayload: { claimId: claim.id, body }
+      });
+      if (!result.ok || !result.result?.ok) {
+        setError(t("warranty_claims.portal.detail.commentError"));
+        return;
+      }
+      setComment("");
+      flash(t("warranty_claims.portal.detail.commentSuccess"), "success");
+      await refreshEvents(claim.id);
+    } catch {
+      setError(t("warranty_claims.portal.detail.commentError"));
+    } finally {
+      setCommentSubmitting(false);
+    }
+  }, [claim, comment, commentSubmitting, guardedMutation, refreshEvents, t]);
+  const uploadAttachment = React.useCallback(async (file, replacementTarget) => {
+    if (!claim || uploading) return;
+    const validationError = await validateAttachmentFile(file, t);
+    if (validationError) {
+      setError(validationError);
+      flash(validationError, "error");
+      return;
+    }
+    setUploading(true);
+    setAttachmentMutationId(replacementTarget?.id ?? "new");
+    setError(null);
+    try {
+      const form = new FormData();
+      form.set("claimId", claim.id);
+      form.set("file", file);
+      if (replacementTarget) form.set("attachmentId", replacementTarget.id);
+      const result = await guardedMutation.runMutation({
+        operation: () => apiCall("/api/warranty_claims/portal/attachments", {
+          method: replacementTarget ? "PUT" : "POST",
+          credentials: "include",
+          body: form
+        }),
+        context: {
+          moduleId: "warranty_claims",
+          entityId: "attachments.attachment",
+          operation: replacementTarget ? "portal_attachment_replace" : "portal_attachment_upload",
+          claimId: claim.id,
+          formId: DETAIL_MUTATION_CONTEXT_ID,
+          resourceKind: "attachments.attachment",
+          resourceId: replacementTarget?.id ?? claim.id,
+          retryLastMutation: guardedMutation.retryLastMutation
+        },
+        mutationPayload: {
+          claimId: claim.id,
+          attachmentId: replacementTarget?.id,
+          fileName: file.name,
+          fileSize: file.size
+        }
+      });
+      if (!result.ok || !result.result?.ok) {
+        setError(replacementTarget ? t("warranty_claims.portal.detail.attachmentReplaceError", "Attachment replacement failed.") : t("warranty_claims.portal.detail.attachmentError"));
+        return;
+      }
+      flash(
+        replacementTarget ? t("warranty_claims.portal.detail.attachmentReplaceSuccess", "Attachment replaced.") : t("warranty_claims.portal.detail.attachmentSuccess"),
+        "success"
+      );
+      await refreshAttachments(claim.id);
+    } catch {
+      setError(replacementTarget ? t("warranty_claims.portal.detail.attachmentReplaceError", "Attachment replacement failed.") : t("warranty_claims.portal.detail.attachmentError"));
+    } finally {
+      setUploading(false);
+      setAttachmentMutationId(null);
+      setFileInputKey((current) => current + 1);
+    }
+  }, [claim, guardedMutation, refreshAttachments, t, uploading]);
+  const deleteAttachment = React.useCallback(async (attachment) => {
+    if (!claim || uploading) return;
+    const confirmed = await confirm({
+      title: t("warranty_claims.portal.detail.attachmentDelete", "Delete attachment"),
+      text: t(
+        "warranty_claims.portal.detail.attachmentDeleteConfirm",
+        'Delete "{name}"? This action cannot be undone.',
+        { name: attachment.fileName }
+      ),
+      confirmText: t("warranty_claims.portal.detail.attachmentDelete", "Delete attachment"),
+      cancelText: t("warranty_claims.portal.detail.dialogCancel", "Cancel"),
+      variant: "destructive"
+    });
+    if (!confirmed) return;
+    setUploading(true);
+    setAttachmentMutationId(attachment.id);
+    setError(null);
+    try {
+      const result = await guardedMutation.runMutation({
+        operation: () => apiCall(
+          `/api/warranty_claims/portal/attachments?attachmentId=${encodeURIComponent(attachment.id)}`,
+          { method: "DELETE", credentials: "include" }
+        ),
+        context: {
+          moduleId: "warranty_claims",
+          entityId: "attachments.attachment",
+          operation: "portal_attachment_delete",
+          claimId: claim.id,
+          formId: DETAIL_MUTATION_CONTEXT_ID,
+          resourceKind: "attachments.attachment",
+          resourceId: attachment.id,
+          retryLastMutation: guardedMutation.retryLastMutation
+        },
+        mutationPayload: { claimId: claim.id, attachmentId: attachment.id }
+      });
+      if (!result.ok || !result.result?.ok) {
+        setError(t("warranty_claims.portal.detail.attachmentDeleteError", "Attachment deletion failed."));
+        return;
+      }
+      flash(t("warranty_claims.portal.detail.attachmentDeleteSuccess", "Attachment deleted."), "success");
+      await refreshAttachments(claim.id);
+    } catch {
+      setError(t("warranty_claims.portal.detail.attachmentDeleteError", "Attachment deletion failed."));
+    } finally {
+      setUploading(false);
+      setAttachmentMutationId(null);
+    }
+  }, [claim, confirm, guardedMutation, refreshAttachments, t, uploading]);
+  const requestAttachmentReplacement = React.useCallback((attachment) => {
+    if (uploading) return;
+    replacementTargetRef.current = attachment;
+    replacementInputRef.current?.click();
+  }, [uploading]);
+  const runClaimAction = React.useCallback(async (action) => {
+    if (!claim || actionSubmitting) return;
+    setActionSubmitting(true);
+    setError(null);
+    try {
+      const endpoint = `/api/warranty_claims/portal/claims/${encodeURIComponent(claim.id)}/${action}`;
+      const result = await guardedMutation.runMutation({
+        operation: () => withScopedApiRequestHeaders(
+          buildOptimisticLockHeader(claim.updatedAt),
+          () => apiCall(endpoint, {
+            method: "POST",
+            headers: { "Content-Type": "application/json" },
+            credentials: "include",
+            body: JSON.stringify({})
+          })
+        ),
+        context: {
+          moduleId: "warranty_claims",
+          entityId: "warranty_claims.claim",
+          operation: action === "submit" ? "portal_submit" : "portal_withdraw",
+          claimId: claim.id,
+          formId: DETAIL_MUTATION_CONTEXT_ID,
+          resourceKind: "warranty_claims.claim",
+          resourceId: claim.id,
+          retryLastMutation: guardedMutation.retryLastMutation
+        },
+        mutationPayload: { claimId: claim.id, action }
+      });
+      if (!result.ok || !result.result?.ok) {
+        const message = result.status === 409 ? t("warranty_claims.portal.detail.actionConflict", "This claim changed in the meantime. It has been reloaded \u2014 please try again.") : action === "submit" ? t("warranty_claims.portal.detail.submitError", "The claim could not be submitted.") : t("warranty_claims.portal.detail.withdrawError", "The claim could not be withdrawn.");
+        setError(message);
+        flash(message, "error");
+        if (result.status === 409) {
+          setClaimAction(null);
+          await loadClaim();
+        }
+        return;
+      }
+      setClaimAction(null);
+      flash(
+        action === "submit" ? t("warranty_claims.portal.detail.submitSuccess", "Your claim has been submitted.") : t("warranty_claims.portal.detail.withdrawSuccess", "Your claim has been withdrawn."),
+        "success"
+      );
+      await loadClaim();
+    } catch {
+      const message = action === "submit" ? t("warranty_claims.portal.detail.submitError", "The claim could not be submitted.") : t("warranty_claims.portal.detail.withdrawError", "The claim could not be withdrawn.");
+      setError(message);
+      flash(message, "error");
+    } finally {
+      setActionSubmitting(false);
+    }
+  }, [actionSubmitting, claim, guardedMutation, loadClaim, t]);
+  const handleSelectedFileChange = React.useCallback((event) => {
+    const file = event.target.files?.[0] ?? null;
+    if (!file) return;
+    void uploadAttachment(file);
+  }, [uploadAttachment]);
+  const handleReplacementFileChange = React.useCallback((event) => {
+    const replacementTarget = replacementTargetRef.current;
+    replacementTargetRef.current = null;
+    const file = event.target.files?.[0] ?? null;
+    event.target.value = "";
+    if (!replacementTarget || !file) return;
+    void uploadAttachment(file, replacementTarget);
+  }, [uploadAttachment]);
+  const handleCommentSubmit = React.useCallback((event) => {
+    event.preventDefault();
+    void submitComment();
+  }, [submitComment]);
+  const handleCommentKeyDown = React.useCallback((event) => {
+    if ((event.metaKey || event.ctrlKey) && event.key === "Enter") {
+      event.preventDefault();
+      void submitComment();
+      return;
+    }
+    if (event.key === "Escape") {
+      event.preventDefault();
+      setComment("");
+    }
+  }, [submitComment]);
+  if (loading) {
+    return /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center py-20", children: /* @__PURE__ */ jsx(Spinner, {}) });
+  }
+  if (!user) return null;
+  if (isLoading) {
+    return /* @__PURE__ */ jsx(LoadingMessage, { label: t("warranty_claims.portal.detail.loading") });
+  }
+  if (notFound) {
+    return /* @__PURE__ */ jsx(
+      PortalEmptyState,
+      {
+        icon: /* @__PURE__ */ jsx(ShieldCheck, { className: "size-5" }),
+        title: t("warranty_claims.portal.detail.notFoundTitle"),
+        description: t("warranty_claims.portal.detail.notFoundDescription"),
+        action: /* @__PURE__ */ jsx(Button, { asChild: true, children: /* @__PURE__ */ jsxs(Link, { href: `/${params.orgSlug}/portal/claims`, children: [
+          /* @__PURE__ */ jsx(ArrowLeft, { className: "size-4", "aria-hidden": "true" }),
+          t("warranty_claims.portal.detail.back")
+        ] }) })
+      }
+    );
+  }
+  if (!claim) {
+    return /* @__PURE__ */ jsx(ErrorMessage, { label: error ?? t("warranty_claims.portal.detail.loadError") });
+  }
+  const trackerSteps = buildTrackerSteps(claim, t, locale);
+  const isDraft = claim.status === "draft";
+  const canWithdraw = claim.status === "draft" || claim.status === "submitted";
+  const tone = bannerTone(claim.status);
+  const toneClasses = BANNER_TONE_CLASSES[tone];
+  const BannerIcon = tone === "error" ? CircleAlert : tone === "warning" ? TriangleAlert : Info;
+  const activityEntries = buildActivityEntries(events, attachments, t);
+  return /* @__PURE__ */ jsxs("div", { className: "mx-auto flex w-full max-w-3xl flex-col gap-4", children: [
+    /* @__PURE__ */ jsxs(
+      Link,
+      {
+        href: `/${params.orgSlug}/portal/claims`,
+        className: "text-sm font-medium text-muted-foreground transition-colors hover:text-foreground",
+        children: [
+          "\u2190",
+          "  ",
+          t("warranty_claims.portal.listTitle")
+        ]
+      }
+    ),
+    error ? /* @__PURE__ */ jsx(ErrorMessage, { label: error }) : null,
+    /* @__PURE__ */ jsxs("div", { className: "w-full overflow-hidden rounded-lg border border-border bg-card", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex w-full flex-col gap-3 px-6 pb-5 pt-6", children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex w-full items-center gap-2", children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 rounded-sm border border-border bg-background px-3 py-1", children: [
+            /* @__PURE__ */ jsx("span", { className: "text-xs font-medium text-muted-foreground", children: t(`warranty_claims.claimType.${claim.claimType}`) }),
+            /* @__PURE__ */ jsx("span", { className: "text-sm font-semibold text-foreground", children: claim.claimNumber })
+          ] }),
+          /* @__PURE__ */ jsx("div", { className: "min-w-px flex-1" }),
+          isDraft ? /* @__PURE__ */ jsx(
+            Button,
+            {
+              type: "button",
+              size: "sm",
+              className: DARK_BUTTON_CLASS,
+              onClick: () => setClaimAction("submit"),
+              disabled: actionSubmitting,
+              children: t("warranty_claims.portal.submit")
+            }
+          ) : null,
+          canWithdraw ? /* @__PURE__ */ jsx(
+            Button,
+            {
+              type: "button",
+              size: "sm",
+              variant: "destructive",
+              className: "rounded-md px-3 py-2 text-sm font-medium",
+              onClick: () => setClaimAction("withdraw"),
+              disabled: actionSubmitting,
+              children: t("warranty_claims.portal.detail.withdraw", "Withdraw claim")
+            }
+          ) : null
+        ] }),
+        /* @__PURE__ */ jsx("h1", { className: "text-xl font-bold text-foreground", children: buildClaimTitle(claim, t) }),
+        /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: buildClaimSubtitle(claim, t, locale) })
+      ] }),
+      /* @__PURE__ */ jsx("div", { className: "w-full px-6 pb-6", children: /* @__PURE__ */ jsxs("div", { className: `flex w-full items-start gap-3 rounded-lg px-4 py-3 ${toneClasses.wrapper}`, children: [
+        /* @__PURE__ */ jsx(BannerIcon, { className: `mt-px size-4 shrink-0 ${toneClasses.icon}`, "aria-hidden": "true" }),
+        /* @__PURE__ */ jsx("p", { className: `min-w-px flex-1 text-sm ${toneClasses.text}`, children: bannerMessage(claim, t) })
+      ] }) }),
+      /* @__PURE__ */ jsx("div", { className: "flex w-full flex-col px-6 pb-6", children: trackerSteps.map((step, index) => /* @__PURE__ */ jsxs("div", { className: "flex w-full items-stretch gap-4", children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center", children: [
+          step.state === "complete" ? /* @__PURE__ */ jsx("span", { className: "flex size-6 shrink-0 items-center justify-center rounded-full bg-status-success-icon", children: /* @__PURE__ */ jsx(Check, { className: "size-3 text-status-success-bg", strokeWidth: 2.5, "aria-hidden": "true" }) }) : step.state === "current" ? /* @__PURE__ */ jsx("span", { className: "flex size-6 shrink-0 items-center justify-center rounded-full bg-primary text-xs font-semibold text-primary-foreground", children: index + 1 }) : /* @__PURE__ */ jsx("span", { className: "flex size-6 shrink-0 items-center justify-center rounded-full border border-border text-xs font-semibold text-muted-foreground", children: index + 1 }),
+          index < trackerSteps.length - 1 ? /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: `min-h-2 w-px flex-1 ${step.state === "complete" ? "bg-status-success-icon" : "bg-border"}`
+            }
+          ) : null
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "flex min-w-px flex-1 flex-col gap-1 pb-4", children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex w-full items-center gap-2", children: [
+            /* @__PURE__ */ jsx(
+              "p",
+              {
+                className: step.state === "pending" ? "text-sm font-medium text-muted-foreground" : "text-sm font-semibold text-foreground",
+                children: step.title
+              }
+            ),
+            /* @__PURE__ */ jsx("div", { className: "min-w-px flex-1" }),
+            step.dateLabel ? /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: step.dateLabel }) : null
+          ] }),
+          /* @__PURE__ */ jsx("p", { className: "w-full text-xs text-muted-foreground", children: step.description })
+        ] })
+      ] }, step.id)) }),
+      /* @__PURE__ */ jsxs("div", { className: SECTION_CLASS, children: [
+        /* @__PURE__ */ jsx("p", { className: SECTION_HEADING_CLASS, children: t("warranty_claims.portal.tracker.items") }),
+        claim.lines.length > 0 ? claim.lines.map((line) => /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: "flex w-full items-center gap-3 rounded-lg border border-border px-4 py-3",
+            children: [
+              /* @__PURE__ */ jsxs("div", { className: "flex min-w-px flex-1 flex-col gap-1", children: [
+                /* @__PURE__ */ jsx("p", { className: "text-sm font-medium text-foreground", children: line.productName ?? line.sku ?? t("warranty_claims.portal.value.unnamedLine") }),
+                /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: line.sku ? t("warranty_claims.portal.tracker.itemMeta", {
+                  sku: line.sku,
+                  qty: formatQuantity(line.qtyClaimed, t("warranty_claims.portal.value.notAvailable"))
+                }) : t("warranty_claims.portal.tracker.itemQty", {
+                  qty: formatQuantity(line.qtyClaimed, t("warranty_claims.portal.value.notAvailable"))
+                }) })
+              ] }),
+              /* @__PURE__ */ jsxs("div", { className: "flex shrink-0 items-center gap-2 rounded-sm border border-border bg-background px-2 py-1", children: [
+                /* @__PURE__ */ jsx(
+                  "span",
+                  {
+                    className: `size-2 shrink-0 rounded-full ${LINE_STATUS_DOT_CLASSES[line.lineStatus] ?? "bg-status-neutral-icon"}`,
+                    "aria-hidden": "true"
+                  }
+                ),
+                /* @__PURE__ */ jsx("span", { className: "text-xs font-medium text-foreground", children: t(`warranty_claims.lineStatus.${line.lineStatus}`) })
+              ] })
+            ]
+          },
+          line.id
+        )) : /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: t("warranty_claims.portal.detail.linesEmpty.description") })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: SECTION_CLASS, children: [
+        /* @__PURE__ */ jsx("p", { className: SECTION_HEADING_CLASS, children: t("warranty_claims.portal.tracker.activity") }),
+        activityEntries.length > 0 ? activityEntries.map((entry) => /* @__PURE__ */ jsxs("div", { className: "flex w-full items-start gap-3", children: [
+          /* @__PURE__ */ jsx("span", { className: "mt-1 size-2 shrink-0 rounded-full bg-status-neutral-icon", "aria-hidden": "true" }),
+          /* @__PURE__ */ jsxs("div", { className: "flex min-w-px flex-1 flex-col gap-px", children: [
+            /* @__PURE__ */ jsxs("div", { className: "flex w-full items-start gap-2", children: [
+              /* @__PURE__ */ jsx("p", { className: "text-sm font-medium text-foreground", children: entry.title }),
+              /* @__PURE__ */ jsx("div", { className: "min-w-px flex-1" }),
+              entry.createdAt ? /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: formatShortDate(entry.createdAt, locale) }) : null
+            ] }),
+            entry.href ? /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [
+              /* @__PURE__ */ jsx(
+                "a",
+                {
+                  href: entry.href,
+                  target: "_blank",
+                  rel: "noreferrer",
+                  className: "min-w-0 whitespace-pre-wrap text-xs text-muted-foreground underline-offset-2 hover:underline",
+                  children: entry.description
+                }
+              ),
+              entry.attachment ? /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1", children: [
+                /* @__PURE__ */ jsxs(
+                  Button,
+                  {
+                    type: "button",
+                    variant: "ghost",
+                    size: "sm",
+                    className: "px-2 text-xs",
+                    "aria-label": t(
+                      "warranty_claims.portal.detail.attachmentReplaceNamed",
+                      "Replace {name}",
+                      { name: entry.attachment.fileName }
+                    ),
+                    onClick: () => requestAttachmentReplacement(entry.attachment),
+                    disabled: uploading,
+                    children: [
+                      attachmentMutationId === entry.attachment.id ? /* @__PURE__ */ jsx(Spinner, { className: "size-3" }) : /* @__PURE__ */ jsx(RefreshCw, { className: "size-3", "aria-hidden": "true" }),
+                      t("warranty_claims.portal.detail.attachmentReplace", "Replace")
+                    ]
+                  }
+                ),
+                /* @__PURE__ */ jsxs(
+                  Button,
+                  {
+                    type: "button",
+                    variant: "ghost",
+                    size: "sm",
+                    className: "px-2 text-xs text-status-error-text",
+                    "aria-label": t(
+                      "warranty_claims.portal.detail.attachmentDeleteNamed",
+                      "Delete {name}",
+                      { name: entry.attachment.fileName }
+                    ),
+                    onClick: () => {
+                      void deleteAttachment(entry.attachment);
+                    },
+                    disabled: uploading,
+                    children: [
+                      /* @__PURE__ */ jsx(Trash2, { className: "size-3", "aria-hidden": "true" }),
+                      t("warranty_claims.portal.detail.attachmentDelete", "Delete attachment")
+                    ]
+                  }
+                )
+              ] }) : null
+            ] }) : /* @__PURE__ */ jsx("p", { className: "whitespace-pre-wrap text-xs text-muted-foreground", children: entry.description })
+          ] })
+        ] }, entry.id)) : /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: t("warranty_claims.portal.detail.timelineEmpty.description") }),
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            ref: replacementInputRef,
+            type: "file",
+            accept: ATTACHMENT_ACCEPT_TYPES,
+            onChange: handleReplacementFileChange,
+            disabled: uploading,
+            className: "sr-only",
+            "aria-label": t("warranty_claims.portal.detail.attachmentChooseReplacement", "Choose replacement file")
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: SECTION_CLASS, children: [
+        /* @__PURE__ */ jsx("p", { className: SECTION_HEADING_CLASS, children: t("warranty_claims.portal.tracker.message") }),
+        /* @__PURE__ */ jsxs("form", { id: "warranty-claim-comment-box", className: "flex w-full flex-col gap-3", onSubmit: handleCommentSubmit, children: [
+          /* @__PURE__ */ jsx(
+            Textarea,
+            {
+              value: comment,
+              onChange: (event) => setComment(event.target.value),
+              onKeyDown: handleCommentKeyDown,
+              placeholder: t("warranty_claims.portal.tracker.messagePlaceholder"),
+              disabled: commentSubmitting,
+              maxLength: 8e3,
+              className: "h-40 resize-none rounded-lg border-input bg-background px-3 py-2 text-sm shadow-xs placeholder:text-muted-foreground"
+            }
+          ),
+          /* @__PURE__ */ jsxs("div", { className: "flex w-full items-center gap-2", children: [
+            /* @__PURE__ */ jsxs("label", { className: `flex items-center gap-2 ${uploading ? "cursor-default opacity-70" : "cursor-pointer"}`, children: [
+              uploading ? /* @__PURE__ */ jsx(Spinner, { className: "size-4" }) : /* @__PURE__ */ jsx(Paperclip, { className: "size-4 text-muted-foreground", "aria-hidden": "true" }),
+              /* @__PURE__ */ jsx("span", { className: "text-xs font-medium text-muted-foreground transition-colors hover:text-foreground", children: uploading ? t("warranty_claims.portal.detail.uploading") : t("warranty_claims.portal.tracker.attachFiles") }),
+              /* @__PURE__ */ jsx(
+                "input",
+                {
+                  type: "file",
+                  accept: ATTACHMENT_ACCEPT_TYPES,
+                  onChange: handleSelectedFileChange,
+                  disabled: uploading,
+                  className: "sr-only"
+                },
+                fileInputKey
+              )
+            ] }),
+            /* @__PURE__ */ jsx("div", { className: "min-w-px flex-1" }),
+            /* @__PURE__ */ jsx(Button, { type: "submit", size: "sm", className: DARK_BUTTON_CLASS, disabled: commentSubmitting || !comment.trim(), children: commentSubmitting ? t("warranty_claims.portal.tracker.sending") : t("warranty_claims.portal.tracker.send") })
+          ] })
+        ] })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx(
+      Dialog,
+      {
+        open: claimAction !== null,
+        onOpenChange: (open) => {
+          if (!open && !actionSubmitting) setClaimAction(null);
+        },
+        children: /* @__PURE__ */ jsxs(
+          DialogContent,
+          {
+            className: "max-w-lg",
+            onKeyDown: (event) => {
+              if ((event.metaKey || event.ctrlKey) && event.key === "Enter") {
+                event.preventDefault();
+                if (claimAction && !actionSubmitting) void runClaimAction(claimAction);
+              }
+              if (event.key === "Escape" && !actionSubmitting) {
+                setClaimAction(null);
+              }
+            },
+            children: [
+              /* @__PURE__ */ jsxs(DialogHeader, { children: [
+                /* @__PURE__ */ jsx(DialogTitle, { children: claimAction === "withdraw" ? t("warranty_claims.portal.detail.withdrawDialog.title", "Withdraw this claim?") : t("warranty_claims.portal.detail.submitDialog.title", "Submit this claim?") }),
+                /* @__PURE__ */ jsx(DialogDescription, { children: claimAction === "withdraw" ? t("warranty_claims.portal.detail.withdrawDialog.description", "The claim will be cancelled and cannot be reopened. This cannot be undone.") : t("warranty_claims.portal.detail.submitDialog.description", "Your claim will be sent to our support team for review. You can still add comments and photos afterwards.") })
+              ] }),
+              /* @__PURE__ */ jsxs(DialogFooter, { children: [
+                /* @__PURE__ */ jsx(
+                  Button,
+                  {
+                    type: "button",
+                    variant: "outline",
+                    onClick: () => setClaimAction(null),
+                    disabled: actionSubmitting,
+                    children: t("warranty_claims.portal.detail.dialogCancel", "Cancel")
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  Button,
+                  {
+                    type: "button",
+                    variant: claimAction === "withdraw" ? "destructive" : "default",
+                    onClick: () => {
+                      if (claimAction) void runClaimAction(claimAction);
+                    },
+                    disabled: actionSubmitting,
+                    children: claimAction === "withdraw" ? actionSubmitting ? t("warranty_claims.portal.detail.withdrawing", "Withdrawing...") : t("warranty_claims.portal.detail.withdrawConfirm", "Withdraw claim") : actionSubmitting ? t("warranty_claims.portal.detail.submitting", "Submitting...") : t("warranty_claims.portal.detail.submitConfirm", "Submit claim")
+                  }
+                )
+              ] })
+            ]
+          }
+        )
+      }
+    ),
+    ConfirmDialogElement
+  ] });
+}
+export {
+  WarrantyClaimPortalDetailPage as default
+};
+//# sourceMappingURL=page.js.map