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

package/components/chat-route/hooks/use-reassign.js

@@ -0,0 +1,111 @@
+import { useState } from "react";
+import { useMutation, useQueryClient } from "@tanstack/react-query";
+import { reassign } from "@zenify-omni/chat-js/api/chatroom.js";
+import { throwException } from "../../../exceptions/throw-exception.js";
+import QUERY_KEY from "@zenify-omni/chat-js/constants/use-query-key.js";
+import { getUser } from "@zenify-omni/chat-js/utils/auth.js";
+import { UserRole } from "@zenify-omni/chat-js/constants/user.js";
+import useChatStore from "../../../store/chat-store.js";
+import { isZaloGeneralChannel, isZaloPersonal, TransferOption } from "../util.js";
+function useReassign({
+  chatRoom,
+  targetAssignedId,
+  targetAssignedName,
+  onError,
+  onClose
+}) {
+  const user = getUser();
+  const queryClient = useQueryClient();
+  const updateChatDetail = useChatStore((s) => s.updateChatDetail);
+  const [showForceDialog, setShowForceDialog] = useState(false);
+  const [transferOption, setTransferOption] = useState(
+    TransferOption.ConversationOnly
+  );
+  const sessionId = chatRoom?.session?._id;
+  const onReassignSuccess = () => {
+    queryClient.invalidateQueries({
+      queryKey: [QUERY_KEY.GET_CHAT_ROOM_DETAIL, { chatRoomId: chatRoom?._id }]
+    });
+    if (transferOption === TransferOption.WithTicket) {
+      queryClient.invalidateQueries({
+        queryKey: [
+          QUERY_KEY.GET_LIST_USER_TICKETS_PREVIEW,
+          chatRoom?.session?._id
+        ]
+      });
+    }
+    if (chatRoom?._id && targetAssignedId) {
+      const currentChat = useChatStore.getState().chatList.find((c) => c._id === chatRoom._id);
+      updateChatDetail(chatRoom._id, {
+        session: {
+          ...currentChat?.session || chatRoom.session || {},
+          assigned_id: targetAssignedId
+        },
+        assigned: { _id: targetAssignedId, name: targetAssignedName }
+      });
+    }
+    onClose?.();
+  };
+  const reassignMutation = useMutation({
+    mutationFn: (assignedId2) => {
+      return reassign({
+        sessionId,
+        payload: {
+          assigned_id: assignedId2,
+          force: false
+        }
+      });
+    },
+    onSuccess: onReassignSuccess,
+    onError: (error) => {
+      if (error?.data?.error_code === "SESSION_HAS_OPEN_TICKET") {
+        setShowForceDialog(true);
+        setTransferOption(TransferOption.ConversationOnly);
+      } else {
+        onError?.(error);
+        onClose?.();
+        throwException(error);
+      }
+    }
+  });
+  const forceAssignMutation = useMutation({
+    mutationFn: () => {
+      return reassign({
+        sessionId,
+        payload: {
+          assigned_id: targetAssignedId,
+          force: true,
+          reassign_tickets: transferOption === TransferOption.WithTicket
+        }
+      });
+    },
+    onSuccess: () => {
+      setShowForceDialog(false);
+      onReassignSuccess();
+      onClose?.();
+    },
+    onError: throwException
+  });
+  const closeForceDialog = () => {
+    setShowForceDialog(false);
+  };
+  const assignedId = chatRoom?.session?.assigned_id;
+  const disabledReAssign = (() => {
+    if (!isZaloPersonal(chatRoom) || isZaloGeneralChannel(chatRoom)) {
+      return ![UserRole.ADMINISTRATOR, UserRole.SUPERVISOR].includes(user?.role) && user?._id !== assignedId;
+    }
+    return true;
+  })();
+  return {
+    reassignMutation,
+    forceAssignMutation,
+    showForceDialog,
+    closeForceDialog,
+    transferOption,
+    setTransferOption,
+    disabledReAssign
+  };
+}
+export {
+  useReassign as default
+};

package/components/chat-route/shared/close-conversation-dialog.js

