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

package/components/chat-route/chat-list/filter-chat.js

@@ -0,0 +1,501 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { debounce } from "lodash-es";
+import { maskData } from "@zenify-omni/chat-js/utils/data.js";
+import { SlidersHorizontal, Plus, RotateCcw } from "lucide-react";
+import {
+  Popover,
+  PopoverTrigger,
+  PopoverContent
+} from "../../ui/popover.js";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger
+} from "../../ui/dropdown-menu.js";
+import { Tabs, TabsList, TabsTrigger } from "../../ui/tabs.js";
+import { SearchInput } from "../../custom/search-input.js";
+import { Button } from "../../custom/button.js";
+import { Form } from "../../ui/form.js";
+import useChatStore from "../../../store/chat-store.js";
+import useChatDisplayConfigStore, {
+  selectStatusTabs
+} from "../../../store/chat-display-config-store.js";
+import { useShallow } from "zustand/react/shallow";
+import { getQuickFilterById } from "@zenify-omni/chat-js/api/chatroom.js";
+import { useForm, useWatch } from "react-hook-form";
+import {
+  ChatFilterSourceOptions,
+  ChatFilterSource
+} from "@zenify-omni/chat-js/constants/chat-message.js";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { useGetListSocialPage } from "../../../hooks/use-setting-common.js";
+import ChatSortMenu from "./chat-sort-menu.js";
+import {
+  baseFilterSchema,
+  CHAT_SEARCH_DEBOUNCE_MS,
+  DEFAULT_FILTER_STATE,
+  validateRangeDate
+} from "./util.js";
+import FilterCriteriaRows, {
+  buildCriteriaFields,
+  getActiveCriteriaKeys
+} from "./filter-criteria-rows.js";
+import SaveFilterPopover from "./save-filter-popover.js";
+import { throwException } from "../../../exceptions/throw-exception.js";
+import {
+  CHAT_TAB_CONFIGS,
+  PREDEFINED_FILTER_CHIPS
+} from "../../settings-route/chat-layout/detail/constants.js";
+import { cn } from "../../../lib/utils.js";
+import { useTranslation } from "react-i18next";
+const formSchema = baseFilterSchema.superRefine(validateRangeDate);
+const DEFAULT_CRITERIA_KEYS = [
+  "sources",
+  "page_ids",
+  "has_fb_ads",
+  "agents_in_room",
+  "assigned",
+  "range_date"
+];
+const RAW_SOCIAL_PAGE_SOURCE_ALIASES = {
+  "tiktok-business": ChatFilterSource.Tiktok,
+  "tiktok-shop": ChatFilterSource.TiktokShop
+};
+const normalizeSocialPageSource = (source) => RAW_SOCIAL_PAGE_SOURCE_ALIASES[source] ?? source;
+function FilterChat({ onClearKeyword }) {
+  const { t } = useTranslation();
+  const formRef = useRef(null);
+  const criteriaScrollRef = useRef(null);
+  const [open, setOpen] = useState(false);
+  const [highlightCriteriaKey, setHighlightCriteriaKey] = useState(null);
+  const [criteriaResetSignal, setCriteriaResetSignal] = useState(0);
+  const bumpCriteriaResetSignal = () => setCriteriaResetSignal((prev) => prev + 1);
+  const { data: socialPageList } = useGetListSocialPage();
+  const [
+    filterState,
+    setFilterState,
+    selectedFilterId,
+    setSelectedFilterId,
+    currentChatTab,
+    setCurrentChatTab,
+    unreadReceivedTab,
+    notReceivedTab,
+    closedTab
+  ] = useChatStore(
+    useShallow((state) => [
+      state.filterState,
+      state.setFilterState,
+      state.selectedFilterId,
+      state.setSelectedFilterId,
+      state.currentChatTab,
+      state.setCurrentChatTab,
+      state.unreadReceivedTab,
+      state.notReceivedTab,
+      state.closedTab
+    ])
+  );
+  const aliasMap = useChatStore((state) => state.aliasMap);
+  const statusTabs = useChatDisplayConfigStore(useShallow(selectStatusTabs));
+  const sourceOptions = ChatFilterSourceOptions;
+  const [keyword, setKeyword] = useState(filterState.keyword);
+  const form = useForm({
+    resolver: zodResolver(formSchema),
+    mode: "onSubmit",
+    defaultValues: filterState
+  });
+  useEffect(() => {
+    if (!open) return;
+    if (!selectedFilterId && !activePredefinedChipId) return;
+    form.reset(useChatStore.getState().filterState);
+    bumpCriteriaResetSignal();
+  }, [open]);
+  useEffect(() => {
+    if (!open) return;
+    if (!selectedFilterId) {
+      return;
+    }
+    getQuickFilterById({ id: selectedFilterId }).catch((error) => {
+      if (error?.response?.status === 404) {
+        setSelectedFilterId(null);
+        form.reset(DEFAULT_FILTER_STATE);
+        setFilterState(DEFAULT_FILTER_STATE);
+      } else {
+        throwException(error);
+      }
+    });
+  }, [open]);
+  const applyKeyword = useCallback(
+    (value) => {
+      const { filterState: current, setFilterState: apply } = useChatStore.getState();
+      if (value === current.keyword) return;
+      apply({ ...form.getValues(), keyword: value });
+    },
+    [form]
+  );
+  const applyKeywordDebounced = useMemo(
+    () => debounce(applyKeyword, CHAT_SEARCH_DEBOUNCE_MS),
+    [applyKeyword]
+  );
+  useEffect(() => () => applyKeywordDebounced.cancel(), [applyKeywordDebounced]);
+  useEffect(() => {
+    form.setValue("sources", filterState.sources);
+  }, [filterState.sources]);
+  const hasKeyword = keyword.trim().length > 0;
+  const handleKeywordChange = (value) => {
+    setKeyword(value);
+    if (value && value.length < 3) {
+      applyKeywordDebounced.cancel();
+      return;
+    }
+    applyKeywordDebounced(value);
+  };
+  const handleCloseSearch = () => {
+    applyKeywordDebounced.cancel();
+    setKeyword("");
+    const hadAppliedKeyword = !!filterState.keyword;
+    applyKeyword("");
+    if (hadAppliedKeyword) onClearKeyword?.();
+  };
+  const hasFilter = useMemo(() => {
+    return !filterState.sources.includes("all") || filterState.read_statuses.length > 0 || filterState.agents_in_room.length > 0 || filterState.assigned || filterState.tags.length > 0 || filterState.personal_tags?.length > 0 || filterState.page_ids.length > 0 || filterState.phone_status && filterState.phone_status !== "all" || !!filterState.is_sla_violated || filterState.has_fb_ads !== void 0 && filterState.has_fb_ads !== "all" || filterState.ad_id && filterState.ad_id.trim().length > 0 || filterState.range_date.from && filterState.range_date.to || filterState.has_chatbot && filterState.has_chatbot !== "all" || filterState.is_unanswered && filterState.is_unanswered !== "all" || filterState.is_group && filterState.is_group !== "all" || !!filterState.is_unhandled || filterState.group_ids?.length > 0 || !!filterState.crm_type;
+  }, [filterState]);
+  const activePredefinedChipId = useMemo(
+    () => PREDEFINED_FILTER_CHIPS.find((chip) => chip.isActive(filterState))?.id,
+    [filterState]
+  );
+  const onSubmit = (payload) => {
+    setFilterState(payload);
+    if (selectedFilterId || activePredefinedChipId) setSelectedFilterId(null);
+  };
+  const handleResetForm = () => {
+    const keepSavedFilter = selectedFilterId && !activePredefinedChipId;
+    form.reset(keepSavedFilter ? void 0 : DEFAULT_FILTER_STATE);
+    bumpCriteriaResetSignal();
+    setFilterState({ ...form.getValues(), keyword: filterState.keyword });
+    if (!keepSavedFilter && selectedFilterId) setSelectedFilterId(null);
+  };
+  const handleCancelForm = () => {
+    form.reset(filterState);
+    setOpen(false);
+  };
+  const filterSources = useWatch({
+    control: form.control,
+    name: "sources"
+  });
+  const filterSocialPageList = useMemo(() => {
+    const toOption = (option) => ({
+      label: maskData(
+        aliasMap[`${option.source}:${option.page_id}`] ?? option.page_name
+      ),
+      value: option.page_id,
+      source: normalizeSocialPageSource(option.source)
+    });
+    if (filterSources.includes("all")) {
+      return (socialPageList ?? []).map(toOption);
+    }
+    return (socialPageList ?? []).filter(
+      (option) => filterSources.includes(normalizeSocialPageSource(option.source))
+    ).map(toOption);
+  }, [filterSources, socialPageList, aliasMap]);
+  const criteriaFieldDefs = useMemo(
+    () => buildCriteriaFields({
+      form,
+      sourceOptions,
+      filterSocialPageList,
+      includePersonal: true
+    }),
+    [form, sourceOptions, filterSocialPageList]
+  );
+  const criteriaFieldMap = useMemo(() => {
+    const map = {};
+    criteriaFieldDefs.forEach((f) => {
+      map[f.key] = f;
+    });
+    return map;
+  }, [criteriaFieldDefs]);
+  const [activeCriteriaKeys, setActiveCriteriaKeys] = useState([]);
+  useEffect(() => {
+    const activeKeys = getActiveCriteriaKeys(
+      criteriaFieldDefs,
+      form.getValues()
+    );
+    const mergedKeys = [
+      ...DEFAULT_CRITERIA_KEYS,
+      ...activeKeys.filter((key) => !DEFAULT_CRITERIA_KEYS.includes(key))
+    ];
+    setActiveCriteriaKeys(mergedKeys);
+  }, [criteriaResetSignal]);
+  const remainingCriteriaFieldDefs = criteriaFieldDefs.filter(
+    (f) => !activeCriteriaKeys.includes(f.key)
+  );
+  const handleAddCriteria = (key) => {
+    if (!key || activeCriteriaKeys.includes(key)) return;
+    setActiveCriteriaKeys((prev) => [...prev, key]);
+    setHighlightCriteriaKey(null);
+    requestAnimationFrame(() => setHighlightCriteriaKey(key));
+  };
+  useEffect(() => {
+    if (!highlightCriteriaKey) return;
+    const container = criteriaScrollRef.current;
+    const el = container?.querySelector(
+      `[data-criteria-key="${highlightCriteriaKey}"]`
+    );
+    if (container && el) {
+      const buffer = 16;
+      const containerRect = container.getBoundingClientRect();
+      const elRect = el.getBoundingClientRect();
+      if (elRect.bottom > containerRect.bottom - buffer) {
+        container.scrollBy({
+          top: elRect.bottom - containerRect.bottom + buffer,
+          behavior: "smooth"
+        });
+      } else if (elRect.top < containerRect.top + buffer) {
+        container.scrollBy({
+          top: elRect.top - containerRect.top - buffer,
+          behavior: "smooth"
+        });
+      }
+    }
+    const timer = setTimeout(() => setHighlightCriteriaKey(null), 1200);
+    return () => clearTimeout(timer);
+  }, [highlightCriteriaKey]);
+  const handleRemoveCriteria = (key) => {
+    criteriaFieldMap[key]?.reset();
+    setActiveCriteriaKeys((prev) => prev.filter((k) => k !== key));
+  };
+  const handleChangeCriteriaType = (oldKey, newKey) => {
+    if (oldKey === newKey) return;
+    criteriaFieldMap[oldKey]?.reset();
+    setActiveCriteriaKeys(
+      (prev) => prev.map((k) => k === oldKey ? newKey : k)
+    );
+  };
+  const tabCounts = { unreadReceivedTab, notReceivedTab, closedTab };
+  const visibleTabs = useMemo(
+    () => CHAT_TAB_CONFIGS.filter((tab) => statusTabs.includes(tab.value)),
+    [statusTabs]
+  );
+  useEffect(() => {
+    if (!visibleTabs.length) return;
+    if (visibleTabs.some((tab) => tab.value === currentChatTab)) return;
+    setCurrentChatTab(visibleTabs[0].value);
+  }, [visibleTabs, currentChatTab, setCurrentChatTab]);
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs("div", { className: "mx-auto flex w-[95%] flex-row items-center gap-2", children: [
+      /* @__PURE__ */ jsx(
+        SearchInput,
+        {
+          className: "flex-1 text-xs",
+          placeholder: t("chat:placeholder.searchConversation", {
+            defaultValue: "T\xECm ki\u1EBFm h\u1ED9i tho\u1EA1i (theo n\u1ED9i dung, s\u1ED1 \u0111i\u1EC7n tho\u1EA1i,...)"
+          }),
+          value: keyword,
+          onChange: (e) => handleKeywordChange(e.target.value)
+        }
+      ),
+      hasKeyword ? /* @__PURE__ */ jsx(
+        Button,
+        {
+          type: "button",
+          variant: "ghost",
+          size: "sm",
+          className: "shrink-0 px-2 text-sm font-normal text-muted-foreground hover:text-foreground",
+          onClick: handleCloseSearch,
+          children: t("common:action.close", { defaultValue: "\u0110\xF3ng" })
+        }
+      ) : /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsxs(Popover, { open, onOpenChange: setOpen, children: [
+          /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
+            Button,
+            {
+              type: "button",
+              size: "icon",
+              className: cn(
+                "rounded-md p-2",
+                hasFilter && "border-primary/40 bg-secondary text-primary hover:bg-secondary"
+              ),
+              variant: "outline",
+              children: /* @__PURE__ */ jsx(
+                SlidersHorizontal,
+                {
+                  className: "h-4 w-4 cursor-pointer",
+                  onClick: () => {
+                    setOpen(true);
+                  }
+                }
+              )
+            }
+          ) }),
+          /* @__PURE__ */ jsxs(
+            PopoverContent,
+            {
+              className: "flex max-h-[min(600px,60vh)] w-[92vw] max-w-[92vw] flex-col space-y-3 overflow-hidden rounded-xl p-0 sm:w-[700px] sm:min-w-[480px] sm:max-w-[90vw]",
+              side: "bottom",
+              align: "start",
+              children: [
+                /* @__PURE__ */ jsxs("div", { className: "sticky top-0 z-10 space-y-1 bg-card px-[22px] pb-1.5 pt-[18px]", children: [
+                  /* @__PURE__ */ jsx("h1", { className: "text-lg font-bold tracking-[-0.18px] text-foreground", children: t("common:label.filter", { defaultValue: "B\u1ED9 l\u1ECDc" }) }),
+                  /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: t("chat:message.addConditionToFilterConversations", {
+                    defaultValue: "Th\xEAm \u0111i\u1EC1u ki\u1EC7n \u0111\u1EC3 l\u1ECDc ch\xEDnh x\xE1c h\u1ED9i tho\u1EA1i. L\u01B0u l\u1EA1i th\xE0nh m\u1ED9t b\u1ED9\n                l\u1ECDc \u0111\u1EC3 m\u1EDF nhanh \u1EDF l\u1EA7n sau."
+                  }) })
+                ] }),
+                /* @__PURE__ */ jsx(
+                  "div",
+                  {
+                    ref: criteriaScrollRef,
+                    className: "scroll-container-thin flex-1 overflow-auto border-b border-border-subtle px-[22px] pb-4 pt-0.5",
+                    children: /* @__PURE__ */ jsx(Form, { ...form, children: /* @__PURE__ */ jsx("form", { ref: formRef, onSubmit: form.handleSubmit(onSubmit), children: /* @__PURE__ */ jsx(
+                      FilterCriteriaRows,
+                      {
+                        form,
+                        sourceOptions,
+                        filterSocialPageList,
+                        includePersonal: true,
+                        activeKeys: activeCriteriaKeys,
+                        onRemoveCriteria: handleRemoveCriteria,
+                        onChangeCriteriaType: handleChangeCriteriaType
+                      }
+                    ) }) })
+                  }
+                ),
+                /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2 px-[22px] pb-3 sm:flex-row sm:items-center sm:justify-between", children: [
+                  /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-3.5", children: [
+                    /* @__PURE__ */ jsxs(DropdownMenu, { children: [
+                      /* @__PURE__ */ jsx(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(
+                        Button,
+                        {
+                          type: "button",
+                          variant: "link",
+                          disabled: remainingCriteriaFieldDefs.length === 0,
+                          className: "h-auto gap-1 p-0 text-xs font-semibold text-primary disabled:no-underline",
+                          children: [
+                            /* @__PURE__ */ jsx(Plus, { className: "h-4 w-4" }),
+                            t("common:action.addFilterCriteria", {
+                              defaultValue: "Th\xEAm ti\xEAu ch\xED l\u1ECDc"
+                            })
+                          ]
+                        }
+                      ) }),
+                      /* @__PURE__ */ jsx(
+                        DropdownMenuContent,
+                        {
+                          align: "start",
+                          className: "max-h-[var(--radix-dropdown-menu-content-available-height,24rem)] overflow-y-auto",
+                          children: remainingCriteriaFieldDefs.map((option) => /* @__PURE__ */ jsx(
+                            DropdownMenuItem,
+                            {
+                              onClick: () => handleAddCriteria(option.key),
+                              children: /* @__PURE__ */ jsxs("span", { className: "flex min-w-0 items-center gap-1.5", children: [
+                                option.icon,
+                                /* @__PURE__ */ jsx("span", { className: "truncate", children: option.label })
+                              ] })
+                            },
+                            option.key
+                          ))
+                        }
+                      )
+                    ] }),
+                    /* @__PURE__ */ jsx("div", { className: "h-[18px] w-px shrink-0 bg-border-subtle" }),
+                    /* @__PURE__ */ jsxs(
+                      Button,
+                      {
+                        type: "button",
+                        variant: "link",
+                        className: "h-auto gap-1.5 p-0 text-xs font-semibold text-primary",
+                        disabled: !form.formState.isDirty && !activePredefinedChipId,
+                        onClick: handleResetForm,
+                        children: [
+                          /* @__PURE__ */ jsx(RotateCcw, { className: "h-4 w-4" }),
+                          t("common:action.reset", { defaultValue: "\u0110\u1EB7t l\u1EA1i" })
+                        ]
+                      }
+                    )
+                  ] }),
+                  /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [
+                    /* @__PURE__ */ jsx(
+                      Button,
+                      {
+                        size: "sm",
+                        type: "button",
+                        variant: "outline",
+                        onClick: handleCancelForm,
+                        children: t("common:action.cancelAlt", { defaultValue: "Hu\u1EF7" })
+                      }
+                    ),
+                    /* @__PURE__ */ jsx(
+                      SaveFilterPopover,
+                      {
+                        trigger: /* @__PURE__ */ jsx(Button, { size: "sm", type: "button", variant: "outline", children: t("chat:action.saveAsNewFilter", {
+                          defaultValue: "L\u01B0u th\xE0nh b\u1ED9 l\u1ECDc m\u1EDBi"
+                        }) }),
+                        getFilterValues: () => form.getValues()
+                      }
+                    ),
+                    /* @__PURE__ */ jsx(
+                      Button,
+                      {
+                        size: "sm",
+                        type: "button",
+                        onClick: () => formRef.current.requestSubmit(),
+                        children: t("common:action.apply", { defaultValue: "\xC1p d\u1EE5ng" })
+                      }
+                    )
+                  ] })
+                ] })
+              ]
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsx(ChatSortMenu, {})
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx(
+      Tabs,
+      {
+        value: currentChatTab,
+        onValueChange: setCurrentChatTab,
+        className: "mt-2 w-full min-w-0",
+        children: /* @__PURE__ */ jsx("div", { className: "scroll-container-hide w-full overflow-x-auto", children: /* @__PURE__ */ jsx(TabsList, { className: "m-0 flex h-auto w-max !bg-transparent !p-0", children: visibleTabs.map((tab) => {
+          const count = tabCounts[tab.countKey]?.total ?? 0;
+          return /* @__PURE__ */ jsx(
+            TabsTrigger,
+            {
+              value: tab.value,
+              onClick: (e) => e.currentTarget.scrollIntoView({
+                behavior: "smooth",
+                inline: "nearest",
+                block: "nearest"
+              }),
+              className: cn(
+                "group shrink-0 whitespace-nowrap rounded-none px-4 pb-2 !text-sm",
+                "border-b-2 border-solid !bg-transparent !shadow-none",
+                "transition-all duration-200 ease-in-out",
+                currentChatTab === tab.value ? "border-primary !text-primary" : "border-transparent text-foreground hover:border-border hover:text-muted-foreground"
+              ),
+              children: /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-1.5 font-normal", children: [
+                tab.label(t),
+                /* @__PURE__ */ jsx(
+                  "span",
+                  {
+                    className: cn(
+                      "inline-flex min-h-[18px] items-center justify-center rounded-full",
+                      "px-2 text-xs leading-none",
+                      currentChatTab === tab.value ? "bg-secondary font-medium text-primary" : "bg-border-subtle font-normal text-foreground"
+                    ),
+                    children: count
+                  }
+                )
+              ] })
+            },
+            tab.value
+          );
+        }) }) })
+      }
+    )
+  ] });
+}
+export {
+  FilterChat as default
+};