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

package/hooks/use-setting-common.js

@@ -0,0 +1,389 @@
+import i18n from "@zenify-omni/chat-js/lib/i18n/index.js";
+import { useQuery } from "@tanstack/react-query";
+import {
+  getAllAgent,
+  getAllFieldTicket,
+  getAllQueues
+} from "@zenify-omni/chat-js/api/report.js";
+import {
+  getCustomerExtraFields,
+  getCustomerGroups
+} from "@zenify-omni/chat-js/api/customer.js";
+import { getCities, getDistrictsByCityId } from "@zenify-omni/chat-js/api/settings.js";
+import { getUserGroups } from "@zenify-omni/chat-js/api/user.js";
+import { getZalosAllocated } from "@zenify-omni/chat-js/api/settings/channel.js";
+import { getSettingUserConfig } from "@zenify-omni/chat-js/api/settings/common.js";
+import { getUser } from "@zenify-omni/chat-js/utils/auth.js";
+import { throwException } from "../exceptions/throw-exception.js";
+import QUERY_KEY from "@zenify-omni/chat-js/constants/use-query-key.js";
+import { getZaloGroupInfo } from "@zenify-omni/chat-js/api/chat.js";
+import { getDistricts } from "@zenify-omni/chat-js/api/settings.js";
+import { getListSocialPage } from "@zenify-omni/chat-js/api/chat.js";
+import {
+  getQueue as getAllQueueV3,
+  getQueueDetail
+} from "@zenify-omni/chat-js/api/settings/queue-v3.js";
+const emptyData = [];
+function useAllAgent() {
+  const { data: queryData } = useQuery({
+    queryKey: [QUERY_KEY.GET_ALL_AGENTS],
+    queryFn: async () => {
+      try {
+        const resp = await getAllAgent();
+        return resp.data.list;
+      } catch (error) {
+        throwException(error);
+        return [];
+      }
+    },
+    staleTime: 60 * 1e3 * 30
+    // 30 minutes
+  });
+  return queryData || emptyData;
+}
+function useAllFieldTicket(systemType = "dynamic", options = {}) {
+  const { data: queryData } = useQuery({
+    ...options,
+    queryKey: [
+      QUERY_KEY.GET_ALL_TICKET_FIELDS,
+      {
+        system_type: systemType
+      }
+    ],
+    queryFn: async () => {
+      try {
+        const params = {
+          target: "ticket"
+        };
+        if (systemType === "all") {
+          params.system_type = systemType;
+        }
+        const resp = await getAllFieldTicket({ params });
+        return (resp?.data || []).sort(
+          (a, b) => (a.order ?? 0) - (b.order ?? 0)
+        );
+      } catch (error) {
+        throwException(error);
+        return [];
+      }
+    },
+    staleTime: 60 * 1e3 * 30
+    // 30 minutes
+  });
+  return queryData || emptyData;
+}
+function useAllFieldUser(refreshField = null, systemType = "dynamic") {
+  const { data: queryData } = useQuery({
+    queryKey: [
+      QUERY_KEY.GET_ALL_USER_FIELDS,
+      ...refreshField ? [refreshField] : [],
+      { system_type: systemType }
+    ],
+    queryFn: async () => {
+      try {
+        const params = {
+          target: "user"
+        };
+        if (systemType === "all") {
+          params.system_type = "all";
+        }
+        const resp = await getCustomerExtraFields({ params });
+        return (resp?.data || []).sort(
+          (a, b) => (a.order ?? 0) - (b.order ?? 0)
+        );
+      } catch (error) {
+        throwException(error);
+        return [];
+      }
+    },
+    staleTime: 60 * 1e3 * 30
+    // 30 minutes
+  });
+  return queryData || emptyData;
+}
+function useAllFieldContact(systemType = "dynamic") {
+  const { data: queryData } = useQuery({
+    queryKey: [QUERY_KEY.GET_ALL_CONTACT_FIELDS, { system_type: systemType }],
+    queryFn: async () => {
+      try {
+        const params = {
+          target: "contact"
+        };
+        if (systemType === "all") {
+          params.system_type = "all";
+        }
+        const resp = await getCustomerExtraFields({ params });
+        return (resp?.data || []).sort(
+          (a, b) => (a.order ?? 0) - (b.order ?? 0)
+        );
+      } catch (error) {
+        throwException(error);
+        return [];
+      }
+    },
+    staleTime: 60 * 1e3 * 30
+    // 30 minutes
+  });
+  return queryData || emptyData;
+}
+function useAllQueues({
+  service_id,
+  queue_manager_id,
+  type,
+  is_count_agent = false
+} = {}) {
+  const { data: queryData } = useQuery({
+    queryKey: [
+      QUERY_KEY.GET_ALL_QUEUES,
+      service_id,
+      queue_manager_id,
+      is_count_agent
+    ],
+    queryFn: async () => {
+      try {
+        const resp = await getAllQueues({
+          service_id,
+          queue_manager_id,
+          type,
+          is_count_agent
+        });
+        return resp.data;
+      } catch (error) {
+        throwException(error);
+        return [];
+      }
+    },
+    staleTime: 60 * 1e3 * 30
+    // 30 minutes
+  });
+  return queryData || emptyData;
+}
+function useAllCustomerGroups() {
+  const { data: queryData } = useQuery({
+    queryKey: [QUERY_KEY.GET_ALL_CUSTOMER_GROUPS],
+    queryFn: async () => {
+      try {
+        const resp = await getCustomerGroups();
+        return resp.data.map((item) => {
+          return {
+            id: String(item.id),
+            text: item.name
+          };
+        });
+      } catch (error) {
+        throwException(error);
+        return [];
+      }
+    },
+    staleTime: 60 * 1e3 * 30
+    // 30 minutes
+  });
+  return queryData || emptyData;
+}
+function useAllUserGroups() {
+  const { data: queryData } = useQuery({
+    queryKey: [QUERY_KEY.GET_ALL_USER_GROUPS],
+    queryFn: async () => {
+      try {
+        const resp = await getUserGroups();
+        return resp.data.map((item) => {
+          return {
+            id: String(item.id),
+            text: item.name
+          };
+        });
+      } catch (error) {
+        throwException(error);
+        return [];
+      }
+    },
+    staleTime: 60 * 1e3 * 30
+    // 30 minutes
+  });
+  return queryData || emptyData;
+}
+function useAllCities(params) {
+  const { data: queryData } = useQuery({
+    queryKey: [QUERY_KEY.GET_ALL_CITIES, params],
+    queryFn: async () => {
+      try {
+        const resp = await getCities(params);
+        return resp.data.cities.map((item) => {
+          return {
+            id: String(item.id),
+            text: item.name
+          };
+        });
+      } catch (error) {
+        throwException(error);
+        return [];
+      }
+    },
+    staleTime: 60 * 1e3 * 30
+    // 30 minutes
+  });
+  return queryData || emptyData;
+}
+function useAllDistricts() {
+  const { data: queryData } = useQuery({
+    queryKey: [QUERY_KEY.GET_ALL_DISTRICTS],
+    queryFn: async () => {
+      try {
+        const { data } = await getDistricts({
+          params: {}
+        });
+        return data?.districts ?? [];
+      } catch (error) {
+        throwException(error);
+        return [];
+      }
+    },
+    staleTime: 60 * 1e3 * 30
+    // 30 minutes
+  });
+  return queryData || emptyData;
+}
+function useUserConfig() {
+  const baseData = {
+    report_user_group_table_columns: "",
+    ticket_table_columns: "",
+    user_table_columns: "",
+    detail_user_table_columns: "",
+    campaign_report_columns: "",
+    agent_campaign_table_columns: "",
+    contact_campaign_table_columns: "",
+    ad_funnel_report_columns: "",
+    ad_funnel_report_by_source_columns: "",
+    chat_show_info_contact: "",
+    survey_columns: ""
+  };
+  const user = getUser();
+  const { data: queryData } = useQuery({
+    queryKey: [QUERY_KEY.GET_USER_CONFIGURATION, { userId: user?._id }],
+    queryFn: async () => {
+      try {
+        const { data, error } = await getSettingUserConfig();
+        return error || !data ? {} : data;
+      } catch (error) {
+        throwException(error);
+        return {};
+      }
+    },
+    staleTime: 60 * 1e3 * 30
+    // 30 minutes
+  });
+  return queryData || baseData;
+}
+function useGetDistrictsByCityId(cityId, options = {}) {
+  return useQuery({
+    enabled: !!cityId,
+    queryKey: [`${QUERY_KEY.GET_ALL_DISTRICT_BY_CITY_ID}/${cityId}`],
+    queryFn: () => getDistrictsByCityId({ city_id: cityId }).then(
+      (response) => response?.data?.districts ?? []
+    ),
+    ...options
+  });
+}
+function useGetListSocialPage() {
+  return useQuery({
+    queryKey: [QUERY_KEY.GET_LIST_SOCIAL_PAGE],
+    queryFn: async () => {
+      const { data } = await getListSocialPage();
+      return data;
+    },
+    staleTime: 60 * 1e3 * 30
+    // 30 minutes
+  });
+}
+function useGetZaloAllocatedList(user) {
+  return useQuery({
+    enabled: !!user?._id,
+    queryKey: [QUERY_KEY.GET_ZALOS_ALLOCATED, user?._id],
+    // Danh sách zalo được cấp phát gần như tĩnh trong phiên -> cache vô thời hạn,
+    // không refetch khi remount. Khi đổi (add-friend...) đã có invalidateQueries
+    // ép refetch nên không lo cache cũ.
+    staleTime: Infinity,
+    queryFn: async () => {
+      try {
+        const { data } = await getZalosAllocated({
+          user_id: user?._id,
+          agent_id: user?.agent_id,
+          tenant_id: user?.tenant_id
+        });
+        return data?.data || [];
+      } catch (error) {
+        throwException({ message: error.response.data?.error?.message });
+        return [];
+      }
+    }
+  });
+}
+function useGetZaloGroupInfo({ zaloId, groupId, ...options }) {
+  return useQuery({
+    enabled: !!groupId && !!zaloId,
+    queryKey: ["ZaloGroupPanel", groupId],
+    staleTime: 30 * 60 * 1e3,
+    queryFn: async () => {
+      try {
+        const { data } = await getZaloGroupInfo({
+          zaloId,
+          groupId
+        });
+        return data?.data;
+      } catch (error) {
+        if (error.response?.data?.error?.error_code === "GROUP_NOT_FOUND" && options?.onGroupNotFound && typeof options.onGroupNotFound === "function") {
+          options.onGroupNotFound(error);
+          throwException({
+            message: i18n.t("common:message.groupNotFound", {
+              defaultValue: "Nh\xF3m kh\xF4ng t\u1ED3n t\u1EA1i"
+            })
+          });
+          return null;
+        } else {
+          throwException({ message: error.response?.data?.error?.message });
+          return null;
+        }
+      }
+    },
+    ...options
+  });
+}
+function useGetAllQueuesV3({ params, options = {} }) {
+  return useQuery({
+    queryKey: [QUERY_KEY.GET_LIST_QUEUE],
+    queryFn: async () => {
+      const data = await getAllQueueV3({ params });
+      return data?.items || [];
+    },
+    ...options
+  });
+}
+function useGetQueueDetail({ queueId, options = {} } = {}) {
+  return useQuery({
+    enabled: !!queueId,
+    queryKey: [QUERY_KEY.GET_LIST_QUEUE, { queueId }],
+    queryFn: async () => {
+      const data = await getQueueDetail({ id: queueId });
+      return data;
+    },
+    ...options
+  });
+}
+export {
+  useAllAgent,
+  useAllCities,
+  useAllCustomerGroups,
+  useAllDistricts,
+  useAllFieldContact,
+  useAllFieldTicket,
+  useAllFieldUser,
+  useAllQueues,
+  useAllUserGroups,
+  useGetAllQueuesV3,
+  useGetDistrictsByCityId,
+  useGetListSocialPage,
+  useGetQueueDetail,
+  useGetZaloAllocatedList,
+  useGetZaloGroupInfo,
+  useUserConfig
+};

