@zenify-omni/chat-ui-react-js 0.1.0

package/components/custom/previews/tiktok-product-preview.js

@@ -0,0 +1,321 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import i18n from "@zenify-omni/chat-js/lib/i18n/index.js";
+import { cn } from "../../../lib/utils.js";
+import { MessageTime } from "../../chat-route/chat-box/message-time.js";
+import { formatDayWithTime } from "@zenify-omni/chat-js/utils/date.js";
+import { useState } from "react";
+import { createPortal } from "react-dom";
+import { X } from "lucide-react";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger
+} from "../../ui/tooltip.js";
+import {
+  Carousel,
+  CarouselContent,
+  CarouselItem,
+  CarouselPrevious,
+  CarouselNext
+} from "../../ui/carousel.js";
+import { useTranslation } from "react-i18next";
+const formattedPrice = (price, currency) => {
+  if (!price) return "Li\xEAn h\u1EC7";
+  const priceNumber = parseInt(price.replace(/[^0-9.-]+/g, ""));
+  if (isNaN(priceNumber)) return price;
+  return new Intl.NumberFormat("vi-VN", {
+    style: currency ? "currency" : "decimal",
+    currency: currency || "VND",
+    maximumFractionDigits: 0
+  }).format(priceNumber);
+};
+const PriceDisplay = ({ price, sale_price, currency }) => {
+  if (!price && !sale_price) return null;
+  return /* @__PURE__ */ jsx("span", { className: "text-base font-bold", style: { color: "#1a73e8" }, children: formattedPrice(sale_price || price, currency) });
+};
+function TiktokProductPreview({ msg, className, timeText }) {
+  const { content, extra_data } = msg || {};
+  const products = extra_data?.products;
+  const msgStatus = msg?.status;
+  if (Array.isArray(products) && products.length > 0) {
+    return /* @__PURE__ */ jsx(
+      ProductSlider,
+      {
+        products,
+        className,
+        date: msg?.date || msg?.created_at,
+        timeText,
+        msgStatus
+      }
+    );
+  }
+  const {
+    product_url,
+    preview_product_url,
+    product_title,
+    product_id,
+    product_code,
+    name,
+    price,
+    description,
+    availability,
+    image_url,
+    brand,
+    sale_price,
+    currency,
+    condition,
+    url,
+    sold_count
+  } = extra_data || {};
+  return /* @__PURE__ */ jsx(
+    SingleProductCard,
+    {
+      productImage: product_url || image_url || "https://placehold.co/240x240?text=No+Image",
+      productName: name || product_title || content?.text || i18n.t("common:label.product", {
+        defaultValue: "S\u1EA3n ph\u1EA9m"
+      }),
+      productId: product_id,
+      productCode: product_code,
+      price,
+      salePrice: sale_price,
+      currency,
+      description,
+      brand,
+      availability,
+      condition,
+      url: product_url || url,
+      previewUrl: preview_product_url,
+      soldCount: sold_count,
+      className,
+      date: msg?.date || msg?.created_at,
+      timeText,
+      msgStatus
+    }
+  );
+}
+function ProductSlider({ products, className, date, timeText, msgStatus }) {
+  if (products.length === 1) {
+    const p = products[0];
+    return /* @__PURE__ */ jsx(
+      SingleProductCard,
+      {
+        productImage: p.image_url || "https://placehold.co/240x240?text=No+Image",
+        productName: p.name,
+        productCode: p.product_code,
+        productId: p.product_id,
+        price: p.price,
+        salePrice: p.sale_price,
+        currency: p.currency,
+        description: p.description,
+        url: p.product_url,
+        previewUrl: p.preview_product_url,
+        soldCount: p.sold_count,
+        className,
+        date,
+        timeText,
+        msgStatus
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn("ml-auto max-w-[300px] rounded-xl px-0", className),
+      title: date ? formatDayWithTime(date) : "",
+      children: [
+        /* @__PURE__ */ jsxs(
+          Carousel,
+          {
+            opts: {
+              align: "start",
+              slidesToScroll: 1,
+              containScroll: "trimSnaps"
+            },
+            children: [
+              /* @__PURE__ */ jsx(CarouselContent, { className: "-ml-2", children: products.map((p, i) => /* @__PURE__ */ jsx(CarouselItem, { className: "basis-[85%] pl-2", children: /* @__PURE__ */ jsx(
+                SingleProductCard,
+                {
+                  productImage: p.image_url || "https://placehold.co/240x240?text=No+Image",
+                  productName: p.name,
+                  productCode: p.product_code,
+                  productId: p.product_id,
+                  price: p.price,
+                  salePrice: p.sale_price,
+                  currency: p.currency,
+                  description: p.description,
+                  url: p.product_url,
+                  previewUrl: p.preview_product_url,
+                  soldCount: p.sold_count,
+                  className: "w-full"
+                }
+              ) }, p.product_id || i)) }),
+              /* @__PURE__ */ jsx(CarouselPrevious, { className: "-left-5 z-10 h-9 w-9" }),
+              /* @__PURE__ */ jsx(CarouselNext, { className: "-right-5 z-10 h-9 w-9" })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx(MessageTime, { timeText, status: msgStatus })
+      ]
+    }
+  );
+}
+function SingleProductCard({
+  productImage,
+  productName,
+  price,
+  salePrice,
+  currency,
+  soldCount,
+  previewUrl,
+  className,
+  date,
+  timeText,
+  msgStatus
+}) {
+  const { t } = useTranslation();
+  const [showImageModal, setShowImageModal] = useState(false);
+  const [scale, setScale] = useState(1);
+  const ImageModal = () => /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: "fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-80 p-4",
+      onClick: (e) => {
+        e.stopPropagation();
+        setShowImageModal(false);
+      },
+      role: "dialog",
+      "aria-modal": "true",
+      "aria-label": "Product image preview",
+      children: [
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            className: "absolute right-4 top-4 rounded-full bg-white p-2 text-black",
+            onClick: (e) => {
+              e.stopPropagation();
+              setShowImageModal(false);
+            },
+            "aria-label": "Close preview",
+            children: /* @__PURE__ */ jsx(X, { size: 20 })
+          }
+        ),
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: "relative max-h-[90vh] max-w-[90vw] overflow-hidden",
+            onClick: (e) => e.stopPropagation(),
+            children: [
+              /* @__PURE__ */ jsx(
+                "div",
+                {
+                  className: "cursor-zoom-in overflow-auto",
+                  onMouseMove: (e) => {
+                    const rect = e.currentTarget.getBoundingClientRect();
+                    const x = (e.clientX - rect.left) / rect.width * 100;
+                    const y = (e.clientY - rect.top) / rect.height * 100;
+                    e.currentTarget.style.transformOrigin = `${x}% ${y}%`;
+                  },
+                  onClick: () => {
+                    setScale(scale === 1 ? 2 : scale === 2 ? 3 : 1);
+                  },
+                  children: /* @__PURE__ */ jsx(
+                    "img",
+                    {
+                      src: productImage,
+                      alt: productName,
+                      className: "transition-transform duration-300 ease-in-out",
+                      style: { transform: `scale(${scale})` },
+                      loading: "lazy"
+                    }
+                  )
+                }
+              ),
+              /* @__PURE__ */ jsxs("div", { className: "absolute bottom-4 left-0 right-0 text-center text-white", children: [
+                "Click to zoom ",
+                scale === 1 ? "2x" : scale === 2 ? "3x" : "1x"
+              ] })
+            ]
+          }
+        )
+      ]
+    }
+  );
+  const openPreviewUrl = () => {
+    if (previewUrl) window.open(previewUrl, "_blank");
+  };
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "relative w-[380px] overflow-hidden rounded-2xl border-[6px] bg-white shadow-sm",
+        previewUrl ? "cursor-pointer" : "",
+        className
+      ),
+      style: { borderColor: "#93c5fd" },
+      title: date ? formatDayWithTime(date) : "",
+      onClick: openPreviewUrl,
+      children: [
+        /* @__PURE__ */ jsx("div", { className: "border-b border-gray-100 px-3 py-2", children: /* @__PURE__ */ jsx("span", { className: "text-base font-semibold text-gray-800", children: t("common:label.product", { defaultValue: "S\u1EA3n ph\u1EA9m" }) }) }),
+        /* @__PURE__ */ jsxs("div", { className: "m-3 flex items-stretch gap-3 rounded-xl bg-gray-50 pr-3", children: [
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: "w-[80px] shrink-0 cursor-pointer overflow-hidden rounded-xl border-2 border-gray-200",
+              onClick: (e) => {
+                e.stopPropagation();
+                setShowImageModal(true);
+              },
+              children: /* @__PURE__ */ jsx(
+                "img",
+                {
+                  src: productImage,
+                  alt: productName,
+                  className: "h-full w-full object-cover transition-transform duration-200 hover:scale-105",
+                  loading: "lazy",
+                  onError: (e) => {
+                    e.currentTarget.onerror = null;
+                    e.currentTarget.src = "https://placehold.co/80x80?text=No+Image";
+                  }
+                }
+              )
+            }
+          ),
+          /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-1 flex-col gap-0.5 py-3", children: [
+            /* @__PURE__ */ jsx(TooltipProvider, { children: /* @__PURE__ */ jsxs(Tooltip, { children: [
+              /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx("p", { className: "truncate text-base font-semibold text-gray-900", children: productName }) }),
+              /* @__PURE__ */ jsx(TooltipContent, { variant: "dark", className: "text-sm", children: productName })
+            ] }) }),
+            /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-1", children: [
+              /* @__PURE__ */ jsx("span", { className: "min-w-0 truncate", children: /* @__PURE__ */ jsx(
+                PriceDisplay,
+                {
+                  price: price?.toString(),
+                  sale_price: salePrice?.toString(),
+                  currency
+                }
+              ) }),
+              /* @__PURE__ */ jsx(
+                MessageTime,
+                {
+                  timeText,
+                  status: msgStatus,
+                  className: "mt-0 shrink-0"
+                }
+              )
+            ] }),
+            soldCount !== void 0 && /* @__PURE__ */ jsxs("span", { className: "text-xs text-gray-500", children: [
+              t("common:label.sold", { defaultValue: "\u0110\xE3 b\xE1n" }),
+              " ",
+              soldCount ?? 0
+            ] })
+          ] })
+        ] }),
+        showImageModal && createPortal(/* @__PURE__ */ jsx(ImageModal, {}), document.body)
+      ]
+    }
+  );
+}
+export {
+  TiktokProductPreview as default
+};

