Message Popover

"use client";

import { toast } from "sonner";

import {
  groupedItems,
  MessagePopoverFrame,
} from "@/demos/message-popover/demo-data";

export function MessagePopoverDemo() {
  return (
    <MessagePopoverFrame
      items={groupedItems}
      onNavigate={(item) => {
        toast.message(`Navigate: ${item.title}`);
      }}
    />
  );
}

"use client";

import { StatusTag } from "@/components/f-ui/status-tag";
import { Button } from "@/components/ui/button";
import { DesignCompare } from "@/demos/_design/design-compare";

function RowSketch({ titleAsLink }: { titleAsLink: boolean }) {
  return (
    <div className="flex flex-col gap-2 rounded-lg border p-3 sm:flex-row sm:items-start sm:justify-between sm:gap-4">
      <div className="min-w-0 space-y-1">
        <div className="flex flex-wrap items-center gap-2">
          {titleAsLink ? (
            <button
              type="button"
              className="rounded-sm text-left text-sm font-medium text-primary hover:underline"
            >
              Missing unit price
            </button>
          ) : (
            <p className="text-sm font-medium text-foreground">
              Missing unit price
            </p>
          )}
          <StatusTag tone="destructive" icon="auto">
            Must fix
          </StatusTag>
        </div>
        <p className="text-sm text-muted-foreground">Line 3 · Unit price</p>
        <p className="text-sm text-muted-foreground">
          Enter a price greater than 0.
        </p>
      </div>
      {titleAsLink ? null : (
        <Button type="button" variant="outline">
          Go to field
        </Button>
      )}
    </div>
  );
}

export function MessagePopoverTitleVsButtonDemo() {
  return (
    <DesignCompare
      wrong={<RowSketch titleAsLink={false} />}
      right={<RowSketch titleAsLink />}
    />
  );
}

"use client";

import { toast } from "sonner";

import {
  flatItems,
  MessagePopoverFrame,
} from "@/demos/message-popover/demo-data";

export function MessagePopoverFlatDemo() {
  return (
    <MessagePopoverFrame
      items={flatItems}
      onNavigate={(item) => {
        toast.message(`Navigate: ${item.title}`);
      }}
    />
  );
}

"use client";

import { toast } from "sonner";

import type { MessageItem } from "@/components/f-ui/message-popover/message-popover";
import { MessagePopoverFrame } from "@/demos/message-popover/demo-data";

const items: MessageItem[] = Array.from({ length: 6 }, (_, i) => ({
  id: `inv-${i + 1}`,
  severity: "error" as const,
  title: "Missing invoice number",
  subtitle: `Line ${i + 1} · Invoice number`,
  group: "Line items",
  description: "Enter the supplier invoice number.",
}));

export function MessagePopoverAggregateDemo() {
  return (
    <MessagePopoverFrame
      items={items}
      onNavigate={(item) => {
        toast.message(`Navigate: ${item.subtitle ?? item.title}`);
      }}
    />
  );
}

"use client";

import { MessagePopoverFrame } from "@/demos/message-popover/demo-data";

export function MessagePopoverEmptyFilterDemo() {
  return (
    <MessagePopoverFrame
      items={[
        {
          id: "w1",
          severity: "warning",
          title: "Quantity looks high",
          subtitle: "Line 1 · Qty",
          description: "Confirm quantity before submit.",
        },
      ]}
      defaultFilter="errors"
    />
  );
}

"use client";

import { toast } from "sonner";

import type { MessageItem } from "@/components/f-ui/message-popover/message-popover";
import { MessagePopoverFrame } from "@/demos/message-popover/demo-data";

const items: MessageItem[] = [
  {
    id: "e1",
    severity: "error",
    title: "Missing unit price",
    subtitle: "Line 3 · Unit price",
    group: "Line items",
    description: "Enter a price greater than 0.",
  },
  {
    id: "hold-1",
    severity: "warning",
    title: "Packing list mismatch",
    subtitle: "Shipment 14 · Carton 2",
    channel: "holds",
    description: "Confirm the carton contents before submit.",
  },
];