@@ -0,0 +1,111 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useState } from "react";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle
+} from "../../ui/dialog.js";
+import { RadioGroup, RadioGroupItem } from "../../ui/radio-group.js";
+import { Button } from "../../custom/button.js";
+import { cn } from "../../../lib/utils.js";
+import { useTranslation } from "react-i18next";
+const CloseOption = {
+  ConversationOnly: "conversation_only",
+  WithTicket: "with_ticket"
+};
+function CloseConversationDialog({
+  open,
+  onOpenChange,
+  isSubmitting = false,
+  onConfirm
+}) {
+  const { t } = useTranslation();
+  const [closeOption, setCloseOption] = useState(CloseOption.ConversationOnly);
+  useEffect(() => {
+    if (open) setCloseOption(CloseOption.ConversationOnly);
+  }, [open]);
+  const options = [
+    {
+      value: CloseOption.ConversationOnly,
+      title: t("chat:action.closeConversationOnly", {
+        defaultValue: "Ch\u1EC9 \u0111\xF3ng h\u1ED9i tho\u1EA1i"
+      }),
+      description: t("chat:message.endConversationKeepTicketStatus", {
+        defaultValue: "K\u1EBFt th\xFAc cu\u1ED9c h\u1ED9i tho\u1EA1i, ticket v\u1EABn gi\u1EEF nguy\xEAn tr\u1EA1ng th\xE1i"
+      })
+    },
+    {
+      value: CloseOption.WithTicket,
+      title: t("chat:action.closeConversationWithTicket", {
+        defaultValue: "\u0110\xF3ng h\u1ED9i tho\u1EA1i k\xE8m ticket"
+      }),
+      description: t("chat:action.closeConversationAndAllTickets", {
+        defaultValue: "\u0110\xF3ng h\u1ED9i tho\u1EA1i v\xE0 \u0111\xF3ng t\u1EA5t c\u1EA3 ticket \u0111ang x\u1EED l\xFD"
+      })
+    }
+  ];
+  return /* @__PURE__ */ jsx(Dialog, { open, onOpenChange, children: /* @__PURE__ */ jsxs(DialogContent, { className: "sm:max-w-[420px]", children: [
+    /* @__PURE__ */ jsxs(DialogHeader, { children: [
+      /* @__PURE__ */ jsx(DialogTitle, { children: t("chat:action.closeConversation", {
+        defaultValue: "\u0110\xF3ng h\u1ED9i tho\u1EA1i"
+      }) }),
+      /* @__PURE__ */ jsx(DialogDescription, { children: t("chat:dialog.confirmCloseWithTicket", {
+        defaultValue: "B\u1EA1n c\xF3 mu\u1ED1n \u0111\xF3ng k\xE8m ticket \u0111ang x\u1EED l\xFD kh\xF4ng?"
+      }) })
+    ] }),
+    /* @__PURE__ */ jsx(
+      RadioGroup,
+      {
+        value: closeOption,
+        onValueChange: setCloseOption,
+        className: "mt-3 space-y-3",
+        children: options.map((option) => /* @__PURE__ */ jsxs(
+          "label",
+          {
+            className: cn(
+              "flex cursor-pointer items-start gap-3 rounded-lg border p-3",
+              closeOption === option.value ? "border-primary bg-primary/5" : "border-border-subtle"
+            ),
+            onClick: () => setCloseOption(option.value),
+            children: [
+              /* @__PURE__ */ jsx(RadioGroupItem, { value: option.value, className: "mt-0.5" }),
+              /* @__PURE__ */ jsxs("div", { children: [
+                /* @__PURE__ */ jsx("p", { className: "text-sm font-medium", children: option.title }),
+                /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: option.description })
+              ] })
+            ]
+          },
+          option.value
+        ))
+      }
+    ),
+    /* @__PURE__ */ jsxs(DialogFooter, { children: [
+      /* @__PURE__ */ jsx(
+        Button,
+        {
+          size: "sm",
+          variant: "outline",
+          onClick: () => onOpenChange?.(false),
+          children: t("common:action.close", { defaultValue: "\u0110\xF3ng" })
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        Button,
+        {
+          size: "sm",
+          loading: isSubmitting,
+          onClick: () => onConfirm?.(closeOption === CloseOption.WithTicket),
+          children: t("chat:action.closeConversation", {
+            defaultValue: "\u0110\xF3ng h\u1ED9i tho\u1EA1i"
+          })
+        }
+      )
+    ] })
+  ] }) });
+}
+export {
+  CloseConversationDialog as default
+};

