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

package/components/chat-route/chat-box/zalo-reminder/use-send-zalo-reminder.js

@@ -0,0 +1,98 @@
+import i18n from "@zenify-omni/chat-js/lib/i18n/index.js";
+import { useCallback } from "react";
+import { MessageType } from "@zenify-omni/chat-js/constants/chat-message.js";
+import { sendMessage } from "../../../../utils/chat_socket.js";
+import { useQuery } from "@tanstack/react-query";
+import QUERY_KEY from "@zenify-omni/chat-js/constants/use-query-key.js";
+import { checkAccessByPZaloConnection } from "@zenify-omni/chat-js/api/chat.js";
+const REMINDER_CONTENTS = {
+  [MessageType.CREATE_REMINDER]: "T\u1EA1o l\u1ECBch h\u1EB9n",
+  [MessageType.UPDATE_REMINDER]: "C\u1EADp nh\u1EADt l\u1ECBch h\u1EB9n",
+  [MessageType.DELETE_REMINDER]: "Xo\xE1 l\u1ECBch h\u1EB9n"
+};
+function useSendZaloReminder(chatItem) {
+  const handleSendReminderRequest = useCallback(
+    ({ data, type = MessageType.CREATE_REMINDER }) => {
+      if (!data) return;
+      const startTime = new Date(data.start_time).getTime() || Date.now();
+      sendMessage(
+        chatItem,
+        REMINDER_CONTENTS[type] || i18n.t("chat:action.createAppointment", {
+          defaultValue: "T\u1EA1o l\u1ECBch h\u1EB9n"
+        }),
+        type,
+        {
+          is_personal_zalo: chatItem?.is_personal_zalo,
+          content_obj: {
+            ...data,
+            id: String(data.id) || null,
+            title: data.title || "",
+            start_time: startTime,
+            repeat: Number(data.repeat) || 0
+          }
+        }
+      );
+    },
+    [chatItem]
+  );
+  const handleCreateReminder = useCallback(
+    (data) => {
+      handleSendReminderRequest({
+        data,
+        type: MessageType.CREATE_REMINDER
+      });
+    },
+    [handleSendReminderRequest]
+  );
+  const handleUpdateReminder = useCallback(
+    (data) => {
+      handleSendReminderRequest({
+        data,
+        type: MessageType.UPDATE_REMINDER
+      });
+    },
+    [handleSendReminderRequest]
+  );
+  const handleDeleteReminder = useCallback(
+    (data) => {
+      handleSendReminderRequest({
+        data,
+        type: MessageType.DELETE_REMINDER
+      });
+    },
+    [handleSendReminderRequest]
+  );
+  return {
+    handleSendReminderRequest,
+    handleCreateReminder,
+    handleUpdateReminder,
+    handleDeleteReminder
+  };
+}
+function useCheckAccessByPZaloConnection({ ticketId, userId }) {
+  const { data: queryData, refetch } = useQuery({
+    queryKey: [
+      QUERY_KEY.CHECK_CHAT_ACCESS_BY_PERSONAL_ZALO_CONNECTION,
+      { ticketId }
+    ],
+    queryFn: async () => {
+      try {
+        const { data } = await checkAccessByPZaloConnection({
+          ticketId,
+          userId
+        });
+        return data;
+      } catch {
+        return {};
+      }
+    },
+    enabled: !!ticketId && !!userId,
+    staleTime: 60 * 1e3 * 5
+    // 5 minutes
+  });
+  return { ...queryData || { success: false }, _refetch: refetch };
+}
+export {
+  useCheckAccessByPZaloConnection,
+  useSendZaloReminder
+};

package/components/chat-route/chat-box/zalo-reminder/zalo-reminder-content.js