package/hooks/use-settings.js

@@ -0,0 +1,41 @@
+import { useQuery } from "@tanstack/react-query";
+import { getSettings } from "@zenify-omni/chat-js/api/settings.js";
+import { throwException } from "../exceptions/throw-exception.js";
+import QUERY_KEY from "@zenify-omni/chat-js/constants/use-query-key.js";
+import { setMaskDataConfig } from "@zenify-omni/chat-js/utils/data.js";
+const emptyData = {
+  priorities: [],
+  agent_status: [],
+  feedback_templates: [],
+  types: [],
+  groups: [],
+  organizations: [],
+  ticket_status: [],
+  macro_comment: [],
+  source: [],
+  source_detail: [],
+  data_masking_config: []
+};
+function useSettings() {
+  const { data: queryData } = useQuery({
+    queryKey: [QUERY_KEY.GET_SETTING_DASHBOARD],
+    queryFn: async () => {
+      try {
+        const resp = await getSettings();
+        return resp.data;
+      } catch (error) {
+        throwException(error);
+        return [];
+      }
+    },
+    staleTime: 60 * 1e3 * 30
+    // 30 minutes
+  });
+  if (queryData?.data_masking_config) {
+    setMaskDataConfig(queryData.data_masking_config);
+  }
+  return queryData || emptyData;
+}
+export {
+  useSettings
+};

