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

package/components/customers-route/table/columns.js

@@ -0,0 +1,675 @@
+import { jsx } from "react/jsx-runtime";
+import { format, isValid } from "date-fns";
+import { maskData } from "@zenify-omni/chat-js/utils/data.js";
+import CustomerSource from "../customer-source.js";
+import { formatDayWithTime } from "@zenify-omni/chat-js/utils/date.js";
+import {
+  GenderContext,
+  CustomerTypeContext,
+  ConversionSourceOptions
+} from "@zenify-omni/chat-js/constants/user.js";
+import { notFoundValue } from "@zenify-omni/chat-js/constants/common.js";
+import { AttributeFieldType } from "@zenify-omni/chat-js/constants/setting.js";
+import PreviewListFiles from "../../custom/field-file-upload/preview-list-file.js";
+import PreviewListImage from "../../custom/field-file-upload/preview-list-image.js";
+import { formatLinkToPreviewImage } from "../../custom/field-file-upload/image-upload.js";
+import { RenderContactCellName } from "../../leads-route/table/contact-cell-name.js";
+import { Checkbox } from "../../ui/checkbox.js";
+import { makeSortableHeader } from "../../custom/sortable-header.js";
+import { useContactSort } from "../../../hooks/use-sort-bindings.js";
+import { CUSTOM_FIELD_SORT_RE } from "@zenify-omni/chat-js/constants/sortable-fields.js";
+import { EditableCell } from "./editable-cell.js";
+import { NoteCell } from "./note-cell.js";
+import i18n from "@zenify-omni/chat-js/lib/i18n/index.js";
+function getColumns({
+  customerFields,
+  organizes,
+  groups,
+  cities,
+  districts,
+  leadSourceData,
+  handleNavigateDetail,
+  editFields,
+  onSaved,
+  onQuickView,
+  isAllSelected,
+  onDeselectAll,
+  isCustomerCodeEnabled
+}) {
+  const columns = [
+    {
+      id: "select",
+      size: 50,
+      isNotResize: true,
+      header: ({ table }) => /* @__PURE__ */ jsx(
+        Checkbox,
+        {
+          checked: isAllSelected || table.getIsAllPageRowsSelected() || table.getIsSomePageRowsSelected() && "indeterminate",
+          onCheckedChange: (value) => {
+            if (isAllSelected) {
+              onDeselectAll?.();
+              return;
+            }
+            table.toggleAllPageRowsSelected(!!value);
+          },
+          "aria-label": "Select all",
+          className: "translate-y-[2px]"
+        }
+      ),
+      cell: ({ row }) => /* @__PURE__ */ jsx(
+        Checkbox,
+        {
+          checked: isAllSelected || row.getIsSelected(),
+          "aria-label": "Select row",
+          className: "translate-y-[2px]",
+          onClick: (e) => {
+            e.stopPropagation();
+            if (isAllSelected) {
+              onDeselectAll?.();
+              return;
+            }
+            const checkbox = e.target;
+            const checked = checkbox.getAttribute("data-state") === "unchecked";
+            row.toggleSelected(checked);
+          }
+        }
+      ),
+      className: "w-10 !min-w-10 !max-w-10"
+    },
+    {
+      accessorKey: "name",
+      size: 220,
+      minSize: 220,
+      className: "cursor-pointer text-sm font-medium text-primary underline hover:opacity-75",
+      header: makeSortableHeader(
+        "common:label.customerName",
+        "name",
+        useContactSort,
+        "T\xEAn kh\xE1ch h\xE0ng"
+      ),
+      cell: ({ row }) => {
+        return /* @__PURE__ */ jsx(
+          RenderContactCellName,
+          {
+            row,
+            handleNavigateDetail,
+            onQuickView
+          },
+          row.original._id
+        );
+      }
+    },
+    {
+      accessorKey: "code",
+      header: makeSortableHeader(
+        "common:label.customerCode",
+        "code",
+        useContactSort,
+        "M\xE3 kh\xE1ch h\xE0ng"
+      ),
+      cell: ({ row }) => {
+        return row.getValue("code") ?? notFoundValue;
+      }
+    },
+    {
+      accessorKey: "phone",
+      header: makeSortableHeader(
+        "common:label.phone",
+        "phone",
+        useContactSort,
+        "S\u1ED1 \u0111i\u1EC7n tho\u1EA1i"
+      ),
+      cell: ({ row }) => {
+        return row.getValue("phone") ? maskData(row.getValue("phone")) : notFoundValue;
+      }
+    },
+    {
+      accessorKey: "email",
+      header: makeSortableHeader("Email", "email", useContactSort),
+      cell: ({ row }) => {
+        return row.getValue("email") && row.getValue("email") !== " " ? maskData(row.getValue("email")) : notFoundValue;
+      }
+    },
+    {
+      accessorKey: "dob",
+      header: makeSortableHeader(
+        "common:label.dob",
+        "dob",
+        useContactSort,
+        "Ng\xE0y sinh"
+      ),
+      className: "!min-w-[80px]",
+      cell: ({ row }) => {
+        let date = row.getValue("dob");
+        return date && typeof date == "string" ? format(new Date(date), "dd/MM/yyyy") : notFoundValue;
+      }
+    },
+    {
+      accessorKey: "source",
+      header: makeSortableHeader(
+        "customer:field.sourceChannel",
+        "source",
+        useContactSort,
+        "K\xEAnh kh\u1EDFi t\u1EA1o"
+      ),
+      cell: ({ row }) => {
+        return /* @__PURE__ */ jsx(CustomerSource, { className: "justify-start", customer: row.original });
+      }
+    },
+    {
+      accessorKey: "organization",
+      // BE nhận `organization_name` (denormalize snapshot).
+      header: makeSortableHeader(
+        "common:label.organization",
+        "organization_name",
+        useContactSort,
+        "T\u1ED5 ch\u1EE9c"
+      ),
+      cell: ({ row }) => {
+        const organizationId = row.original.organization_id;
+        if (!organizationId) {
+          return notFoundValue;
+        }
+        const organization = organizes.find(
+          (x) => x.id === String(organizationId)
+        );
+        return organization?.text ?? notFoundValue;
+      }
+    },
+    {
+      accessorKey: "group",
+      // BE nhận `group_name`.
+      header: makeSortableHeader(
+        "common:label.customerGroup",
+        "group_name",
+        useContactSort,
+        "Nh\xF3m kh\xE1ch h\xE0ng"
+      ),
+      cell: ({ row }) => {
+        const groupId = row.original.group_id;
+        if (!groupId) {
+          return notFoundValue;
+        }
+        const group = groups.find((x) => x.id === String(groupId));
+        return group?.text ?? notFoundValue;
+      }
+    },
+    {
+      accessorKey: "city",
+      // BE nhận `city_name`.
+      header: makeSortableHeader(
+        "common:label.city",
+        "city_name",
+        useContactSort,
+        "Th\xE0nh ph\u1ED1"
+      ),
+      cell: ({ row }) => {
+        const cityId = row.original.city_id;
+        if (!cityId) {
+          return notFoundValue;
+        }
+        const city = cities.find((x) => x.id === String(cityId));
+        return city?.text ?? notFoundValue;
+      }
+    },
+    {
+      accessorKey: "district_id",
+      // BE nhận `district_name`.
+      header: makeSortableHeader(
+        "common:label.district",
+        "district_name",
+        useContactSort,
+        "Qu\u1EADn huy\u1EC7n"
+      ),
+      cell: ({ row }) => {
+        const district = districts?.find(
+          (e) => e.id == row.getValue("district_id")
+        );
+        return district?.name || notFoundValue;
+      }
+    },
+    {
+      accessorKey: "created_at",
+      header: makeSortableHeader(
+        "common:label.initTime",
+        "created_at",
+        useContactSort,
+        "Th\u1EDDi gian kh\u1EDFi t\u1EA1o"
+      ),
+      cell: ({ row }) => {
+        return formatDayWithTime(row.getValue("created_at"));
+      }
+    },
+    {
+      accessorKey: "updated_at",
+      header: makeSortableHeader(
+        "common:label.lastUpdated",
+        "updated_at",
+        useContactSort,
+        "C\u1EADp nh\u1EADt l\u1EA7n cu\u1ED1i"
+      ),
+      cell: ({ row }) => {
+        return formatDayWithTime(row.getValue("updated_at"));
+      }
+    },
+    {
+      accessorKey: "customer_type",
+      // BE nhận field `crm_type` (xem SORT_FIELD_ALIASES).
+      header: makeSortableHeader(
+        "common:label.customerTier",
+        "crm_type",
+        useContactSort,
+        "H\u1EA1ng kh\xE1ch h\xE0ng"
+      ),
+      cell: ({ row }) => {
+        const customerTypeId = row.getValue("customer_type");
+        return CustomerTypeContext[customerTypeId] ?? notFoundValue;
+      }
+    },
+    {
+      accessorKey: "gender",
+      header: makeSortableHeader(
+        "common:label.gender",
+        "gender",
+        useContactSort,
+        "Gi\u1EDBi t\xEDnh"
+      ),
+      cell: ({ row }) => {
+        const gender = row.getValue("gender");
+        return GenderContext[gender] ?? notFoundValue;
+      }
+    },
+    {
+      accessorKey: "note",
+      header: () => /* @__PURE__ */ jsx("div", { children: i18n.t("common:label.note", { defaultValue: "Ghi ch\xFA" }) }),
+      cell: ({ row }) => /* @__PURE__ */ jsx(
+        NoteCell,
+        {
+          contact: row.original,
+          comment: row.original.last_comment,
+          onSaved
+        }
+      )
+    },
+    {
+      accessorKey: "address",
+      header: makeSortableHeader(
+        "common:label.address",
+        "address",
+        useContactSort,
+        "\u0110\u1ECBa ch\u1EC9"
+      ),
+      cell: ({ row }) => {
+        const address = row.getValue("address");
+        return address ?? notFoundValue;
+      }
+    },
+    {
+      accessorKey: "facebook",
+      header: () => /* @__PURE__ */ jsx("div", { children: "Facebook" }),
+      cell: ({ row }) => {
+        return row.getValue("facebook")?.join(",") ?? notFoundValue;
+      }
+    },
+    {
+      accessorKey: "sub_phone",
+      header: () => /* @__PURE__ */ jsx("div", { children: i18n.t("common:label.secondaryPhone", {
+        defaultValue: "S\u1ED1 \u0111i\u1EC7n tho\u1EA1i ph\u1EE5"
+      }) }),
+      cell: ({ row }) => {
+        const subPhone = row.getValue("sub_phone") ?? notFoundValue;
+        return subPhone && subPhone !== notFoundValue && subPhone.length > 0 ? maskData(subPhone?.join(", ")) : notFoundValue;
+      }
+    },
+    {
+      accessorKey: "sub_email",
+      header: () => /* @__PURE__ */ jsx("div", { children: i18n.t("common:label.secondaryEmail", { defaultValue: "Email ph\u1EE5" }) }),
+      cell: ({ row }) => {
+        const sub_email = row.getValue("sub_email");
+        return sub_email?.length > 0 ? maskData(sub_email.join(", ")) : notFoundValue;
+      }
+    },
+    {
+      accessorKey: "sub_name",
+      header: () => /* @__PURE__ */ jsx("div", { children: i18n.t("common:label.customerAliasName", {
+        defaultValue: "T\xEAn ph\u1EE5 kh\xE1ch h\xE0ng"
+      }) }),
+      cell: ({ row }) => {
+        const sub_name = row.getValue("sub_name");
+        return sub_name?.length > 0 ? maskData(sub_name.join(", ")) : notFoundValue;
+      }
+    },
+    {
+      accessorKey: "tags",
+      header: () => /* @__PURE__ */ jsx("div", { children: "Tags" }),
+      cell: ({ row }) => {
+        const tags = row.getValue("tags");
+        return tags?.length > 0 ? tags?.map((tag) => tag.name).join(", ") : notFoundValue;
+      }
+    },
+    {
+      accessorKey: "contact_converted_by",
+      header: () => /* @__PURE__ */ jsx("div", { children: i18n.t("common:label.converter", {
+        defaultValue: "Ng\u01B0\u1EDDi chuy\u1EC3n \u0111\u1ED5i"
+      }) }),
+      cell: ({ row }) => {
+        const contactConvertedBy = row.original.contact_converted_by;
+        if (!contactConvertedBy) {
+          return notFoundValue;
+        }
+        return contactConvertedBy?.name ?? notFoundValue;
+      }
+    },
+    {
+      accessorKey: "contact_converted_at",
+      header: () => /* @__PURE__ */ jsx("div", { children: i18n.t("common:label.conversionTime", {
+        defaultValue: "Th\u1EDDi gian chuy\u1EC3n \u0111\u1ED5i"
+      }) }),
+      cell: ({ row }) => {
+        const contactConvertedAt = row.original.contact_converted_at;
+        if (!contactConvertedAt) {
+          return notFoundValue;
+        }
+        return formatDayWithTime(contactConvertedAt) ?? notFoundValue;
+      }
+    },
+    {
+      accessorKey: "conversion_source",
+      header: () => /* @__PURE__ */ jsx("div", { children: i18n.t("customer:column.conversionMethod", {
+        defaultValue: "Ph\u01B0\u01A1ng th\u1EE9c chuy\u1EC3n \u0111\u1ED5i"
+      }) }),
+      minSize: 180,
+      cell: ({ row }) => {
+        const conversionSource = row.original.conversion_source;
+        if (!conversionSource) {
+          return notFoundValue;
+        }
+        return ConversionSourceOptions.find((e) => e.id === conversionSource)?.text ?? notFoundValue;
+      }
+    },
+    {
+      accessorKey: "lead_source",
+      header: () => /* @__PURE__ */ jsx("div", { children: i18n.t("common:label.leadSource", {
+        defaultValue: "Ngu\u1ED3n ti\u1EC1m n\u0103ng"
+      }) }),
+      cell: ({ row }) => {
+        const leadSource = row.original.lead_source;
+        if (!leadSource) {
+          return notFoundValue;
+        }
+        return leadSourceData?.find((e) => e.key === leadSource)?.value ?? notFoundValue;
+      }
+    },
+    {
+      accessorKey: "contact_owner",
+      header: () => /* @__PURE__ */ jsx("div", { children: i18n.t("common:label.assignee", { defaultValue: "Ng\u01B0\u1EDDi ph\u1EE5 tr\xE1ch" }) }),
+      cell: ({ row }) => {
+        const contactOwner = row.original.contact_owner;
+        if (!contactOwner) {
+          return notFoundValue;
+        }
+        return contactOwner.name ?? notFoundValue;
+      }
+    },
+    {
+      accessorKey: "createdBy",
+      header: () => /* @__PURE__ */ jsx("div", { children: i18n.t("common:label.creator", { defaultValue: "Ng\u01B0\u1EDDi t\u1EA1o" }) }),
+      cell: ({ row }) => {
+        const createdBy = row.original.createdBy;
+        if (!createdBy) {
+          return notFoundValue;
+        }
+        return createdBy?.name ?? notFoundValue;
+      }
+    }
+  ];
+  if (customerFields && customerFields.length > 0) {
+    customerFields.forEach((field) => {
+      const sortableHeader = CUSTOM_FIELD_SORT_RE.test(field.key) ? makeSortableHeader(field.title, field.key, useContactSort) : () => /* @__PURE__ */ jsx("div", { children: field.title });
+      columns.push({
+        accessorKey: field.key,
+        header: sortableHeader,
+        cell: ({ row }) => {
+          let value = row.original[field.key];
+          if (Array.isArray(value) && ![AttributeFieldType.Image, AttributeFieldType.File].includes(
+            field.type
+          )) {
+            if (!value.length) {
+              value = notFoundValue;
+            } else {
+              value = value.join(", ");
+            }
+          } else if (value) {
+            if (field.type === "date") {
+              value = isValid(new Date(value)) ? format(value, "dd/MM/yyyy HH:mm") : notFoundValue;
+            }
+          } else {
+            value = notFoundValue;
+          }
+          if ([AttributeFieldType.Image].includes(field.type) && Array.isArray(value)) {
+            return /* @__PURE__ */ jsx(
+              PreviewListImage,
+              {
+                className: "flex items-center",
+                classNameImage: "w-8 h-8",
+                maxImageShowing: 2,
+                isRemoveImages: false,
+                showImageName: false,
+                images: formatLinkToPreviewImage(value),
+                classNameRemaining: "text-sm"
+              }
+            );
+          }
+          if ([AttributeFieldType.File].includes(field.type) && Array.isArray(value)) {
+            return /* @__PURE__ */ jsx(
+              PreviewListFiles,
+              {
+                classNameItem: "border-none bg-transparent",
+                maxFileShowing: 1,
+                isRemoveFiles: false,
+                isDownloadFiles: false,
+                datas: formatLinkToPreviewImage(value)
+              }
+            );
+          }
+          return value;
+        }
+      });
+    });
+  }
+  return columns.filter((column) => column.accessorKey !== "code" || isCustomerCodeEnabled).map((column) => {
+    const fieldConfig = editFields?.[column.accessorKey];
+    if (!fieldConfig?.allow_edit || typeof column.cell !== "function") {
+      return column;
+    }
+    const renderDisplay = column.cell;
+    return {
+      ...column,
+      isEditableColumn: true,
+      cell: (context) => /* @__PURE__ */ jsx(
+        EditableCell,
+        {
+          row: context.row,
+          fieldConfig,
+          displayNode: renderDisplay(context),
+          onSaved
+        }
+      )
+    };
+  });
+}
+function getColumnOptions({ customerFields, isCustomerCodeEnabled }) {
+  const columnOptions = [
+    {
+      key: "name",
+      label: i18n.t("common:label.customerName", {
+        defaultValue: "T\xEAn kh\xE1ch h\xE0ng"
+      })
+    },
+    ...isCustomerCodeEnabled ? [
+      {
+        key: "code",
+        label: i18n.t("common:label.customerCode", {
+          defaultValue: "M\xE3 kh\xE1ch h\xE0ng"
+        })
+      }
+    ] : [],
+    {
+      key: "phone",
+      label: i18n.t("common:label.phone", {
+        defaultValue: "S\u1ED1 \u0111i\u1EC7n tho\u1EA1i"
+      })
+    },
+    {
+      key: "email",
+      label: "Email"
+    },
+    {
+      key: "dob",
+      label: i18n.t("common:label.dob", {
+        defaultValue: "Ng\xE0y sinh"
+      })
+    },
+    {
+      key: "source",
+      label: i18n.t("customer:field.sourceChannel", {
+        defaultValue: "K\xEAnh kh\u1EDFi t\u1EA1o"
+      })
+    },
+    {
+      key: "organization",
+      label: i18n.t("common:label.organization", {
+        defaultValue: "T\u1ED5 ch\u1EE9c"
+      })
+    },
+    {
+      key: "group",
+      label: i18n.t("common:label.customerGroup", {
+        defaultValue: "Nh\xF3m kh\xE1ch h\xE0ng"
+      })
+    },
+    {
+      key: "city",
+      label: i18n.t("common:label.city", {
+        defaultValue: "Th\xE0nh ph\u1ED1"
+      })
+    },
+    {
+      key: "created_at",
+      label: i18n.t("common:label.initTime", {
+        defaultValue: "Th\u1EDDi gian kh\u1EDFi t\u1EA1o"
+      })
+    },
+    {
+      key: "updated_at",
+      label: i18n.t("common:label.lastUpdated", {
+        defaultValue: "C\u1EADp nh\u1EADt l\u1EA7n cu\u1ED1i"
+      })
+    },
+    {
+      key: "customer_type",
+      label: i18n.t("common:label.customerTier", {
+        defaultValue: "H\u1EA1ng kh\xE1ch h\xE0ng"
+      })
+    },
+    {
+      key: "gender",
+      label: i18n.t("common:label.gender", {
+        defaultValue: "Gi\u1EDBi t\xEDnh"
+      })
+    },
+    {
+      key: "note",
+      label: i18n.t("common:label.note", {
+        defaultValue: "Ghi ch\xFA"
+      })
+    },
+    {
+      key: "address",
+      label: i18n.t("common:label.address", {
+        defaultValue: "\u0110\u1ECBa ch\u1EC9"
+      })
+    },
+    {
+      key: "facebook",
+      label: "Facebook"
+    },
+    {
+      key: "sub_phone",
+      label: i18n.t("common:label.secondaryPhone", {
+        defaultValue: "S\u1ED1 \u0111i\u1EC7n tho\u1EA1i ph\u1EE5"
+      })
+    },
+    {
+      key: "sub_email",
+      label: i18n.t("common:label.secondaryEmail", {
+        defaultValue: "Email ph\u1EE5"
+      })
+    },
+    {
+      key: "sub_name",
+      label: i18n.t("common:label.customerAliasName", {
+        defaultValue: "T\xEAn ph\u1EE5 kh\xE1ch h\xE0ng"
+      })
+    },
+    {
+      key: "district_id",
+      label: i18n.t("common:label.district", {
+        defaultValue: "Qu\u1EADn huy\u1EC7n"
+      })
+    },
+    {
+      key: "tags",
+      label: "Tags"
+    },
+    {
+      key: "contact_converted_at",
+      label: i18n.t("common:label.conversionTime", {
+        defaultValue: "Th\u1EDDi gian chuy\u1EC3n \u0111\u1ED5i"
+      })
+    },
+    {
+      key: "contact_converted_by",
+      label: i18n.t("common:label.converter", {
+        defaultValue: "Ng\u01B0\u1EDDi chuy\u1EC3n \u0111\u1ED5i"
+      })
+    },
+    {
+      key: "conversion_source",
+      label: i18n.t("customer:column.conversionMethod", {
+        defaultValue: "Ph\u01B0\u01A1ng th\u1EE9c chuy\u1EC3n \u0111\u1ED5i"
+      })
+    },
+    {
+      key: "lead_source",
+      label: i18n.t("common:label.leadSource", {
+        defaultValue: "Ngu\u1ED3n ti\u1EC1m n\u0103ng"
+      })
+    },
+    {
+      key: "contact_owner",
+      label: i18n.t("common:label.assignee", {
+        defaultValue: "Ng\u01B0\u1EDDi ph\u1EE5 tr\xE1ch"
+      })
+    },
+    {
+      key: "createdBy",
+      label: i18n.t("common:label.creator", {
+        defaultValue: "Ng\u01B0\u1EDDi t\u1EA1o"
+      })
+    }
+  ];
+  if (customerFields && customerFields.length > 0) {
+    customerFields.forEach((field) => {
+      columnOptions.push({
+        key: field.key,
+        label: field.title
+      });
+    });
+  }
+  return columnOptions;
+}
+export {
+  getColumnOptions,
+  getColumns
+};