@@ -0,0 +1,294 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import i18n from "@zenify-omni/chat-js/lib/i18n/index.js";
+import { useMemo, useState, useCallback, Fragment } from "react";
+import { cn } from "../../../../lib/utils.js";
+import { formatDayWithTime, generateReminderTimeText } from "@zenify-omni/chat-js/utils/date.js";
+import { AlarmClock, Clock } from "lucide-react";
+import { Button } from "../../../custom/button.js";
+import { MessageType } from "@zenify-omni/chat-js/constants/chat-message.js";
+import { hasNonEmpty } from "@zenify-omni/chat-js/utils/data.js";
+import { getUser } from "@zenify-omni/chat-js/utils/auth.js";
+import { useCheckAccessByPZaloConnection } from "./use-send-zalo-reminder.js";
+import { showErrorToast } from "../../../ui/sonner.js";
+import { getContentObj } from "../../util.js";
+import { useTranslation } from "react-i18next";
+const DESCRIPTION_MAX_LENGTH = 36;
+const REQUIRED_REMINDER_FIELDS = ["start_time", "subject", "title"];
+const PERMISSION_WARNING_MESSAGE = "B\u1EA1n ch\u01B0a li\xEAn k\u1EBFt Zalo c\xE1 nh\xE2n";
+const DAYS_OF_WEEK = [
+  "CH\u1EE6 NH\u1EACT",
+  "TH\u1EE8 HAI",
+  "TH\u1EE8 BA",
+  "TH\u1EE8 T\u01AF",
+  "TH\u1EE8 N\u0102M",
+  "TH\u1EE8 S\xC1U",
+  "TH\u1EE8 B\u1EA2Y"
+];
+const formatDateParts = (dateString) => {
+  if (!dateString) {
+    return { day: "", month: "", dayOfWeek: "" };
+  }
+  const date = new Date(dateString);
+  return {
+    day: date.getDate().toString().padStart(2, "0"),
+    month: `TH\xC1NG ${date.getMonth() + 1}`,
+    dayOfWeek: DAYS_OF_WEEK[date.getDay()]
+  };
+};
+const InvalidReminderMessage = ({ msg, className }) => /* @__PURE__ */ jsx(
+  "div",
+  {
+    className: cn(
+      "rounded-lg border border-border-subtle p-4 text-center text-sm shadow-md",
+      className
+    ),
+    children: msg?.content.text || i18n.t("chat:label.reminderMessageWithInvalidData", {
+      defaultValue: "Tin nh\u1EAFn nh\u1EAFc nh\u1EDF v\u1EDBi d\u1EEF li\u1EC7u kh\xF4ng h\u1EE3p l\u1EC7"
+    })
+  }
+);
+const DateDisplay = ({ startTime, styles }) => {
+  const { day, month, dayOfWeek } = useMemo(
+    () => formatDateParts(startTime),
+    [startTime]
+  );
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "flex w-20 flex-shrink-0 flex-col items-center justify-center rounded-lg bg-gradient-to-br shadow-sm sm:h-20 md:h-[90px]",
+        styles.gradient
+      ),
+      children: [
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: cn(
+              "mb-1 rounded px-3 py-1 text-xs font-semibold text-white",
+              styles.bg
+            ),
+            children: dayOfWeek
+          }
+        ),
+        /* @__PURE__ */ jsx("div", { className: "text-3xl font-bold leading-none text-foreground", children: day }),
+        /* @__PURE__ */ jsx("div", { className: "mt-1 text-xs font-medium text-muted-foreground", children: month })
+      ]
+    }
+  );
+};
+const ExpandableDescription = ({ description }) => {
+  const [isExpanded, setIsExpanded] = useState(false);
+  const needsTruncation = description.length > DESCRIPTION_MAX_LENGTH;
+  const displayDescription = isExpanded ? description : description.slice(0, DESCRIPTION_MAX_LENGTH);
+  const toggleExpand = useCallback(() => {
+    setIsExpanded((prev) => !prev);
+  }, []);
+  if (!description) return null;
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      "p",
+      {
+        className: cn(
+          "mb-2 whitespace-pre-wrap text-xs text-muted-foreground",
+          needsTruncation && "cursor-pointer"
+        ),
+        onClick: needsTruncation ? toggleExpand : void 0,
+        role: needsTruncation ? "button" : void 0,
+        tabIndex: needsTruncation ? 0 : void 0,
+        onKeyDown: needsTruncation ? (e) => {
+          if (e.key === "Enter" || e.key === " ") {
+            e.preventDefault();
+            toggleExpand();
+          }
+        } : void 0,
+        "aria-expanded": needsTruncation ? isExpanded : void 0,
+        children: displayDescription
+      }
+    ),
+    needsTruncation && !isExpanded && /* @__PURE__ */ jsxs(
+      "span",
+      {
+        className: "cursor-pointer text-muted-foreground hover:underline",
+        onClick: toggleExpand,
+        role: "button",
+        tabIndex: 0,
+        onKeyDown: (e) => {
+          if (e.key === "Enter" || e.key === " ") {
+            e.preventDefault();
+            toggleExpand();
+          }
+        },
+        children: [
+          " ",
+          "..."
+        ]
+      }
+    )
+  ] });
+};
+const ReminderTime = ({ startTime }) => /* @__PURE__ */ jsxs("div", { className: "mb-2 flex items-center gap-2", children: [
+  /* @__PURE__ */ jsx(Clock, { className: "h-4 w-4 text-muted-foreground" }),
+  /* @__PURE__ */ jsx("span", { className: "text-sm text-muted-foreground", children: generateReminderTimeText(startTime) })
+] });
+const ActionButton = ({ reminder, reminderAction, ticketId }) => {
+  const { t } = useTranslation();
+  const user = getUser();
+  const { success: isPersonalZaloConnection, _refetch } = useCheckAccessByPZaloConnection({ ticketId, userId: user?._id });
+  const handleUpdateClick = useCallback(() => {
+    _refetch().then(() => {
+      if (!isPersonalZaloConnection) {
+        showErrorToast(PERMISSION_WARNING_MESSAGE);
+      } else {
+        reminderAction?.({
+          data: reminder,
+          type: MessageType.UPDATE_REMINDER
+        });
+      }
+    }).catch(() => {
+      showErrorToast(PERMISSION_WARNING_MESSAGE);
+    });
+  }, [_refetch, isPersonalZaloConnection, reminder, reminderAction]);
+  return /* @__PURE__ */ jsx(
+    Button,
+    {
+      variant: "ghost",
+      size: "sm",
+      onClick: handleUpdateClick,
+      className: "mr-2 h-auto p-0 text-xs text-primary underline hover:bg-transparent hover:text-primary",
+      children: t("common:label.detail", { defaultValue: "Chi ti\u1EBFt" })
+    }
+  );
+};
+const ActionEditReminderContent = ({
+  message,
+  reminder,
+  ticketId,
+  reminderAction
+}) => {
+  const description = message?.content?.text;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: "my-4 text-center text-xs italic text-muted-foreground",
+      title: formatDayWithTime(message.content.time),
+      style: { whiteSpace: "pre-wrap" },
+      children: [
+        description,
+        " ",
+        message.content.type === MessageType.UPDATE_REMINDER && /* @__PURE__ */ jsx(
+          ActionButton,
+          {
+            ticketId,
+            reminder,
+            reminderAction
+          }
+        )
+      ]
+    }
+  );
+};
+const CreateReminderContent = ({ msg, reminder, reminderAction, ticketId }) => {
+  const { t } = useTranslation();
+  if (!hasNonEmpty(reminder, REQUIRED_REMINDER_FIELDS)) {
+    return /* @__PURE__ */ jsx(InvalidReminderMessage, { msg });
+  }
+  const { id: reminderId } = reminder || {};
+  const description = reminder?.title || "";
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn(
+        "relative mx-auto my-4 rounded-lg border border-border-subtle bg-card p-2 shadow-md sm:w-[300px] md:w-[360px] lg:w-[400px]"
+      ),
+      title: formatDayWithTime(msg.content.time),
+      children: /* @__PURE__ */ jsxs("div", { className: "flex gap-4", children: [
+        /* @__PURE__ */ jsx(
+          DateDisplay,
+          {
+            startTime: reminder?.start_time,
+            styles: {
+              gradient: "from-secondary to-secondary",
+              bg: "bg-primary/90"
+            }
+          }
+        ),
+        /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
+          /* @__PURE__ */ jsx("p", { className: "text-base font-semibold leading-relaxed", children: t("chat:action.createReminder", { defaultValue: "T\u1EA1o nh\u1EAFc h\u1EB9n" }) }),
+          /* @__PURE__ */ jsx(ExpandableDescription, { description }),
+          /* @__PURE__ */ jsx(ReminderTime, { startTime: reminder?.start_time }),
+          /* @__PURE__ */ jsx("div", { className: "flex items-center justify-end border-t border-border-subtle pt-3", children: !reminderId ? /* @__PURE__ */ jsx("span", { className: "mr-2 text-sm text-success", children: t("common:status.sent", { defaultValue: "\u0110\xE3 g\u1EEDi" }) }) : /* @__PURE__ */ jsx(
+            ActionButton,
+            {
+              ticketId,
+              reminder,
+              reminderAction
+            }
+          ) })
+        ] })
+      ] })
+    }
+  );
+};
+const ReminderNotifyContent = ({ msg, reminder }) => {
+  const { t } = useTranslation();
+  const { content, date } = msg;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "mx-auto my-3 flex w-fit max-w-[50%] flex-col items-center justify-center gap-1 rounded-lg border border-warning/40 bg-[--label-orange] p-2 px-6 text-center text-sm text-[--label-orange-foreground] shadow-lg"
+      ),
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-center gap-1", children: [
+          /* @__PURE__ */ jsx(AlarmClock, { className: "h-4 w-4 pb-0.5" }),
+          " ",
+          t("chat:label.reminderPrefix", { defaultValue: "Nh\u1EAFc h\u1EB9n:" }),
+          " "
+        ] }),
+        /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center", children: /* @__PURE__ */ jsx(ExpandableDescription, { description: content?.text }) }),
+        /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center text-xs", children: generateReminderTimeText(reminder?.start_time || date) || formatDayWithTime(date) })
+      ]
+    }
+  );
+};
+function ZaloReminderContent({ msg, reminderAction, ticket }) {
+  const { type = MessageType.CREATE_REMINDER } = msg.content;
+  const reminder = getContentObj(msg);
+  switch (type) {
+    case MessageType.CREATE_REMINDER:
+      return /* @__PURE__ */ jsx(
+        CreateReminderContent,
+        {
+          msg,
+          reminder,
+          ticketId: ticket?._id,
+          reminderAction
+        }
+      );
+    case MessageType.UPDATE_REMINDER:
+      return /* @__PURE__ */ jsx(
+        ActionEditReminderContent,
+        {
+          message: msg,
+          reminder,
+          ticketId: ticket?._id,
+          reminderAction
+        }
+      );
+    case MessageType.DELETE_REMINDER:
+      return /* @__PURE__ */ jsx(
+        ActionEditReminderContent,
+        {
+          message: msg,
+          reminder,
+          ticketId: ticket?._id,
+          reminderAction
+        }
+      );
+    case MessageType.REMINDER_RECEIVE:
+      return /* @__PURE__ */ jsx(ReminderNotifyContent, { msg, reminder });
+  }
+}
+export {
+  ZaloReminderContent
+};