package/components/custom/previews/tiktok-voucher-preview.js

@@ -0,0 +1,151 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cn } from "../../../lib/utils.js";
+import { ChevronRight } from "lucide-react";
+import { MessageTime } from "../../chat-route/chat-box/message-time.js";
+import { formatDayWithTime, formatDay } from "@zenify-omni/chat-js/utils/date.js";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger
+} from "../../ui/tooltip.js";
+import i18n from "@zenify-omni/chat-js/lib/i18n/index.js";
+const TARGET_BUYER_SEGMENT_LABELS = {
+  ALL: "Th\xF4ng th\u01B0\u1EDDng",
+  NEW: "Kh\xE1ch h\xE0ng m\u1EDBi",
+  REPEAT_CUSTOMERS: "Kh\xE1ch h\xE0ng quay l\u1EA1i",
+  RECENT_CUSTOMERS: "Kh\xE1ch h\xE0ng mua l\u1EA7n \u0111\u1EA7u g\u1EA7n \u0111\xE2y",
+  FREQUENT_CUSTOMERS: "Kh\xE1ch h\xE0ng th\u01B0\u1EDDng xuy\xEAn",
+  LAPSED_CUSTOMERS: "Kh\xE1ch h\xE0ng kh\xF4ng ho\u1EA1t \u0111\u1ED9ng",
+  NEW_FOLLOWERS: "Ng\u01B0\u1EDDi theo d\xF5i m\u1EDBi",
+  EXISTING_ACTIVE_FOLLOWERS: "Ng\u01B0\u1EDDi theo d\xF5i t\xEDch c\u1EF1c"
+};
+const isISOCurrency = (c) => /^[A-Z]{3}$/.test(c);
+const formatPrice = (amount, currency) => {
+  if (currency && isISOCurrency(currency) && currency !== "VND") {
+    return new Intl.NumberFormat("vi-VN", {
+      style: "currency",
+      currency,
+      maximumFractionDigits: 0
+    }).format(Number(amount));
+  }
+  return Number(amount).toLocaleString("vi-VN") + "\u0111";
+};
+function getDiscountText(discount) {
+  if (!discount) return "Voucher gi\u1EA3m gi\xE1";
+  if (discount.type === "PERCENT_OFF")
+    return i18n.t("common:label.discountPercentage", {
+      percentage: discount.percentage,
+      defaultValue: "Gi\u1EA3m {percentage}%"
+    });
+  if (discount.type === "AMOUNT_OFF" && discount.reduction_amount?.amount)
+    return i18n.t("common:label.discountAmount", {
+      amount: formatPrice(
+        discount.reduction_amount.amount,
+        discount.reduction_amount.currency
+      ),
+      defaultValue: "Gi\u1EA3m {amount}"
+    });
+  return "Voucher gi\u1EA3m gi\xE1";
+}
+function getMinSpendText(threshold) {
+  if (!threshold || threshold.type === "NONE")
+    return "Kh\xF4ng c\xF3 m\u1EE9c chi ti\xEAu t\u1ED1i thi\u1EC3u";
+  if (threshold.type === "MIN_SPEND" && threshold.min_spend?.amount)
+    return i18n.t("common:label.minSpendAmount", {
+      amount: formatPrice(
+        threshold.min_spend.amount,
+        threshold.min_spend.currency
+      ),
+      defaultValue: "\u0110\u01A1n t\u1ED1i thi\u1EC3u {amount}"
+    });
+  return "Kh\xF4ng c\xF3 m\u1EE9c chi ti\xEAu t\u1ED1i thi\u1EC3u";
+}
+function getValidityText(redemption_duration) {
+  if (!redemption_duration) return null;
+  if (redemption_duration.type === "RELATIVE" && redemption_duration.relative_time) {
+    return i18n.t("common:label.validityPeriodFromReceipt", {
+      relative_time: redemption_duration.relative_time,
+      defaultValue: "Th\u1EDDi h\u1EA1n hi\u1EC7u l\u1EF1c {relative_time} ng\xE0y k\u1EC3 t\u1EEB khi nh\u1EADn"
+    });
+  }
+  if (redemption_duration.type === "ABSOLUTE" && redemption_duration.end_time) {
+    const start = redemption_duration.start_time ? formatDay(redemption_duration.start_time * 1e3) : null;
+    const end = formatDay(redemption_duration.end_time * 1e3);
+    return start ? i18n.t("common:label.validFromTo", {
+      start,
+      end,
+      defaultValue: "Hi\u1EC7u l\u1EF1c t\u1EEB {start} \u0111\u1EBFn {end}"
+    }) : i18n.t("common:label.validUntil", {
+      end,
+      defaultValue: "Hi\u1EC7u l\u1EF1c \u0111\u1EBFn {end}"
+    });
+  }
+  return null;
+}
+function getApplicableText(product_scope) {
+  if (!product_scope || product_scope === "FULL_SHOP") return "T\u1EA5t c\u1EA3 s\u1EA3n ph\u1EA9m";
+  return "S\u1EA3n ph\u1EA9m \u0111\u01B0\u1EE3c ch\u1ECDn";
+}
+function TiktokVoucherPreview({ msg, className, timeText }) {
+  const coupon = msg?.extra_data?.coupon;
+  if (!coupon) return null;
+  const typeLabel = TARGET_BUYER_SEGMENT_LABELS[coupon.target_buyer_segment] || i18n.t("common:label.normalPriority", {
+    defaultValue: "Th\xF4ng th\u01B0\u1EDDng"
+  });
+  const discountText = getDiscountText(coupon.discount);
+  const minSpendText = getMinSpendText(coupon.threshold);
+  const validityText = getValidityText(coupon.redemption_duration);
+  const applicableText = getApplicableText(coupon.product_scope);
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "w-[380px] overflow-hidden rounded-2xl border-[6px] bg-white shadow-sm",
+        className
+      ),
+      style: { borderColor: "#93c5fd" },
+      title: formatDayWithTime(msg.date || msg.created_at),
+      children: [
+        /* @__PURE__ */ jsx("div", { className: "px-3 pb-2 pt-3", children: /* @__PURE__ */ jsx("p", { className: "text-base font-semibold text-gray-800", children: "Voucher" }) }),
+        /* @__PURE__ */ jsxs("div", { className: "mx-3 mb-3 rounded-xl border border-red-100 bg-red-50", children: [
+          /* @__PURE__ */ jsxs("div", { className: "px-3 pb-2 pt-3", children: [
+            /* @__PURE__ */ jsx(TooltipProvider, { children: /* @__PURE__ */ jsxs(Tooltip, { children: [
+              /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx("span", { className: "inline-block max-w-full truncate rounded bg-red-100 px-2 py-0.5 text-xs font-medium text-red-500", children: typeLabel }) }),
+              /* @__PURE__ */ jsx(TooltipContent, { variant: "dark", className: "text-sm", children: typeLabel })
+            ] }) }),
+            /* @__PURE__ */ jsx("p", { className: "mt-1.5 text-lg font-bold text-gray-900", children: discountText }),
+            /* @__PURE__ */ jsx("p", { className: "text-sm text-gray-700", children: minSpendText }),
+            validityText && /* @__PURE__ */ jsx("p", { className: "mt-0.5 text-xs text-gray-400", children: validityText })
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "relative my-1 flex items-center", children: [
+            /* @__PURE__ */ jsx("div", { className: "absolute -left-3 top-1/2 h-6 w-6 -translate-y-1/2 rounded-full bg-white" }),
+            /* @__PURE__ */ jsx("div", { className: "mx-3 flex-1 border-t border-dashed border-red-400" }),
+            /* @__PURE__ */ jsx("div", { className: "absolute -right-3 top-1/2 h-6 w-6 -translate-y-1/2 rounded-full bg-white" })
+          ] }),
+          /* @__PURE__ */ jsxs(
+            "div",
+            {
+              className: cn(
+                "flex items-center justify-between px-3 py-2",
+                coupon.coupon_id && "cursor-pointer hover:bg-red-100/40"
+              ),
+              onClick: () => coupon.coupon_id && window.open(
+                `https://seller-vn.tiktok.com/promotion/marketing-tools/voucher/view/${coupon.coupon_id}`,
+                "_blank"
+              ),
+              children: [
+                /* @__PURE__ */ jsx("span", { className: "text-sm text-gray-700", children: applicableText }),
+                /* @__PURE__ */ jsx(ChevronRight, { size: 16, className: "text-gray-400" })
+              ]
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsx(MessageTime, { timeText, status: msg?.status, className: "pr-2" })
+      ]
+    }
+  );
+}
+export {
+  TiktokVoucherPreview as default
+};

package/components/custom/previews/whatsapp/index.js

@@ -0,0 +1,10 @@
+import WhatsAppContactCardPreview from "./whatsapp-contact-card-preview.js";
+import WhatsAppOrderPreview from "./whatsapp-order-preview.js";
+import WhatsAppPollPreview from "./whatsapp-poll-preview.js";
+import WhatsAppProductPreview from "./whatsapp-product-preview.js";
+export {
+  WhatsAppContactCardPreview,
+  WhatsAppOrderPreview,
+  WhatsAppPollPreview,
+  WhatsAppProductPreview
+};

package/components/custom/previews/whatsapp/whatsapp-contact-card-preview.js

@@ -0,0 +1,150 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { User, Copy, Check } from "lucide-react";
+import { showSuccessToast } from "../../../ui/sonner.js";
+import { cn } from "../../../../lib/utils.js";
+import { Avatar, AvatarFallback } from "../../avatar.js";
+import { MessageTime } from "../../../chat-route/chat-box/message-time.js";
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle
+} from "../../../ui/dialog.js";
+import { useTranslation } from "react-i18next";
+import i18n from "@zenify-omni/chat-js/lib/i18n/index.js";
+function ContactAvatar({ name, className }) {
+  const initials = name ? name.trim().split(" ").map((w) => w[0]).slice(0, 2).join("").toUpperCase() : "";
+  return /* @__PURE__ */ jsx(Avatar, { className: cn("flex-shrink-0", className), children: /* @__PURE__ */ jsx(AvatarFallback, { className: "bg-muted text-muted-foreground", children: initials || /* @__PURE__ */ jsx(User, { className: "h-4 w-4" }) }) });
+}
+function CopyPhoneButton({ phone }) {
+  const [copied, setCopied] = useState(false);
+  const handleCopy = () => {
+    navigator.clipboard.writeText(phone).then(() => {
+      setCopied(true);
+      showSuccessToast(
+        i18n.t("common:toast.phoneNumberCopied", {
+          defaultValue: "\u0110\xE3 sao ch\xE9p s\u1ED1 \u0111i\u1EC7n tho\u1EA1i"
+        })
+      );
+      setTimeout(() => setCopied(false), 2e3);
+    }).catch(() => {
+    });
+  };
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      type: "button",
+      onClick: handleCopy,
+      className: "rounded-full p-1 text-muted-foreground hover:bg-muted hover:text-foreground",
+      title: "Copy phone number",
+      children: copied ? /* @__PURE__ */ jsx(Check, { className: "h-4 w-4 text-primary" }) : /* @__PURE__ */ jsx(Copy, { className: "h-4 w-4" })
+    }
+  );
+}
+function ContactsViewAllDialog({ open, onClose, contacts }) {
+  return /* @__PURE__ */ jsx(Dialog, { open, onOpenChange: onClose, children: /* @__PURE__ */ jsxs(DialogContent, { className: "max-h-[80vh] max-w-md overflow-hidden p-0", children: [
+    /* @__PURE__ */ jsx(DialogHeader, { className: "border-b px-4 py-3", children: /* @__PURE__ */ jsxs(DialogTitle, { className: "text-[17px] font-semibold", children: [
+      contacts.length,
+      " contacts"
+    ] }) }),
+    /* @__PURE__ */ jsx("div", { className: "overflow-y-auto", children: contacts.map((contact, i) => {
+      const displayName = contact.formatted_name || contact.first_name || contact.phone;
+      return /* @__PURE__ */ jsxs("div", { className: "border-b last:border-b-0", children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3 px-4 py-3", children: [
+          /* @__PURE__ */ jsx(ContactAvatar, { name: displayName, className: "h-10 w-10" }),
+          /* @__PURE__ */ jsx("span", { className: "flex-1 text-[15px] font-medium", children: displayName })
+        ] }),
+        contact.phone && /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between px-4 pb-3", children: [
+          /* @__PURE__ */ jsx("p", { className: "text-[15px]", children: contact.phone }),
+          /* @__PURE__ */ jsx(CopyPhoneButton, { phone: contact.phone })
+        ] })
+      ] }, i);
+    }) })
+  ] }) });
+}
+function WhatsAppContactCardPreview({
+  msg,
+  className,
+  timeText
+}) {
+  const { t } = useTranslation();
+  const [dialogOpen, setDialogOpen] = useState(false);
+  const contacts = msg?.content?.contacts || [];
+  if (!contacts.length) return null;
+  const first = contacts[0];
+  const firstDisplay = first.formatted_name || first.first_name || first.phone || "";
+  const extraCount = contacts.length - 1;
+  const isMultiple = contacts.length > 1;
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: cn(
+          "w-[280px] overflow-hidden rounded-xl border bg-card shadow-sm",
+          className
+        ),
+        children: [
+          /* @__PURE__ */ jsx("div", { className: "flex items-center gap-3 p-3", children: isMultiple ? /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx("div", { className: "relative h-10 w-10 flex-shrink-0", children: contacts.slice(0, 3).map((c, i) => {
+              const name = c.formatted_name || c.first_name || c.phone || "";
+              return /* @__PURE__ */ jsx(
+                "div",
+                {
+                  className: "absolute",
+                  style: { left: i * 6, top: i * 4, zIndex: 3 - i },
+                  children: /* @__PURE__ */ jsx(
+                    ContactAvatar,
+                    {
+                      name,
+                      className: "h-8 w-8 border-2 border-card"
+                    }
+                  )
+                },
+                i
+              );
+            }) }),
+            /* @__PURE__ */ jsx("p", { className: "flex-1 truncate text-base font-medium", children: `${firstDisplay} and ${extraCount} other contact${extraCount > 1 ? "s" : ""}` })
+          ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx(ContactAvatar, { name: firstDisplay, className: "h-10 w-10" }),
+            /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
+              /* @__PURE__ */ jsx("p", { className: "truncate text-base font-medium", children: firstDisplay }),
+              first.phone && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1", children: [
+                /* @__PURE__ */ jsx("p", { className: "truncate text-sm text-muted-foreground", children: first.phone }),
+                /* @__PURE__ */ jsx(CopyPhoneButton, { phone: first.phone })
+              ] })
+            ] })
+          ] }) }),
+          /* @__PURE__ */ jsx(
+            MessageTime,
+            {
+              timeText,
+              status: msg?.status,
+              className: "px-3"
+            }
+          ),
+          /* @__PURE__ */ jsx("div", { className: "border-t", children: isMultiple ? /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              onClick: () => setDialogOpen(true),
+              className: "w-full py-2 text-sm font-medium text-primary hover:bg-muted/50",
+              children: t("common:action.viewAll", { defaultValue: "Xem t\u1EA5t c\u1EA3" })
+            }
+          ) : /* @__PURE__ */ jsx("div", {}) })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      ContactsViewAllDialog,
+      {
+        open: dialogOpen,
+        onClose: () => setDialogOpen(false),
+        contacts
+      }
+    )
+  ] });
+}
+export {
+  WhatsAppContactCardPreview as default
+};

