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

package/components/settings-route/routing/settings-dialog.js

@@ -0,0 +1,561 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useState, useEffect } from "react";
+import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle
+} from "../../ui/dialog.js";
+import { Checkbox } from "../../ui/checkbox.js";
+import { RadioGroup, RadioGroupItem } from "../../ui/radio-group.js";
+import { Switch } from "../../ui/switch.js";
+import { Button } from "../../custom/button.js";
+import TimePicker from "../../custom/time-picker/index.js";
+import ChannelMultiSelect, {
+  ALL_CHANNELS_VALUE
+} from "../chat-timeout/channel-multi-select.js";
+import { Plus, Trash2, X } from "lucide-react";
+import { parse, format, addMinutes, isSameDay } from "date-fns";
+import { toast } from "sonner";
+import { throwException } from "../../../exceptions/throw-exception.js";
+import { getTenantConfigs, updateTenantConfig } from "@zenify-omni/chat-js/api/settings/routing.js";
+import QUERY_KEY from "@zenify-omni/chat-js/constants/use-query-key.js";
+import useTenantConfigStore from "../../../store/tenant-config-store.js";
+import { useTranslation } from "react-i18next";
+import i18n from "@zenify-omni/chat-js/lib/i18n/index.js";
+const ChatReadRule = Object.freeze({
+  USER_VIEW: "user_view",
+  ASSIGNEE_VIEW: "assignee_view",
+  ANY_MEMBER_VIEW: "any_member_view"
+});
+const RedistributionChatStatus = Object.freeze({
+  OPEN: "open",
+  MISSED: "missed"
+});
+const DEFAULT_REDISTRIBUTION_INTERVAL = "00:30:00";
+const createDefaultRedistributionRule = () => ({
+  chat_statuses: [RedistributionChatStatus.OPEN],
+  source: [],
+  intervals: [DEFAULT_REDISTRIBUTION_INTERVAL]
+});
+const toIntervalDate = (value) => {
+  const date = parse(
+    value || DEFAULT_REDISTRIBUTION_INTERVAL,
+    "HH:mm:ss",
+    /* @__PURE__ */ new Date()
+  );
+  date.setMilliseconds(0);
+  return date;
+};
+const formatInterval = (date) => format(date, "HH:mm:ss");
+const sortUniqueIntervals = (list) => {
+  const seen = /* @__PURE__ */ new Set();
+  return [...list].sort((a, b) => toIntervalDate(a).getTime() - toIntervalDate(b).getTime()).filter((value) => {
+    const key = toIntervalDate(value).getTime();
+    if (seen.has(key)) return false;
+    seen.add(key);
+    return true;
+  });
+};
+function RoutingSettingsDialog({ open, onClose }) {
+  const { t } = useTranslation();
+  const queryClient = useQueryClient();
+  const setChatConfig = useTenantConfigStore((s) => s.setChatConfig);
+  const { data: configsData, isLoading } = useQuery({
+    queryKey: [QUERY_KEY.GET_TENANT_CONFIGS, "config.routing_rule,config.chat"],
+    queryFn: () => getTenantConfigs({ keys: "config.routing_rule,config.chat" }),
+    enabled: open
+  });
+  const [applyForOutgoingChat, setApplyForOutgoingChat] = useState(false);
+  const [applyForManualDistribution, setApplyForManualDistribution] = useState(false);
+  const [allowOfflineAgents, setAllowOfflineAgents] = useState(false);
+  const [readRule, setReadRule] = useState("");
+  const [savePhone, setSavePhone] = useState(false);
+  const [autoRedistribution, setAutoRedistribution] = useState(false);
+  const [redistributionRules, setRedistributionRules] = useState([]);
+  useEffect(() => {
+    if (!configsData) return;
+    const routingCfg = configsData.find((c) => c.key === "config.routing_rule");
+    const chatCfg = configsData.find((c) => c.key === "config.chat");
+    setApplyForOutgoingChat(routingCfg?.rules?.apply_for_outgoing_chat ?? false);
+    setApplyForManualDistribution(
+      routingCfg?.rules?.apply_for_manual_distribution ?? false
+    );
+    setAllowOfflineAgents(routingCfg?.rules?.allow_offline_agents ?? false);
+    const redistribution = routingCfg?.rules?.redistribution ?? {};
+    setAutoRedistribution(redistribution.enabled ?? false);
+    setRedistributionRules(redistribution.rules ?? []);
+    setReadRule(chatCfg?.rules?.chat_read_rule ?? "");
+    setSavePhone(chatCfg?.rules?.auto_save_sub_phone ?? false);
+  }, [configsData]);
+  const handleToggleAutoRedistribution = (checked) => {
+    setAutoRedistribution(checked);
+    if (checked && redistributionRules.length === 0) {
+      setRedistributionRules([createDefaultRedistributionRule()]);
+    }
+  };
+  const addRule = () => setRedistributionRules((prev) => [
+    ...prev,
+    createDefaultRedistributionRule()
+  ]);
+  const removeRule = (index) => setRedistributionRules((prev) => prev.filter((_, i) => i !== index));
+  const updateRule = (index, patch) => setRedistributionRules(
+    (prev) => prev.map((rule, i) => i === index ? { ...rule, ...patch } : rule)
+  );
+  const toggleRuleStatus = (index, status, checked) => setRedistributionRules(
+    (prev) => prev.map((rule, i) => {
+      if (i !== index) return rule;
+      const statuses = rule.chat_statuses ?? [];
+      return {
+        ...rule,
+        chat_statuses: checked ? [...statuses, status] : statuses.filter((s) => s !== status)
+      };
+    })
+  );
+  const addRuleInterval = (index) => setRedistributionRules(
+    (prev) => prev.map((rule, i) => {
+      if (i !== index) return rule;
+      const intervals = rule.intervals ?? [];
+      const last = intervals[intervals.length - 1];
+      let next = DEFAULT_REDISTRIBUTION_INTERVAL;
+      if (last) {
+        const lastDate = toIntervalDate(last);
+        const candidate = addMinutes(lastDate, 5);
+        next = isSameDay(candidate, lastDate) ? formatInterval(candidate) : "23:59:59";
+      }
+      return { ...rule, intervals: sortUniqueIntervals([...intervals, next]) };
+    })
+  );
+  const removeRuleInterval = (index, intervalIndex) => setRedistributionRules(
+    (prev) => prev.map(
+      (rule, i) => i === index ? {
+        ...rule,
+        intervals: (rule.intervals ?? []).filter(
+          (_, ii) => ii !== intervalIndex
+        )
+      } : rule
+    )
+  );
+  const updateRuleInterval = (index, intervalIndex, value) => setRedistributionRules(
+    (prev) => prev.map(
+      (rule, i) => i === index ? {
+        ...rule,
+        // Reorder ascending + drop duplicates after editing a value.
+        intervals: sortUniqueIntervals(
+          (rule.intervals ?? []).map(
+            (item, ii) => ii === intervalIndex ? value : item
+          )
+        )
+      } : rule
+    )
+  );
+  const updateMutation = useMutation({
+    mutationFn: () => updateTenantConfig([
+      {
+        key: "config.routing_rule",
+        rules: {
+          apply_for_outgoing_chat: applyForOutgoingChat,
+          apply_for_manual_distribution: applyForManualDistribution,
+          allow_offline_agents: allowOfflineAgents,
+          redistribution: {
+            enabled: autoRedistribution,
+            rules: redistributionRules.map((rule) => ({
+              ...rule,
+              source: (rule.source ?? []).includes(ALL_CHANNELS_VALUE) ? [] : rule.source
+            }))
+          }
+        }
+      },
+      {
+        key: "config.chat",
+        // Gộp với rules đang lưu: `config.chat` còn chứa các khoá do màn khác
+        // quản (auto_assign_tag_*, sort_chat...), ghi đè nguyên object sẽ xoá
+        // mất chúng.
+        rules: {
+          ...configsData?.find((c) => c.key === "config.chat")?.rules ?? {},
+          chat_read_rule: readRule,
+          auto_save_sub_phone: savePhone
+        }
+      }
+    ]),
+    onSuccess: () => {
+      setChatConfig({
+        chat_read_rule: readRule,
+        auto_save_sub_phone: savePhone
+      });
+      queryClient.invalidateQueries({
+        queryKey: [QUERY_KEY.GET_CHAT_CONFIGS]
+      });
+      toast.success(
+        i18n.t("settings:common.saveSettingsSuccess", {
+          defaultValue: "L\u01B0u thi\u1EBFt l\u1EADp th\xE0nh c\xF4ng"
+        })
+      );
+      onClose();
+    },
+    onError: throwException
+  });
+  const handleReadRuleClick = (value) => {
+    if (readRule === value) setReadRule("");
+  };
+  const conversationStatusOptions = [
+    {
+      value: RedistributionChatStatus.OPEN,
+      label: t("settings:routing.settings.openConversation", {
+        defaultValue: "H\u1ED9i tho\u1EA1i \u0111ang m\u1EDF"
+      })
+    },
+    {
+      value: RedistributionChatStatus.MISSED,
+      label: t("settings:routing.settings.missedConversation", {
+        defaultValue: "H\u1ED9i tho\u1EA1i nh\u1EE1"
+      })
+    }
+  ];
+  const handleSave = () => {
+    if (!readRule) {
+      toast.error(
+        i18n.t("settings:routing.settings.selectSeenRuleRequired", {
+          defaultValue: "Vui l\xF2ng ch\u1ECDn quy t\u1EAFc \u0111\xE3 xem cho h\u1ED9i tho\u1EA1i"
+        })
+      );
+      return;
+    }
+    updateMutation.mutate();
+  };
+  return /* @__PURE__ */ jsxs(Dialog, { open, onOpenChange: (v) => !v && onClose(), modal: false, children: [
+    open && /* @__PURE__ */ jsx("div", { className: "fixed inset-0 z-50 bg-black/80 animate-in fade-in-0" }),
+    /* @__PURE__ */ jsxs(DialogContent, { className: "flex max-h-[85vh] max-w-xl flex-col overflow-hidden p-0", children: [
+      /* @__PURE__ */ jsx(DialogHeader, { className: "px-6 pt-6", children: /* @__PURE__ */ jsx(DialogTitle, { children: t("settings:routing.generalSettings", {
+        defaultValue: "Thi\u1EBFt l\u1EADp chung"
+      }) }) }),
+      /* @__PURE__ */ jsxs("div", { className: "min-h-0 flex-1 overflow-y-auto", children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-3 px-6 py-2", children: [
+          /* @__PURE__ */ jsx("p", { className: "text-sm font-medium", children: t("settings:routing.settings.conversationSetup", {
+            defaultValue: "Thi\u1EBFt l\u1EADp h\u1ED9i tho\u1EA1i"
+          }) }),
+          /* @__PURE__ */ jsxs("label", { className: "flex cursor-pointer items-start gap-3 rounded border border-dashed p-3", children: [
+            /* @__PURE__ */ jsx(
+              Checkbox,
+              {
+                checked: applyForOutgoingChat,
+                onCheckedChange: setApplyForOutgoingChat,
+                disabled: isLoading,
+                className: "mt-0.5"
+              }
+            ),
+            /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1", children: [
+              /* @__PURE__ */ jsx("span", { className: "text-sm font-medium", children: t("settings:routing.applyToOutbound", {
+                defaultValue: "\xC1p d\u1EE5ng Routing rule \u0111\u1ED1i v\u1EDBi h\u1ED9i tho\u1EA1i nh\u1EAFn ra"
+              }) }),
+              /* @__PURE__ */ jsx("span", { className: "text-xs text-muted-foreground", children: t("settings:routing.outboundAutoRoutingHint", {
+                defaultValue: "Khi th\u1EF1c hi\u1EC7n nh\u1EAFn ra, h\u1EC7 th\u1ED1ng s\u1EBD t\u1EF1 \u0111\u1ED9ng g\u1ECDi Routing Rule \u0111\u1EC3\n                  th\u1EF1c hi\u1EC7n ph\xE2n b\u1ED5 theo c\xE2u h\xECnh."
+              }) })
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxs("label", { className: "flex cursor-pointer items-start gap-3 rounded border border-dashed p-3", children: [
+            /* @__PURE__ */ jsx(
+              Checkbox,
+              {
+                checked: applyForManualDistribution,
+                onCheckedChange: setApplyForManualDistribution,
+                disabled: isLoading,
+                className: "mt-0.5"
+              }
+            ),
+            /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1", children: [
+              /* @__PURE__ */ jsx("span", { className: "text-sm font-medium", children: t("settings:routing.applyToManualAssign", {
+                defaultValue: "\xC1p d\u1EE5ng Routing rule \u0111\u1ED1i v\u1EDBi ph\xE2n b\u1ED5 th\u1EE7 c\xF4ng"
+              }) }),
+              /* @__PURE__ */ jsx("span", { className: "text-xs text-muted-foreground", children: t("settings:routing.manualAssignAutoRoutingHint", {
+                defaultValue: "Khi th\u1EF1c hi\u1EC7n g\xE1n chuy\xEAn vi\xEAn th\u1EE7 c\xF4ng, h\u1EC7 th\u1ED1ng t\u1EF1 \u0111\u1ED9ng g\u1ECDi\n                  Routing Rule \u0111\u1EC3 th\u1EF1c hi\u1EC7n ph\xE2n b\u1ED5 theo c\xE2u h\xECnh."
+              }) })
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxs("label", { className: "flex cursor-pointer items-start gap-3 rounded border border-dashed p-3", children: [
+            /* @__PURE__ */ jsx(
+              Checkbox,
+              {
+                checked: allowOfflineAgents,
+                onCheckedChange: setAllowOfflineAgents,
+                disabled: isLoading,
+                className: "mt-0.5"
+              }
+            ),
+            /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1", children: [
+              /* @__PURE__ */ jsx("span", { className: "text-sm font-medium", children: t("settings:routing.assignWhenAgentInactive", {
+                defaultValue: "Ph\xE2n b\u1ED5 khi chuy\xEAn vi\xEAn kh\xF4ng ho\u1EA1t \u0111\u1ED9ng"
+              }) }),
+              /* @__PURE__ */ jsx("span", { className: "text-xs text-muted-foreground", children: t("settings:routing.allowOfflineAssignHint", {
+                defaultValue: "Cho ph\xE9p h\u1EC7 th\u1ED1ng ti\u1EBFp t\u1EE5c ph\xE2n b\u1ED5 h\u1ED9i tho\u1EA1i cho chuy\xEAn vi\xEAn\n                  ngay c\u1EA3 khi tr\u1EA1ng th\xE1i hi\u1EC7n t\u1EA1i l\xE0 Offline."
+              }) })
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxs("label", { className: "flex cursor-pointer items-start gap-3 rounded border border-dashed p-3", children: [
+            /* @__PURE__ */ jsx(
+              Checkbox,
+              {
+                checked: savePhone,
+                onCheckedChange: setSavePhone,
+                disabled: isLoading,
+                className: "mt-0.5"
+              }
+            ),
+            /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1", children: [
+              /* @__PURE__ */ jsx("span", { className: "text-sm font-medium", children: t("settings:routing.settings.autoSavePhoneNumber", {
+                defaultValue: "T\u1EF1 \u0111\u1ED9ng l\u01B0u s\u1ED1 \u0111i\u1EC7n tho\u1EA1i"
+              }) }),
+              /* @__PURE__ */ jsx("span", { className: "text-xs text-muted-foreground", children: t("settings:routing.autoSavePhoneHint", {
+                defaultValue: "Khi ph\xE1t hi\u1EC7n s\u1ED1 \u0111i\u1EC7n tho\u1EA1i trong cu\u1ED9c tr\xF2 chuy\u1EC7n, h\u1EC7 th\u1ED1ng s\u1EBD\n                  t\u1EF1 \u0111\u1ED9ng l\u01B0u v\xE0o danh s\xE1ch li\xEAn h\u1EC7."
+              }) })
+            ] })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-3 px-6 py-2", children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
+            /* @__PURE__ */ jsx("p", { className: "text-sm font-medium", children: t("settings:routing.reassignConversationRule", {
+              defaultValue: "Quy t\u1EAFc ph\xE2n b\u1ED5 l\u1EA1i h\u1ED9i tho\u1EA1i"
+            }) }),
+            /* @__PURE__ */ jsx(
+              Switch,
+              {
+                checked: autoRedistribution,
+                onChange: handleToggleAutoRedistribution,
+                disabled: isLoading
+              }
+            )
+          ] }),
+          autoRedistribution && /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-3", children: [
+            /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: t("settings:routing.settings.redistributionRuleHint", {
+              defaultValue: "M\u1ED7i nh\xF3m \xE1p d\u1EE5ng cho m\u1ED9t tr\u1EA1ng th\xE1i h\u1ED9i tho\u1EA1i v\xE0 m\u1ED9t t\u1EADp k\xEAnh ri\xEAng, v\u1EDBi m\u1ED1c th\u1EDDi gian ph\xE2n b\u1ED5 ri\xEAng c\u1EE7a nh\xF3m."
+            }) }),
+            redistributionRules.map((rule, index) => /* @__PURE__ */ jsxs("div", { className: "rounded-lg border", children: [
+              /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between border-b bg-muted/40 px-3 py-2", children: [
+                /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+                  /* @__PURE__ */ jsx("span", { className: "flex size-5 items-center justify-center rounded-full bg-primary text-xs font-semibold text-white", children: index + 1 }),
+                  /* @__PURE__ */ jsx("span", { className: "text-sm font-medium", children: t(
+                    "settings:routing.settings.redistributionRuleTitle",
+                    {
+                      defaultValue: "Quy t\u1EAFc ph\xE2n b\u1ED5 {index}",
+                      index: index + 1
+                    }
+                  ) })
+                ] }),
+                /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    type: "button",
+                    onClick: () => removeRule(index),
+                    className: "text-[hsl(var(--icon-danger))]",
+                    children: /* @__PURE__ */ jsx(Trash2, { className: "size-4" })
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-3 p-3", children: [
+                /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2", children: [
+                  /* @__PURE__ */ jsx("span", { className: "text-sm text-muted-foreground", children: t("settings:routing.settings.conversationStatus", {
+                    defaultValue: "Tr\u1EA1ng th\xE1i h\u1ED9i tho\u1EA1i"
+                  }) }),
+                  /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-2", children: conversationStatusOptions.map((option) => {
+                    const checked = (rule.chat_statuses ?? []).includes(
+                      option.value
+                    );
+                    return /* @__PURE__ */ jsxs(
+                      "label",
+                      {
+                        className: "flex flex-1 cursor-pointer items-center gap-2 rounded-md border border-input p-2.5",
+                        children: [
+                          /* @__PURE__ */ jsx(
+                            Checkbox,
+                            {
+                              checked,
+                              onCheckedChange: (v) => toggleRuleStatus(index, option.value, !!v),
+                              disabled: isLoading
+                            }
+                          ),
+                          /* @__PURE__ */ jsx("span", { className: "text-sm", children: option.label })
+                        ]
+                      },
+                      option.value
+                    );
+                  }) })
+                ] }),
+                /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2", children: [
+                  /* @__PURE__ */ jsx("span", { className: "text-sm text-muted-foreground", children: t("settings:routing.settings.applyToChannel", {
+                    defaultValue: "\xC1p d\u1EE5ng cho k\xEAnh"
+                  }) }),
+                  /* @__PURE__ */ jsx(
+                    ChannelMultiSelect,
+                    {
+                      value: rule.source,
+                      onChange: (v) => updateRule(index, { source: v }),
+                      disabled: isLoading,
+                      showCount: true
+                    }
+                  )
+                ] }),
+                /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2", children: [
+                  /* @__PURE__ */ jsx("span", { className: "text-sm text-muted-foreground", children: t(
+                    "settings:routing.settings.dailyRedistributeTime",
+                    {
+                      defaultValue: "M\u1ED1c th\u1EDDi gian ph\xE2n b\u1ED5 h\xE0ng ng\xE0y"
+                    }
+                  ) }),
+                  (rule.intervals ?? []).map(
+                    (interval, intervalIndex) => /* @__PURE__ */ jsxs(
+                      "div",
+                      {
+                        className: "flex w-full items-center gap-2",
+                        children: [
+                          /* @__PURE__ */ jsx("div", { className: "rounded-md border px-2 py-1.5", children: /* @__PURE__ */ jsx(
+                            TimePicker,
+                            {
+                              date: toIntervalDate(interval),
+                              setDate: (d) => updateRuleInterval(
+                                index,
+                                intervalIndex,
+                                formatInterval(d)
+                              )
+                            }
+                          ) }),
+                          /* @__PURE__ */ jsx(
+                            "button",
+                            {
+                              type: "button",
+                              onClick: () => removeRuleInterval(index, intervalIndex),
+                              className: "text-muted-foreground",
+                              children: /* @__PURE__ */ jsx(X, { className: "size-4" })
+                            }
+                          )
+                        ]
+                      },
+                      intervalIndex
+                    )
+                  ),
+                  /* @__PURE__ */ jsxs(
+                    "button",
+                    {
+                      type: "button",
+                      onClick: () => addRuleInterval(index),
+                      className: "flex w-fit items-center gap-1 self-start rounded-md border border-primary px-2.5 py-1 text-sm text-primary",
+                      children: [
+                        /* @__PURE__ */ jsx(Plus, { className: "size-3.5" }),
+                        t("settings:routing.settings.addMilestone", {
+                          defaultValue: "Th\xEAm m\u1ED1c"
+                        })
+                      ]
+                    }
+                  )
+                ] })
+              ] })
+            ] }, index)),
+            /* @__PURE__ */ jsxs(
+              "button",
+              {
+                type: "button",
+                onClick: addRule,
+                className: "flex items-center gap-1 self-start text-sm font-medium text-primary",
+                children: [
+                  /* @__PURE__ */ jsx(Plus, { className: "size-3.5" }),
+                  t("settings:routing.settings.addRedistributionRule", {
+                    defaultValue: "Th\xEAm quy t\u1EAFc ph\xE2n b\u1ED5"
+                  })
+                ]
+              }
+            )
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-3 px-6 py-2", children: [
+          /* @__PURE__ */ jsx("p", { className: "text-sm font-medium", children: t("settings:routing.viewedRuleForConversation", {
+            defaultValue: "Quy t\u1EAFc \u0111\xE3 xem cho h\u1ED9i tho\u1EA1i"
+          }) }),
+          /* @__PURE__ */ jsxs(
+            RadioGroup,
+            {
+              value: readRule,
+              onValueChange: setReadRule,
+              disabled: isLoading,
+              children: [
+                /* @__PURE__ */ jsxs(
+                  "label",
+                  {
+                    className: "flex cursor-pointer items-center gap-3 rounded border border-dashed p-3",
+                    onClick: () => handleReadRuleClick(ChatReadRule.USER_VIEW),
+                    children: [
+                      /* @__PURE__ */ jsx(
+                        RadioGroupItem,
+                        {
+                          value: ChatReadRule.USER_VIEW,
+                          disabled: isLoading
+                        }
+                      ),
+                      /* @__PURE__ */ jsx("span", { className: "text-sm", children: t("settings:routing.settings.seenByUserView", {
+                        defaultValue: "T\xEDnh \u0111\xE3 xem theo view ng\u01B0\u1EDDi d\xF9ng"
+                      }) })
+                    ]
+                  }
+                ),
+                /* @__PURE__ */ jsxs(
+                  "label",
+                  {
+                    className: "flex cursor-pointer items-center gap-3 rounded border border-dashed p-3",
+                    onClick: () => handleReadRuleClick(ChatReadRule.ASSIGNEE_VIEW),
+                    children: [
+                      /* @__PURE__ */ jsx(
+                        RadioGroupItem,
+                        {
+                          value: ChatReadRule.ASSIGNEE_VIEW,
+                          disabled: isLoading
+                        }
+                      ),
+                      /* @__PURE__ */ jsx("span", { className: "text-sm", children: t("settings:routing.settings.seenByAssignedAgent", {
+                        defaultValue: "T\xEDnh \u0111\xE3 xem \u0111\u1ED1i v\u1EDBi chuy\xEAn vi\xEAn ph\u1EE5 tr\xE1ch"
+                      }) })
+                    ]
+                  }
+                ),
+                /* @__PURE__ */ jsxs(
+                  "label",
+                  {
+                    className: "flex cursor-pointer items-center gap-3 rounded border border-dashed p-3",
+                    onClick: () => handleReadRuleClick(ChatReadRule.ANY_MEMBER_VIEW),
+                    children: [
+                      /* @__PURE__ */ jsx(
+                        RadioGroupItem,
+                        {
+                          value: ChatReadRule.ANY_MEMBER_VIEW,
+                          disabled: isLoading
+                        }
+                      ),
+                      /* @__PURE__ */ jsx("span", { className: "text-sm", children: t("settings:routing.settings.seenByAnyMember", {
+                        defaultValue: "T\xEDnh \u0111\xE3 xem khi b\u1EA5t k\u1EF3 th\xE0nh vi\xEAn n\xE0o trong h\u1ED9i tho\u1EA1i xem."
+                      }) })
+                    ]
+                  }
+                )
+              ]
+            }
+          )
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "flex justify-end gap-2 px-6 pb-6 pt-2", children: [
+        /* @__PURE__ */ jsx(Button, { variant: "outline", onClick: onClose, children: t("common:action.close", { defaultValue: "\u0110\xF3ng" }) }),
+        /* @__PURE__ */ jsx(
+          Button,
+          {
+            onClick: handleSave,
+            loading: updateMutation.isPending,
+            disabled: isLoading,
+            children: t("common:action.save", { defaultValue: "L\u01B0u" })
+          }
+        )
+      ] })
+    ] })
+  ] });
+}
+export {
+  ChatReadRule,
+  RedistributionChatStatus,
+  RoutingSettingsDialog as default
+};