export function MessagePopoverChannelDemo() {
  return (
    <MessagePopoverFrame
      items={items}
      channels={[{ id: "holds", label: "Holds (1)" }]}
      defaultFilter="holds"
      onNavigate={(item) => {
        toast.message(`Navigate: ${item.title}`);
      }}
    />
  );
}

"use client";

import { useState } from "react";
import { toast } from "sonner";

import type { MessageItem } from "@/components/f-ui/message-popover/message-popover";
import {
  groupedItems,
  MessagePopoverFrame,
} from "@/demos/message-popover/demo-data";

export function MessagePopoverAcknowledgeDemo() {
  const [items, setItems] = useState<MessageItem[]>(groupedItems);

  return (
    <MessagePopoverFrame
      items={items}
      onNavigate={(item) => {
        toast.message(`Navigate: ${item.title}`);
      }}
      onAcknowledge={(id, acknowledged) => {
        setItems((prev) =>
          prev.map((item) =>
            item.id === id ? { ...item, acknowledged } : item,
          ),
        );
      }}
      onAcknowledgeAll={() => {
        setItems((prev) =>
          prev.map((item) =>
            item.severity === "warning"
              ? { ...item, acknowledged: true }
              : item,
          ),
        );
      }}
    />
  );
}

"use client";

import { useState } from "react";
import { toast } from "sonner";

import { FooterToolbar } from "@/components/f-ui/page/footer-toolbar";
import {
  MessagePopover,
  type MessageItem,
} from "@/components/f-ui/message-popover/message-popover";
import { Button } from "@/components/ui/button";
import { groupedItems } from "@/demos/message-popover/demo-data";

export function MessagePopoverFooterDemo() {
  const [open, setOpen] = useState(false);
  const [items] = useState<MessageItem[]>(groupedItems);

  return (
    <div className="overflow-hidden rounded-xl border bg-card">
      <div className="space-y-2 border-b px-6 py-3">
        <p className="text-sm font-medium">Purchase request · PR-1042</p>
        <p className="text-xs text-muted-foreground">
          Draft edits stay quiet. Click Validate to open the object message
          list.
        </p>
        <Button type="button" variant="outline" onClick={() => setOpen(true)}>
          Validate
        </Button>
      </div>
      <FooterToolbar
        className="border-t-0"
        extra={
          <MessagePopover
            items={items}
            open={open}
            onOpenChange={setOpen}
            onNavigate={(item) => {
              toast.message(`Navigate: ${item.title}`);
            }}
          />
        }
      >
        <Button type="button" variant="outline">
          Save draft
        </Button>
        <Button type="button" onClick={() => setOpen(true)}>
          Submit
        </Button>
      </FooterToolbar>
    </div>
  );
}

"use client";

import { type MessageItem } from "@/components/f-ui/message-popover/message-popover";
import { MessagePopoverFrame } from "@/demos/message-popover/demo-data";

const several: MessageItem[] = [
  {
    id: "e1",
    severity: "error",
    title: "Missing unit price",
    subtitle: "Line 3 · Unit price",
    group: "Line items",
    description: "Enter a price greater than 0.",
    details:
      "The catalog row has no price. Purchasing must confirm the contract rate before submit.\nDo not guess a unit price from a prior PO.",
    detailsLink: {
      href: "https://ui.isaacfei.com/docs/components/message-popover",
      label: "More information",
    },
  },
  {
    id: "w1",
    severity: "warning",
    title: "Quantity looks high",
    subtitle: "Line 1 · Qty",
    group: "Line items",
    description: "Confirm quantity before submit.",
  },
];

const sole: MessageItem[] = [several[0]!];

export function MessagePopoverDetailsDemo() {
  return (
    <div className="flex flex-col gap-8">
      <div className="space-y-2">
        <p className="text-sm font-medium text-muted-foreground">Several messages</p>
        <MessagePopoverFrame items={several} onNavigate={() => {}} />
      </div>
      <div className="space-y-2">
        <p className="text-sm font-medium text-muted-foreground">
          Sole message with details
        </p>
        <MessagePopoverFrame items={sole} onNavigate={() => {}} />
      </div>
    </div>
  );
}