package/components/custom/previews/whatsapp/whatsapp-order-preview.js

@@ -0,0 +1,38 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { ShoppingBag } from "lucide-react";
+import { cn } from "../../../../lib/utils.js";
+import { MessageTime } from "../../../chat-route/chat-box/message-time.js";
+import { useTranslation } from "react-i18next";
+function WhatsAppOrderPreview({ msg, className, timeText }) {
+  const { t } = useTranslation();
+  const order = msg?.extra_data ?? msg?.content?.order;
+  if (!order) return null;
+  const itemCount = (order.items ?? order.product_items)?.length ?? 0;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "w-[240px] overflow-hidden rounded-xl border bg-card shadow-sm",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3 p-3", children: [
+          /* @__PURE__ */ jsx("div", { className: "flex h-10 w-10 flex-shrink-0 items-center justify-center rounded-full bg-muted", children: /* @__PURE__ */ jsx(ShoppingBag, { className: "h-5 w-5 text-muted-foreground" }) }),
+          /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
+            /* @__PURE__ */ jsx("p", { className: "text-[15px] font-medium leading-snug", children: t("common:message.orderSent", {
+              defaultValue: "\u0110\xE3 g\u1EEDi m\u1ED9t \u0111\u01A1n h\xE0ng"
+            }) }),
+            itemCount > 0 && /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: t("common:unit.items", {
+              itemCount,
+              defaultValue: "{itemCount} s\u1EA3n ph\u1EA9m"
+            }) })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsx(MessageTime, { timeText, status: msg?.status, className: "px-3" })
+      ]
+    }
+  );
+}
+export {
+  WhatsAppOrderPreview as default
+};