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

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

@@ -0,0 +1,334 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+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 {
+  Carousel,
+  CarouselContent,
+  CarouselItem,
+  CarouselPrevious,
+  CarouselNext
+} from "../../ui/carousel.js";
+import { useTranslation } from "react-i18next";
+import i18n from "@zenify-omni/chat-js/lib/i18n/index.js";
+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;
+  if (sale_price && price) {
+    return /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-2 text-sm", children: [
+      /* @__PURE__ */ jsx("span", { className: "font-medium", children: formattedPrice(sale_price, currency) }),
+      /* @__PURE__ */ jsx("span", { className: "text-muted-foreground line-through", children: formattedPrice(price, currency) })
+    ] });
+  }
+  return /* @__PURE__ */ jsx("span", { className: "text-sm font-medium", children: formattedPrice(sale_price || price, currency) });
+};
+function ProductPreview({
+  msg,
+  className,
+  timeText,
+  hideActions = false,
+  fluid = false
+}) {
+  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,
+        hideActions,
+        fluid
+      }
+    );
+  }
+  const {
+    product_url,
+    product_title,
+    product_id,
+    product_code,
+    name,
+    price,
+    description,
+    availability,
+    image_url,
+    brand,
+    sale_price,
+    currency,
+    condition,
+    url
+  } = 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: url || product_url,
+      className,
+      date: msg?.date || msg?.created_at,
+      timeText,
+      msgStatus,
+      hideActions
+    }
+  );
+}
+function ProductSlider({
+  products,
+  className,
+  date,
+  timeText,
+  msgStatus,
+  hideActions = false,
+  fluid = false
+}) {
+  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,
+        className,
+        date,
+        timeText,
+        msgStatus,
+        hideActions
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        fluid ? "w-full rounded-xl px-6" : "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: cn(
+                    "pl-2",
+                    fluid ? "basis-1/2 md:basis-1/3 xl:basis-1/4" : "basis-[85%]"
+                  ),
+                  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,
+                      className: "w-full",
+                      hideActions
+                    }
+                  )
+                },
+                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,
+  productId,
+  productCode,
+  price,
+  salePrice,
+  currency,
+  url,
+  className,
+  date,
+  timeText,
+  msgStatus,
+  hideActions = false
+}) {
+  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/80 p-4",
+      onClick: () => 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-card p-2 text-foreground",
+            onClick: () => 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"
+              ] })
+            ]
+          }
+        )
+      ]
+    }
+  );
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "relative w-[280px] overflow-hidden rounded-xl bg-card",
+        className
+      ),
+      title: date ? formatDayWithTime(date) : "",
+      children: [
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: "relative aspect-square w-full cursor-pointer overflow-hidden",
+            onClick: () => setShowImageModal(true),
+            children: /* @__PURE__ */ jsx(
+              "img",
+              {
+                src: productImage,
+                alt: productName,
+                className: "h-full w-full object-cover transition-transform duration-300 hover:scale-105",
+                loading: "lazy"
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-0.5 px-3 py-2.5", children: [
+          (productCode || productId) && /* @__PURE__ */ jsxs("span", { className: "text-xs text-muted-foreground", children: [
+            t("common:label.productCodeColon", {
+              defaultValue: "M\xE3 s\u1EA3n ph\u1EA9m:"
+            }),
+            " ",
+            productCode || productId
+          ] }),
+          /* @__PURE__ */ jsx("h2", { className: "line-clamp-2 text-sm font-semibold", children: productName }),
+          /* @__PURE__ */ jsx(
+            PriceDisplay,
+            {
+              price: price?.toString(),
+              sale_price: salePrice?.toString(),
+              currency
+            }
+          )
+        ] }),
+        !hideActions && /* @__PURE__ */ jsx("div", { className: "flex items-center gap-2 border-t px-3 py-2", children: /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            className: "flex h-8 flex-1 items-center justify-center rounded-md border border-border bg-surface-subtle text-sm font-medium text-foreground hover:bg-muted",
+            onClick: (e) => {
+              e.stopPropagation();
+              if (url) window.open(url, "_blank");
+            },
+            children: t("common:action.viewDetail", { defaultValue: "Xem chi ti\u1EBFt" })
+          }
+        ) }),
+        showImageModal && createPortal(/* @__PURE__ */ jsx(ImageModal, {}), document.body),
+        /* @__PURE__ */ jsx(
+          MessageTime,
+          {
+            timeText,
+            status: msgStatus,
+            className: "mt-0 px-3 pb-2"
+          }
+        )
+      ]
+    }
+  );
+}
+export {
+  ProductPreview as default
+};

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