package/hooks/use-sort-bindings.js

@@ -0,0 +1,24 @@
+import { useShallow } from "zustand/react/shallow";
+import { useCrmOrganizationListFilterStore } from "../store/crm-organization-list-filter-store.js";
+import { useCustomerListFilterStore } from "../store/customer-list-filter-store.js";
+import { useSmartQcListFilterStore } from "../store/smart-qc-store/smart-qc-list-filter-store.js";
+import { useLeadListFilterStore } from "../store/lead-list-filter-store.js";
+import { useFacebookListStore } from "../store/settings-store/multi-channel/facebook-list-store.js";
+import { useZaloUserListStore } from "../store/settings-store/multi-channel/zalo-user-list-store.js";
+import { useInstagramListStore } from "../store/settings-store/multi-channel/instagram-list-store.js";
+import { useTiktokBusinessListStore } from "../store/settings-store/multi-channel/tiktok-business-list-store.js";
+import { useShopeeOrderListStore } from "../store/settings-store/multi-channel/shopee-order-list-store.js";
+const selectSort = (s) => ({ sortBy: s.sortBy, setSort: s.setSort });
+useCrmOrganizationListFilterStore(useShallow(selectSort));
+const useContactSort = () => useCustomerListFilterStore(useShallow(selectSort));
+useSmartQcListFilterStore(useShallow(selectSort));
+const useLeadSort = () => useLeadListFilterStore(useShallow(selectSort));
+useFacebookListStore(useShallow(selectSort));
+useZaloUserListStore(useShallow(selectSort));
+useInstagramListStore(useShallow(selectSort));
+useTiktokBusinessListStore(useShallow(selectSort));
+useShopeeOrderListStore(useShallow(selectSort));
+export {
+  useContactSort,
+  useLeadSort
+};