package/components/chat-route/shared/force-transfer-dialog.js

@@ -0,0 +1,109 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Button } from "../../custom/button.js";
+import {
+  Dialog,
+  DialogContent,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogDescription
+} from "../../ui/dialog.js";
+import { RadioGroup, RadioGroupItem } from "../../ui/radio-group.js";
+import { TransferOption } from "../util.js";
+import { useTranslation } from "react-i18next";
+function ForceTransferDialog({
+  open,
+  onClose,
+  transferOption,
+  setTransferOption,
+  forceAssignMutation,
+  isSubmitting,
+  onConfirm
+}) {
+  const { t } = useTranslation();
+  const submitting = isSubmitting ?? forceAssignMutation?.isPending ?? false;
+  const handleConfirm = () => {
+    if (onConfirm) {
+      onConfirm(transferOption);
+      return;
+    }
+    forceAssignMutation?.mutate();
+  };
+  return /* @__PURE__ */ jsx(Dialog, { open, onOpenChange: onClose, children: /* @__PURE__ */ jsxs(DialogContent, { className: "sm:max-w-[420px]", children: [
+    /* @__PURE__ */ jsxs(DialogHeader, { children: [
+      /* @__PURE__ */ jsx(DialogTitle, { children: t("chat:action.transferConversation", {
+        defaultValue: "Chuy\u1EC3n h\u1ED9i tho\u1EA1i"
+      }) }),
+      /* @__PURE__ */ jsx(DialogDescription, { children: t("chat:dialog.confirmTransferWithTicket", {
+        defaultValue: "B\u1EA1n c\xF3 mu\u1ED1n chuy\u1EC3n k\xE8m ticket \u0111ang ph\u1EE5 tr\xE1ch kh\xF4ng?"
+      }) })
+    ] }),
+    /* @__PURE__ */ jsxs(
+      RadioGroup,
+      {
+        value: transferOption,
+        onValueChange: setTransferOption,
+        className: "mt-3 space-y-3",
+        children: [
+          /* @__PURE__ */ jsxs(
+            "label",
+            {
+              className: `flex cursor-pointer items-start gap-3 rounded-lg border p-3 ${transferOption === TransferOption.ConversationOnly ? "border-primary bg-primary/5" : "border-border-subtle"}`,
+              onClick: () => setTransferOption(TransferOption.ConversationOnly),
+              children: [
+                /* @__PURE__ */ jsx(
+                  RadioGroupItem,
+                  {
+                    value: TransferOption.ConversationOnly,
+                    className: "mt-0.5"
+                  }
+                ),
+                /* @__PURE__ */ jsxs("div", { children: [
+                  /* @__PURE__ */ jsx("p", { className: "text-sm font-medium", children: t("chat:action.transferConversationOnly", {
+                    defaultValue: "Ch\u1EC9 chuy\u1EC3n h\u1ED9i tho\u1EA1i"
+                  }) }),
+                  /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: t("chat:message.recipientOnlyReceives", {
+                    defaultValue: "Ng\u01B0\u1EDDi nh\u1EADn s\u1EBD ch\u1EC9 ti\u1EBFp nh\u1EADn h\u1ED9i tho\u1EA1i"
+                  }) })
+                ] })
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsxs(
+            "label",
+            {
+              className: `flex cursor-pointer items-start gap-3 rounded-lg border p-3 ${transferOption === TransferOption.WithTicket ? "border-primary bg-primary/5" : "border-border-subtle"}`,
+              onClick: () => setTransferOption(TransferOption.WithTicket),
+              children: [
+                /* @__PURE__ */ jsx(
+                  RadioGroupItem,
+                  {
+                    value: TransferOption.WithTicket,
+                    className: "mt-0.5"
+                  }
+                ),
+                /* @__PURE__ */ jsxs("div", { children: [
+                  /* @__PURE__ */ jsx("p", { className: "text-sm font-medium", children: t("chat:action.transferConversationWithTicket", {
+                    defaultValue: "Chuy\u1EC3n h\u1ED9i tho\u1EA1i k\xE8m ticket"
+                  }) }),
+                  /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: t("chat:label.transferAllSupportData", {
+                    defaultValue: "Chuy\u1EC3n to\xE0n b\u1ED9 d\u1EEF li\u1EC7u h\u1ED7 tr\u1EE3 li\xEAn quan"
+                  }) })
+                ] })
+              ]
+            }
+          )
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsxs(DialogFooter, { children: [
+      /* @__PURE__ */ jsx(Button, { size: "sm", variant: "outline", onClick: onClose, children: t("common:action.close", { defaultValue: "\u0110\xF3ng" }) }),
+      /* @__PURE__ */ jsx(Button, { size: "sm", loading: submitting, onClick: handleConfirm, children: t("chat:action.transferConversation", {
+        defaultValue: "Chuy\u1EC3n h\u1ED9i tho\u1EA1i"
+      }) })
+    ] })
+  ] }) });
+}
+export {
+  ForceTransferDialog as default
+};

package/components/chat-route/shared/in-queue-confirm-dialog.js

@@ -0,0 +1,40 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogFooter,
+  DialogDescription,
+  DialogTitle
+} from "../../ui/dialog.js";
+import { Button } from "../../ui/button.js";
+import { useTranslation } from "react-i18next";
+function InQueueConfirmDialog({
+  open,
+  onOpenChange,
+  onConfirm,
+  onCancel
+}) {
+  const { t } = useTranslation();
+  const handleCancel = () => {
+    onCancel?.();
+    onOpenChange(false);
+  };
+  return /* @__PURE__ */ jsx(Dialog, { open, onOpenChange, children: /* @__PURE__ */ jsxs(DialogContent, { className: "sm:max-w-[420px]", children: [
+    /* @__PURE__ */ jsxs(DialogHeader, { children: [
+      /* @__PURE__ */ jsx(DialogTitle, { children: t("chat:action.joinConversation", {
+        defaultValue: "Tham gia h\u1ED9i tho\u1EA1i"
+      }) }),
+      /* @__PURE__ */ jsx(DialogDescription, { children: t("chat:dialog.confirmJoinOccupiedConversationAlt", {
+        defaultValue: "\u0110ang c\xF3 chuy\xEAn vi\xEAn ph\u1EE5 tr\xE1ch h\u1ED9i tho\u1EA1i v\u1EDBi kh\xE1ch h\xE0ng n\xE0y. B\u1EA1n ch\u1EAFc\n            ch\u1EAFn mu\u1ED1n tham gia?"
+      }) })
+    ] }),
+    /* @__PURE__ */ jsxs(DialogFooter, { children: [
+      /* @__PURE__ */ jsx(Button, { type: "button", variant: "outline", onClick: handleCancel, children: t("common:action.cancel", { defaultValue: "H\u1EE7y" }) }),
+      /* @__PURE__ */ jsx(Button, { onClick: onConfirm, children: t("common:action.continue", { defaultValue: "Ti\u1EBFp t\u1EE5c" }) })
+    ] })
+  ] }) });
+}
+export {
+  InQueueConfirmDialog as default
+};

package/components/chat-route/util.js

@@ -0,0 +1,146 @@
+import { SourceDetailTicket } from "@zenify-omni/chat-js/constants/chat-source.js";
+import { maskData } from "@zenify-omni/chat-js/utils/data.js";
+import { CHATTER_TYPES } from "./chat-box/constants.js";
+import { getUser } from "@zenify-omni/chat-js/utils/auth.js";
+import { env } from "../../config/env.js";
+const TransferOption = {
+  ConversationOnly: "conversation_only",
+  WithTicket: "with_ticket"
+};
+function isZaloGroup(item) {
+  return item?.source === "pzalo" && item?.extra_data?.is_group;
+}
+function isZaloPersonal(item) {
+  return item?.source === "pzalo";
+}
+function isZaloPersonChannel(item) {
+  return isZaloPersonal(item);
+}
+const getContentObj = (msg) => {
+  if (!msg?.content?.meta?.content_obj) return null;
+  return msg.content.meta.content_obj;
+};
+function isZaloGeneralChannel(item) {
+  return isZaloPersonal(item) && item?.extra_data?.pzalo_type === "general";
+}
+function isAgentStyle({ msg, ticket, user }) {
+  if (msg?.source_id && ticket?.source_id && msg.source_id === ticket.source_id) {
+    return true;
+  }
+  return msg?.chatter_type === CHATTER_TYPES.AGENT && (!isZaloGroup(ticket) || isZaloGeneralChannel(ticket)) || isZaloPersonChannel(ticket) && user?._id === msg?.chatter_id;
+}
+function isFacebook(item) {
+  return item?.source === SourceDetailTicket.FACEBOOK;
+}
+function isZalo(item) {
+  return item?.source === SourceDetailTicket.ZALO;
+}
+function isTiktok(item) {
+  return item?.source === SourceDetailTicket.TIKTOK || item?.source === SourceDetailTicket.TIKTOK_SHOP;
+}
+function isInstagram(item) {
+  return item?.source === SourceDetailTicket.INSTAGRAM;
+}
+function resolveAlias(source, sourceId, fallback, aliasMap) {
+  if (!aliasMap || !source || !sourceId) return fallback;
+  return aliasMap[`${source}:${sourceId}`] ?? fallback;
+}
+function getChatPageName(item, aliasMap) {
+  if (!item) return "";
+  return resolveAlias(item.source, item.source_id, item.source_name, aliasMap);
+}
+function getChatAvatarSrc(item) {
+  if (!item) return "";
+  if (isZaloGroup(item)) {
+    return item.avatar;
+  }
+  return item?.avatar;
+}
+function getChatAvatarAlt(item) {
+  if (!item) return "";
+  if (isZaloGroup(item)) {
+    return maskData(item?.name);
+  }
+  return maskData(item?.name);
+}
+function getChatDisplayName(item) {
+  if (!item) return "";
+  if (isZaloPersonal(item) || isZalo(item)) {
+    return maskData(item.name);
+  }
+  return maskData(item.title || item.name);
+}
+function getPageDisplayName(item, aliasMap) {
+  if (!item) return "";
+  if (item.source === "chat") return "LiveChat";
+  return maskData(
+    resolveAlias(item.source, item.source_id, item.source_name, aliasMap)
+  );
+}
+const getSpecialTenantId = () => env.SPECIAL_TENANT_ID;
+const getSortFieldKey = () => env.SORT_FIELD_KEY;
+function calcSortIndex(ticket, sortOptions) {
+  const value = ticket?.[getSortFieldKey()];
+  if (!value) return 9999;
+  const index = sortOptions.indexOf(value);
+  return index === -1 ? 9999 : index;
+}
+function pickTopTicket(tickets, sortOptions) {
+  let enriched = tickets.map((ticket) => ({
+    ...ticket,
+    sort_index: calcSortIndex(ticket, sortOptions)
+  }));
+  enriched.sort((a, b) => {
+    if (a.sort_index !== b.sort_index) return a.sort_index - b.sort_index;
+    return new Date(b.created_at) - new Date(a.created_at);
+  });
+  return enriched[0];
+}
+function checkIsSpecialTenant() {
+  const user = getUser();
+  return getSpecialTenantId() === user?.tenant_id;
+}
+function getTopPriorityTicket({ ticketList, ticketFields }) {
+  if (!checkIsSpecialTenant() || !ticketList?.length) return void 0;
+  const sortOptions = (ticketFields || []).find((f) => f.key === getSortFieldKey())?.data || [];
+  return pickTopTicket(ticketList, sortOptions);
+}
+function checkCanChatSpecialTenant({ ticketFields, ticketList }) {
+  const user = getUser();
+  if (!ticketList?.length) return false;
+  const sortOptions = (ticketFields || []).find((f) => f.key === getSortFieldKey())?.data || [];
+  const topTicket = pickTopTicket(ticketList, sortOptions);
+  if (!topTicket) return false;
+  const inRoom = [
+    topTicket.assign_agent_id,
+    ...topTicket.cc_users || [],
+    ...topTicket.in_room || []
+  ];
+  return inRoom.some((userId) => userId === user?._id);
+}
+export {
+  TransferOption,
+  calcSortIndex,
+  checkCanChatSpecialTenant,
+  checkIsSpecialTenant,
+  getChatAvatarAlt,
+  getChatAvatarSrc,
+  getChatDisplayName,
+  getChatPageName,
+  getContentObj,
+  getPageDisplayName,
+  getSortFieldKey,
+  getSpecialTenantId,
+  getTopPriorityTicket,
+  isAgentStyle,
+  isFacebook,
+  isInstagram,
+  isTiktok,
+  isZalo,
+  isZaloGeneralChannel,
+  isZaloGroup,
+  isZaloPersonChannel,
+  isZaloPersonal,
+  pickTopTicket,
+  resolveAlias
+};

package/components/chat-route/zalo/modal-action-zalo.js

@@ -0,0 +1,76 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import {
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle
+} from "../../ui/dialog.js";
+import { Button } from "../../custom/button.js";
+import { Separator } from "../../ui/separator.js";
+import { Textarea } from "../../ui/textarea.js";
+import { useMemo } from "react";
+import { useTranslation } from "react-i18next";
+const ModalAddZalo = ({
+  isLoading,
+  zaloPop,
+  setZaloPop,
+  getTitle,
+  textareaRef,
+  getTitleButon,
+  handleSubmit,
+  zaloInfo,
+  hideOverLay = false
+}) => {
+  const { t } = useTranslation();
+  const zaloInfoData = useMemo(
+    () => typeof zaloPop === "object" ? zaloPop : zaloInfo || {},
+    [zaloInfo, zaloPop]
+  );
+  return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx(Dialog, { open: zaloPop, onOpenChange: setZaloPop, children: /* @__PURE__ */ jsxs(DialogContent, { className: "max-w-[400px]", hideOverLay, children: [
+    /* @__PURE__ */ jsxs(DialogHeader, { children: [
+      /* @__PURE__ */ jsx(DialogTitle, { children: getTitle(zaloInfoData?.modal_type) }),
+      /* @__PURE__ */ jsx(
+        DialogDescription,
+        {
+          className: "hidden",
+          "aria-describedby": "zalo-login-dialog"
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "", children: [
+      /* @__PURE__ */ jsx("div", { className: "flex flex-col items-center", children: zaloInfoData?.zalo_data?.avatar ? /* @__PURE__ */ jsx("div", { className: "h-[200px] w-[200px]", children: /* @__PURE__ */ jsx(
+        "img",
+        {
+          className: "h-full w-full object-cover",
+          src: zaloInfoData?.zalo_data?.avatar
+        }
+      ) }) : /* @__PURE__ */ jsx("div", { className: "flex h-[200px] w-[200px] items-center justify-center rounded-full bg-muted", children: /* @__PURE__ */ jsx("span", { className: "text-6xl font-semibold text-muted-foreground", children: (zaloInfoData?.zalo_data?.alias || zaloInfoData?.zalo_data?.name || zaloInfoData?.zalo_data?.displayName || "?").charAt(0).toUpperCase() }) }) }),
+      /* @__PURE__ */ jsxs("div", { className: "flex flex-1 flex-col gap-4", children: [
+        /* @__PURE__ */ jsx("h1", { className: "mt-2 text-center text-lg font-medium", children: zaloInfoData?.zalo_data?.alias || zaloInfoData?.zalo_data?.display_name || zaloInfoData?.zalo_data?.name || zaloInfoData?.zalo_data?.displayName }),
+        /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-1.5", children: zaloInfoData?.modal_type !== 3 && /* @__PURE__ */ jsx(
+          Textarea,
+          {
+            maxLength: zaloInfoData?.modal_type === 1 ? 150 : 3e3,
+            ref: textareaRef,
+            placeholder: t("customer:placeholder.greetingMessage", {
+              defaultValue: "Nh\u1EADp l\u1EDDi ch\xE0o / tin nh\u1EAFn \u0111\u1EA7u..."
+            }),
+            defaultValue: zaloInfoData?.defaultMessage
+          }
+        ) })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx(Separator, {}),
+    /* @__PURE__ */ jsxs(DialogFooter, { children: [
+      /* @__PURE__ */ jsx(DialogClose, { asChild: true, children: /* @__PURE__ */ jsx(Button, { variant: "outline", children: t("common:action.close", { defaultValue: "\u0110\xF3ng" }) }) }),
+      zaloInfoData?.modal_type !== 3 && /* @__PURE__ */ jsx(Button, { loading: isLoading, onClick: handleSubmit, children: getTitleButon(zaloInfoData?.modal_type) })
+    ] })
+  ] }) }) });
+};
+var modal_action_zalo_default = ModalAddZalo;
+export {
+  modal_action_zalo_default as default
+};