@@ -0,0 +1,278 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import i18n from "@zenify-omni/chat-js/lib/i18n/index.js";
+import { useState } from "react";
+import { createPortal } from "react-dom";
+import NOTFOUND__asset from "../../../assets/icons/not_found.png";
+import { formatDayWithTime } from "@zenify-omni/chat-js/utils/date.js";
+import { cn } from "../../../lib/utils.js";
+import { Copy, Check, X } from "lucide-react";
+import { MessageTime } from "../../chat-route/chat-box/message-time.js";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger
+} from "../../ui/tooltip.js";
+import { useTranslation } from "react-i18next";
+import { assetUrl } from "../../../assets/asset-url.js";
+const NOTFOUND = assetUrl(NOTFOUND__asset);
+const ORDER_STATUS_LABELS = {
+  UNPAID: {
+    get label() {
+      return i18n.t("chat:label.awaitingPayment", {
+        defaultValue: "Ch\u1EDD thanh to\xE1n"
+      });
+    },
+    color: "text-yellow-600"
+  },
+  ON_HOLD: {
+    get label() {
+      return i18n.t("common:status.pending", {
+        defaultValue: "Ch\u1EDD x\u1EED l\xFD"
+      });
+    },
+    color: "text-orange-500"
+  },
+  AWAITING_SHIPMENT: {
+    get label() {
+      return i18n.t("common:label.awaitingDelivery", {
+        defaultValue: "Ch\u1EDD giao h\xE0ng"
+      });
+    },
+    color: "text-blue-600"
+  },
+  PARTIALLY_SHIPPING: {
+    get label() {
+      return i18n.t("common:label.partialDelivery", {
+        defaultValue: "Giao m\u1ED9t ph\u1EA7n"
+      });
+    },
+    color: "text-blue-500"
+  },
+  AWAITING_COLLECTION: {
+    get label() {
+      return i18n.t("chat:label.awaitingPickup", {
+        defaultValue: "Ch\u1EDD l\u1EA5y h\xE0ng"
+      });
+    },
+    color: "text-indigo-500"
+  },
+  IN_TRANSIT: {
+    get label() {
+      return i18n.t("common:label.inTransit", {
+        defaultValue: "\u0110ang v\u1EADn chuy\u1EC3n"
+      });
+    },
+    color: "text-indigo-600"
+  },
+  DELIVERED: {
+    get label() {
+      return i18n.t("common:label.delivered", {
+        defaultValue: "\u0110\xE3 giao"
+      });
+    },
+    color: "text-teal-600"
+  },
+  COMPLETED: {
+    get label() {
+      return i18n.t("common:status.finished", {
+        defaultValue: "Ho\xE0n th\xE0nh"
+      });
+    },
+    color: "text-green-600"
+  },
+  CANCELLED: {
+    get label() {
+      return i18n.t("common:status.cancelled", {
+        defaultValue: "\u0110\xE3 h\u1EE7y"
+      });
+    },
+    color: "text-red-500"
+  }
+};
+const formatPrice = (amount) => Number(amount).toLocaleString("vi-VN") + "\u0111";
+function ImageModal({ imageUrl, altText, onClose }) {
+  const [scale, setScale] = useState(1);
+  return /* @__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();
+        onClose();
+      },
+      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();
+              onClose();
+            },
+            "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",
+                  onClick: (e) => {
+                    e.stopPropagation();
+                    setScale((s) => s === 1 ? 2 : s === 2 ? 3 : 1);
+                  },
+                  children: /* @__PURE__ */ jsx(
+                    "img",
+                    {
+                      src: imageUrl || NOTFOUND,
+                      alt: altText,
+                      className: "transition-transform duration-300 ease-in-out",
+                      style: { transform: `scale(${scale})` },
+                      loading: "eager",
+                      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}%`;
+                      }
+                    }
+                  )
+                }
+              ),
+              /* @__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"
+              ] })
+            ]
+          }
+        )
+      ]
+    }
+  );
+}
+function TiktokOrderPreview({ msg, className, timeText }) {
+  const { t } = useTranslation();
+  const order = msg?.extra_data?.order;
+  const [copied, setCopied] = useState(false);
+  const [showImageModal, setShowImageModal] = useState(false);
+  if (!order) return null;
+  const { order_sn, order_status, total_amount, items = [] } = order;
+  const statusInfo = ORDER_STATUS_LABELS[order_status] || {
+    label: order_status,
+    color: "text-gray-500"
+  };
+  const firstItem = items[0];
+  const handleCopy = () => {
+    navigator.clipboard.writeText(order_sn);
+    setCopied(true);
+    setTimeout(() => setCopied(false), 2e3);
+  };
+  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: t("common:label.order", { defaultValue: "\u0110\u01A1n h\xE0ng" }) }) }),
+        firstItem && /* @__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: firstItem.image_url || NOTFOUND,
+                  alt: firstItem.item_name,
+                  className: "h-full w-full object-cover transition-transform duration-200 hover:scale-105",
+                  referrerPolicy: "no-referrer",
+                  onError: (e) => {
+                    e.currentTarget.onerror = null;
+                    e.currentTarget.src = NOTFOUND;
+                  }
+                }
+              )
+            }
+          ),
+          /* @__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: firstItem.item_name }) }),
+              /* @__PURE__ */ jsx(TooltipContent, { variant: "dark", className: "text-sm", children: firstItem.item_name })
+            ] }) }),
+            /* @__PURE__ */ jsxs("p", { className: "mt-1 text-sm text-muted-foreground", children: [
+              items.length,
+              " ",
+              t("common:label.items", { defaultValue: "m\u1EB7t h\xE0ng \xB7" }),
+              " ",
+              formatPrice(total_amount)
+            ] })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "divide-y divide-gray-100 border-t border-gray-100", children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between px-3 py-2", children: [
+            /* @__PURE__ */ jsx("span", { className: "shrink-0 text-sm text-muted-foreground", children: t("common:label.orderId", { defaultValue: "ID \u0111\u01A1n h\xE0ng" }) }),
+            /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5", children: [
+              /* @__PURE__ */ jsx("span", { className: "text-sm font-medium text-[#1a1a1a]", children: order_sn }),
+              /* @__PURE__ */ jsx(
+                "button",
+                {
+                  onClick: handleCopy,
+                  className: "flex-shrink-0 text-muted-foreground hover:text-primary",
+                  children: copied ? /* @__PURE__ */ jsx(Check, { size: 13 }) : /* @__PURE__ */ jsx(Copy, { size: 13 })
+                }
+              )
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between px-3 py-2", children: [
+            /* @__PURE__ */ jsx("span", { className: "shrink-0 text-sm text-muted-foreground", children: t("common:label.status", { defaultValue: "Tr\u1EA1ng th\xE1i" }) }),
+            /* @__PURE__ */ jsx("span", { className: cn("text-sm font-medium", statusInfo.color), children: statusInfo.label })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsx("div", { className: "flex justify-end border-t border-gray-100 px-3 py-2", children: /* @__PURE__ */ jsx(
+          "button",
+          {
+            className: "rounded bg-gray-100 px-3 py-1 text-sm font-medium text-gray-600 hover:bg-gray-200",
+            onClick: () => window.open(
+              `https://seller-vn.tiktok.com/order/detail?order_no=${order_sn}`,
+              "_blank"
+            ),
+            children: t("common:action.viewDetail", { defaultValue: "Xem chi ti\u1EBFt" })
+          }
+        ) }),
+        /* @__PURE__ */ jsx(MessageTime, { timeText, status: msg?.status, className: "pr-2" }),
+        showImageModal && createPortal(
+          /* @__PURE__ */ jsx(
+            ImageModal,
+            {
+              imageUrl: firstItem?.image_url,
+              altText: firstItem?.item_name,
+              onClose: () => setShowImageModal(false)
+            }
+          ),
+          document.body
+        )
+      ]
+    }
+  );
+}
+export {
+  TiktokOrderPreview as default
+};