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

package/components/customers-route/table/edit-fields.js

@@ -0,0 +1,125 @@
+import { format } from "date-fns";
+import { CustomerTypeContext, GenderOptions } from "@zenify-omni/chat-js/constants/user.js";
+const EDIT_PERMISSION = "2";
+const INLINE_EDITABLE_DYNAMIC_TYPES = /* @__PURE__ */ new Set([
+  "phone",
+  "text",
+  "textarea",
+  "number",
+  "date",
+  "select",
+  "multi-select",
+  "radio",
+  "checkbox"
+]);
+const normalizeMultiSelect = (values) => (values || []).map((item) => item?.value ?? item);
+const normalizeDate = (value) => {
+  if (!value) return null;
+  const date = value instanceof Date ? value : new Date(value);
+  return Number.isNaN(date.getTime()) ? null : date.toISOString();
+};
+const resolveOptionLabel = (data, value) => {
+  const option = (data || []).find(
+    (item) => String(item?.id ?? item) === String(value)
+  );
+  if (!option) return value;
+  return option.text ?? option;
+};
+const toDateInput = (value) => {
+  if (!value) return void 0;
+  const date = new Date(value);
+  return Number.isNaN(date.getTime()) ? void 0 : date;
+};
+const defaultRowPatch = (config, value) => ({
+  [config.key]: config.normalize ? config.normalize(value) : value
+});
+const withDefaults = (config) => ({
+  payloadKey: config.key,
+  allow_edit: true,
+  getInputValue: (row) => row.original[config.key],
+  ...config,
+  buildRowPatch: config.buildRowPatch || ((value) => defaultRowPatch(config, value))
+});
+function buildCustomerUpdate(fieldConfig, inputValue) {
+  if (typeof fieldConfig.buildPayload === "function") {
+    return fieldConfig.buildPayload(inputValue);
+  }
+  const value = fieldConfig.normalize ? fieldConfig.normalize(inputValue) : inputValue;
+  return { [fieldConfig.payloadKey || fieldConfig.key]: value };
+}
+const normalizeDobDate = (value) => value ? format(new Date(value), "yyyy-MM-dd") : null;
+function buildCustomerCoreFields({ organizes = [], groups = [], cities = [] }) {
+  return {
+    phone: withDefaults({ key: "phone", type: "phone" }),
+    email: withDefaults({ key: "email", type: "text" }),
+    dob: withDefaults({
+      key: "dob",
+      type: "date",
+      normalize: normalizeDobDate,
+      getInputValue: (row) => toDateInput(row.original.dob)
+    }),
+    // BE nhận `organization_id`; cột hiển thị resolve tên qua `organizes`.
+    organization: withDefaults({
+      key: "organization",
+      type: "select-v2",
+      payloadKey: "organization_id",
+      data: organizes,
+      getInputValue: (row) => row.original.organization_id ? String(row.original.organization_id) : null,
+      buildRowPatch: (value) => ({ organization_id: value || null })
+    }),
+    // BE nhận `group_id`; cột hiển thị resolve tên qua `groups`.
+    group: withDefaults({
+      key: "group",
+      type: "select-v2",
+      payloadKey: "group_id",
+      data: groups,
+      getInputValue: (row) => row.original.group_id ? String(row.original.group_id) : null,
+      buildRowPatch: (value) => ({ group_id: value || null })
+    }),
+    // Đổi thành phố -> reset quận huyện (đồng bộ màn chi tiết).
+    city: withDefaults({
+      key: "city",
+      type: "select-v2",
+      data: cities,
+      getInputValue: (row) => row.original.city_id ? String(row.original.city_id) : null,
+      buildPayload: (value) => ({ city_id: value || null, district_id: null }),
+      buildRowPatch: (value) => ({ city_id: value || null, district_id: null })
+    }),
+    // Quận huyện phụ thuộc thành phố -> editor riêng tự fetch theo city_id
+    // hiện tại của dòng (giống UserDetailBasicInfo), không dùng data tĩnh.
+    district_id: withDefaults({
+      key: "district_id",
+      type: "select-v2",
+      editor: "district",
+      getInputValue: (row) => row.original.district_id ? String(row.original.district_id) : null
+    }),
+    customer_type: withDefaults({
+      key: "customer_type",
+      type: "select-v2",
+      data: Object.entries(CustomerTypeContext).map(([id, text]) => ({
+        id,
+        text
+      }))
+    }),
+    gender: withDefaults({
+      key: "gender",
+      type: "select-v2",
+      data: GenderOptions
+    }),
+    address: withDefaults({ key: "address", type: "text" }),
+    // Editor riêng (tự fetch danh sách tag), lưu tường minh qua nút ✓/Ctrl+Enter.
+    tags: withDefaults({
+      key: "tags",
+      type: "multi-select",
+      editor: "tags",
+      payloadKey: "tag_ids",
+      getInputValue: (row) => row.original.tags || [],
+      buildPayload: (value) => ({ tag_ids: (value || []).map((t) => t._id) }),
+      buildRowPatch: (value) => ({ tags: value || [] })
+    })
+  };
+}
+export {
+  INLINE_EDITABLE_DYNAMIC_TYPES,
+  buildCustomerUpdate
+};