package/hooks/use-tenant-config.js

@@ -0,0 +1,99 @@
+import { useQuery } from "@tanstack/react-query";
+import QUERY_KEY from "@zenify-omni/chat-js/constants/use-query-key.js";
+import { getConfigs } from "@zenify-omni/chat-js/api/settings/config.js";
+import { TenantConfigType } from "@zenify-omni/chat-js/constants/tenant_config.js";
+import { throwException } from "../exceptions/throw-exception.js";
+const emptyData = [];
+const CATALOG_STALE_TIME = Infinity;
+function useGetViewTenantConfig() {
+  const { data: queryData, isLoading } = useQuery({
+    queryKey: [QUERY_KEY.GET_VIEW_TENANT_CONFIG],
+    queryFn: async () => {
+      try {
+        const resp = await getConfigs({ type: TenantConfigType.VIEW });
+        return resp.data;
+      } catch (error) {
+        throwException(error);
+        return [];
+      }
+    },
+    staleTime: CATALOG_STALE_TIME
+  });
+  return { data: queryData || emptyData, isLoading };
+}
+function useGetActionTenantConfig() {
+  const { data: queryData, isLoading } = useQuery({
+    // Must be GET_ACTION_TENANT_CONFIG, not GET_DATA_*: the ACTION save site
+    // (configs/view/index.jsx) invalidates [GET_ACTION_TENANT_CONFIG]. With the
+    // wrong key + staleTime:Infinity this query never saw its own save and the
+    // action-permission catalog stayed stale for the whole session.
+    queryKey: [QUERY_KEY.GET_ACTION_TENANT_CONFIG, TenantConfigType.ACTION],
+    queryFn: async () => {
+      try {
+        const resp = await getConfigs({ type: TenantConfigType.ACTION });
+        return resp.data;
+      } catch (error) {
+        throwException(error);
+        return [];
+      }
+    },
+    staleTime: CATALOG_STALE_TIME
+  });
+  return { data: queryData || emptyData, isLoading };
+}
+function useGetFeatureTenantConfig(tenantId) {
+  const { data: queryData, isLoading } = useQuery({
+    queryKey: [
+      QUERY_KEY.GET_FEATURE_TENANT_CONFIG,
+      { tenant_id: tenantId || "local" }
+    ],
+    queryFn: async () => {
+      try {
+        const resp = await getConfigs({
+          type: TenantConfigType.FEATURE,
+          ...tenantId ? { tenant_id: tenantId } : {}
+        });
+        return resp.data;
+      } catch (error) {
+        throwException(error);
+        return [];
+      }
+    },
+    staleTime: CATALOG_STALE_TIME
+  });
+  return { data: queryData || emptyData, isLoading };
+}
+function useGetConfigTenantConfig(tenantId) {
+  const { data: queryData, isLoading } = useQuery({
+    queryKey: [
+      QUERY_KEY.GET_CONFIG_TENANT_CONFIG,
+      { tenant_id: tenantId || "local" }
+    ],
+    queryFn: async () => {
+      try {
+        const resp = await getConfigs({
+          type: TenantConfigType.CONFIG,
+          ...tenantId ? { tenant_id: tenantId } : {}
+        });
+        return resp.data;
+      } catch (error) {
+        throwException(error);
+        return [];
+      }
+    },
+    staleTime: CATALOG_STALE_TIME
+  });
+  return { data: queryData || emptyData, isLoading };
+}
+function useGetConfigByKey(key) {
+  const { data: queryData, isLoading } = useGetConfigTenantConfig();
+  const res = queryData.find((config) => config.key === key);
+  return { data: res || null, isLoading };
+}
+export {
+  useGetActionTenantConfig,
+  useGetConfigByKey,
+  useGetConfigTenantConfig,
+  useGetFeatureTenantConfig,
+  useGetViewTenantConfig
+};