package/components/settings-route/switchboard/queue-new/constant.js

@@ -0,0 +1,9 @@
+const SubscribedUserPermission = Object.freeze({
+  CAN_TAKE_OVER: "can_take_over",
+  VIEW_ONLY: "view_only",
+  HIDDEN: "hidden",
+  CAN_INVITE: "can_invite"
+});
+export {
+  SubscribedUserPermission
+};

package/components/shared/linked-customer-fields/LinkedCustomerFields.js

@@ -0,0 +1,91 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Label } from "../../custom/label.js";
+import FieldGenerator from "../../custom/field-generator.js";
+import { CustomSelect } from "../../custom/custom-select.js";
+import { AttributeFieldType } from "@zenify-omni/chat-js/constants/setting.js";
+import {
+  useAllCities,
+  useGetDistrictsByCityId
+} from "../../../hooks/use-setting-common.js";
+import { isMissingLinkedValue } from "./use-linked-customer-fields.js";
+const ADDRESS_FIELD_KEYS = ["city_id", "district_id"];
+function LinkedCustomerFields({
+  fields,
+  values,
+  errors,
+  onChange
+}) {
+  const cityList = useAllCities();
+  const { data: districtList } = useGetDistrictsByCityId(values?.city_id);
+  if (!fields || fields.length === 0) return null;
+  const renderAddressField = (field, value, showRequiredMarker, error) => {
+    const isCity = field.key === "city_id";
+    const options = isCity ? (cityList ?? []).map((option) => ({
+      label: option.text,
+      value: option.id
+    })) : (districtList ?? []).map((option) => ({
+      label: option.name,
+      value: option.id.toString()
+    }));
+    return /* @__PURE__ */ jsxs("div", { className: "space-y-1", children: [
+      /* @__PURE__ */ jsx(Label, { size: "small", isRequired: showRequiredMarker, children: field.title }),
+      /* @__PURE__ */ jsx(
+        CustomSelect,
+        {
+          isSearch: true,
+          size: "small",
+          disabled: field.read_only,
+          value,
+          options,
+          onChange: (v) => {
+            onChange(field.key, v);
+            if (isCity) onChange("district_id", "");
+          }
+        }
+      ),
+      error && /* @__PURE__ */ jsx("span", { className: "text-sm text-[--label-red-foreground]", children: error })
+    ] }, field.config_id || field.key);
+  };
+  return /* @__PURE__ */ jsx("div", { className: "w-full space-y-4", children: fields.map((field) => {
+    const value = values?.[field.key];
+    const showRequiredMarker = field.required && isMissingLinkedValue(value);
+    const error = errors?.[field.key];
+    if (ADDRESS_FIELD_KEYS.includes(field.key)) {
+      return renderAddressField(field, value, showRequiredMarker, error);
+    }
+    let renderType = field.type;
+    let renderData = field.options;
+    if (field.type === AttributeFieldType.MultiSelect) {
+      renderData = (field.options || []).map(
+        (option) => typeof option === "object" && option !== null ? option : { text: option, id: option }
+      );
+    }
+    if (field.type === AttributeFieldType.Date) {
+      renderType = "date-time";
+    }
+    return /* @__PURE__ */ jsxs("div", { className: "space-y-1", children: [
+      /* @__PURE__ */ jsx(Label, { size: "small", isRequired: showRequiredMarker, children: field.title }),
+      /* @__PURE__ */ jsx(
+        FieldGenerator,
+        {
+          isSelectSearch: true,
+          size: "small",
+          field,
+          isRequired: showRequiredMarker,
+          disabled: field.read_only,
+          fieldKey: field.key,
+          formValuesCurrent: values,
+          title: field.title,
+          type: renderType,
+          data: renderData,
+          value,
+          onChange: (v) => onChange(field.key, v)
+        }
+      ),
+      error && /* @__PURE__ */ jsx("span", { className: "text-sm text-[--label-red-foreground]", children: error })
+    ] }, field.config_id || field.key);
+  }) });
+}
+export {
+  LinkedCustomerFields as default
+};