package/components/customers-route/table/editable-cell.js

@@ -0,0 +1,218 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useMemo } from "react";
+import { Check, LoaderCircle, X } from "lucide-react";
+import { toast } from "sonner";
+import { cn } from "../../../lib/utils.js";
+import { updateContact } from "@zenify-omni/chat-js/api/contact.js";
+import FieldGenerator from "../../custom/field-generator.js";
+import { CustomSelect } from "../../custom/custom-select.js";
+import MultipleSelectSettingTags from "../../custom/multiple-select-setting-tags.js";
+import { SettingTags } from "@zenify-omni/chat-js/constants/setting.js";
+import { useGetDistrictsByCityId } from "../../../hooks/use-setting-common.js";
+import { Button } from "../../custom/button.js";
+import { InlineEditPopover } from "../../custom/inline-edit-popover.js";
+import { useInlineEditableCell } from "../../../hooks/use-inline-editable-cell.js";
+import { throwException } from "../../../exceptions/throw-exception.js";
+import { isCustomerEditableByUser } from "@zenify-omni/chat-js/utils/customers.js";
+import { buildCustomerUpdate } from "./edit-fields.js";
+import { useTranslation } from "react-i18next";
+import i18n from "@zenify-omni/chat-js/lib/i18n/index.js";
+import { t } from "i18next";
+const DistrictEditor = ({ value, cityId, onChange, disabled }) => {
+  const { t: t2 } = useTranslation();
+  const { data: districts } = useGetDistrictsByCityId(cityId);
+  return /* @__PURE__ */ jsx(
+    CustomSelect,
+    {
+      size: "small",
+      isSearch: true,
+      isNullValue: true,
+      disabled: disabled || !cityId,
+      placeholder: t2("common:placeholder.selectDefault", {
+        defaultValue: "--Ch\u1ECDn--"
+      }),
+      value: value || null,
+      onChange,
+      options: (districts ?? []).map((option) => ({
+        label: option.name,
+        value: String(option.id)
+      }))
+    }
+  );
+};
+function EditableCell({
+  row,
+  fieldConfig,
+  displayNode,
+  onSaved,
+  triggerClassName,
+  editingClassName
+}) {
+  const {
+    containerRef,
+    isEditing,
+    isSaving,
+    value,
+    isComplex,
+    saveMode,
+    startEditing,
+    cancel,
+    save,
+    handleChange,
+    handleKeyDown
+  } = useInlineEditableCell({
+    row,
+    fieldConfig,
+    onSave: async (nextValue) => {
+      try {
+        const payload = buildCustomerUpdate(fieldConfig, nextValue);
+        const response = await updateContact({
+          id: row.original._id,
+          data: payload
+        });
+        if (response?.error || response?.status && response.status >= 400) {
+          throw response;
+        }
+        const rowPatch = fieldConfig.buildRowPatch ? fieldConfig.buildRowPatch(nextValue) : {
+          [fieldConfig.key]: payload[fieldConfig.payloadKey || fieldConfig.key]
+        };
+        onSaved(row.original._id, rowPatch, response?.data);
+        toast.success(
+          i18n.t("common:toast.updateSuccess", {
+            defaultValue: "C\u1EADp nh\u1EADt th\xE0nh c\xF4ng"
+          })
+        );
+      } catch (error) {
+        throwException(error);
+        throw error;
+      }
+    }
+  });
+  const canEdit = useMemo(
+    () => fieldConfig.allow_edit && isCustomerEditableByUser(row.original),
+    [fieldConfig.allow_edit, row.original]
+  );
+  if (!canEdit) {
+    return /* @__PURE__ */ jsx("div", { className: "min-w-0 flex-1 truncate px-3.5", children: displayNode });
+  }
+  const data = fieldConfig.getData?.(row) ?? fieldConfig.data;
+  const renderEditor = () => {
+    if (fieldConfig.editor === "district") {
+      return /* @__PURE__ */ jsx(
+        DistrictEditor,
+        {
+          value,
+          cityId: row.original.city_id,
+          disabled: isSaving,
+          onChange: (nextValue) => handleChange(nextValue)
+        }
+      );
+    }
+    if (fieldConfig.editor === "tags") {
+      return /* @__PURE__ */ jsx(
+        MultipleSelectSettingTags,
+        {
+          target: SettingTags.CONTACT,
+          selected: value || [],
+          onChange: handleChange,
+          disabled: isSaving,
+          size: "small"
+        }
+      );
+    }
+    return /* @__PURE__ */ jsx(
+      FieldGenerator,
+      {
+        autoFocus: true,
+        field: fieldConfig.field || fieldConfig,
+        type: fieldConfig.type,
+        data,
+        value,
+        onChange: handleChange,
+        disabled: isSaving,
+        disabledAutoFill: true,
+        showTimeComponent: fieldConfig.showTime,
+        align: "end",
+        size: "small",
+        className: "h-7 min-h-7 focus-visible:ring-0 focus-visible:ring-offset-0"
+      }
+    );
+  };
+  const trigger = /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn(
+        "absolute inset-0 z-0 flex cursor-text items-center truncate rounded px-3.5 ring-1 ring-inset ring-transparent transition-colors hover:bg-muted/60 hover:ring-border/90",
+        triggerClassName
+      ),
+      onClick: startEditing,
+      children: displayNode
+    }
+  );
+  if (isComplex) {
+    return /* @__PURE__ */ jsx(
+      InlineEditPopover,
+      {
+        open: isEditing,
+        trigger,
+        onSave: () => void save(),
+        onCancel: cancel,
+        isSaving,
+        children: renderEditor()
+      }
+    );
+  }
+  if (!isEditing) {
+    return trigger;
+  }
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref: containerRef,
+      className: cn("flex min-w-0 items-center gap-1", editingClassName),
+      onClick: (event) => event.stopPropagation(),
+      onKeyDown: handleKeyDown,
+      children: [
+        /* @__PURE__ */ jsx("div", { className: "min-w-0 flex-1", children: renderEditor() }),
+        isSaving && /* @__PURE__ */ jsx(
+          LoaderCircle,
+          {
+            "aria-label": t("common:status.saving", { defaultValue: "\u0110ang l\u01B0u" }),
+            className: "h-3.5 w-3.5 shrink-0 animate-spin"
+          }
+        ),
+        saveMode === "explicit" && !isSaving && /* @__PURE__ */ jsx(
+          Button,
+          {
+            type: "button",
+            size: "icon",
+            variant: "ghost",
+            "aria-label": t("common:action.saveChanges", {
+              defaultValue: "L\u01B0u thay \u0111\u1ED5i"
+            }),
+            className: "h-6 w-6 shrink-0",
+            onClick: () => void save(),
+            children: /* @__PURE__ */ jsx(Check, { className: "h-3.5 w-3.5" })
+          }
+        ),
+        !isSaving && /* @__PURE__ */ jsx(
+          Button,
+          {
+            type: "button",
+            size: "icon",
+            variant: "ghost",
+            "aria-label": t("common:action.cancelEdit", {
+              defaultValue: "H\u1EE7y ch\u1EC9nh s\u1EEDa"
+            }),
+            className: "h-6 w-6 shrink-0",
+            onClick: cancel,
+            children: /* @__PURE__ */ jsx(X, { className: "h-3.5 w-3.5" })
+          }
+        )
+      ]
+    }
+  );
+}
+export {
+  EditableCell
+};

package/components/customers-route/table/note-cell.js

@@ -0,0 +1,77 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { useTranslation } from "react-i18next";
+import { Eye, MessageSquarePlus } from "lucide-react";
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger
+} from "../../ui/popover.js";
+import SafeHTML from "../../custom/SafeHTML.js";
+import ContactNoteButton from "../contact-note-button.js";
+import { notFoundValue } from "@zenify-omni/chat-js/constants/common.js";
+import { maskData } from "@zenify-omni/chat-js/utils/data.js";
+import { htmlToPlainText } from "../../../utils/html-to-plain-text.js";
+const PREVIEW_CHAR_LIMIT = 80;
+function NoteCell({ contact, comment, onSaved }) {
+  const { t } = useTranslation();
+  const [viewOpen, setViewOpen] = useState(false);
+  const plain = comment?.content ? htmlToPlainText(comment.content) : "";
+  const isOverflowing = plain.length > PREVIEW_CHAR_LIMIT;
+  const maskedPreview = plain ? maskData(
+    isOverflowing ? `${plain.slice(0, PREVIEW_CHAR_LIMIT).trimEnd()}\u2026` : plain
+  ) : notFoundValue;
+  return /* @__PURE__ */ jsxs("div", { className: "group/comment flex min-w-0 items-center gap-1", children: [
+    /* @__PURE__ */ jsx("span", { className: "min-w-0 flex-1 truncate", children: maskedPreview }),
+    isOverflowing && /* @__PURE__ */ jsxs(Popover, { open: viewOpen, onOpenChange: setViewOpen, children: [
+      /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          "aria-label": t("common:action.viewFullNote", {
+            defaultValue: "Xem \u0111\u1EA7y \u0111\u1EE7 ghi ch\xFA"
+          }),
+          className: "shrink-0 text-muted-foreground hover:text-foreground",
+          onClick: (event) => event.stopPropagation(),
+          children: /* @__PURE__ */ jsx(Eye, { className: "h-3.5 w-3.5" })
+        }
+      ) }),
+      /* @__PURE__ */ jsx(
+        PopoverContent,
+        {
+          align: "end",
+          className: "max-h-[60vh] w-96 overflow-y-auto text-sm",
+          onClick: (event) => event.stopPropagation(),
+          children: /* @__PURE__ */ jsx(SafeHTML, { html: maskData(comment.content), allowStyledRtf: true })
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx(
+      ContactNoteButton,
+      {
+        contact,
+        align: "end",
+        onSaved: (contactId, data, text) => {
+          const created = data && typeof data === "object" ? { ...data, content: data.content ?? text } : { content: text };
+          onSaved?.(contactId, { last_comment: created });
+        },
+        trigger: () => /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            "aria-label": t("common:action.addNote", {
+              defaultValue: "Th\xEAm ghi ch\xFA"
+            }),
+            className: "shrink-0 text-muted-foreground opacity-0 transition-opacity hover:text-foreground focus:opacity-100 group-hover/comment:opacity-100",
+            onClick: (event) => event.stopPropagation(),
+            children: /* @__PURE__ */ jsx(MessageSquarePlus, { className: "h-3.5 w-3.5" })
+          }
+        )
+      }
+    )
+  ] });
+}
+export {
+  NoteCell,
+  PREVIEW_CHAR_LIMIT
+};