zignal-stencil-library 1.1.129 → 1.1.131

package/dist/collection/components/dialog-search/dialog-search.js

@@ -1,10 +1,13 @@
-import { Host, h } from "@stencil/core";
+import { Host, h, getAssetPath } from "@stencil/core";
 import { ZButton } from "../internal-component/z-button";
 import { ZInput } from "../internal-component/z-input";
 import { configStore, filterChatsStore, responsiveStore } from "../../store/store";
-import { handleGetUserStatuses, handleGetUserTags } from "../../store/chat";
+import { handleCreateChatFilter, handleDeleteChatFilter, handleGetUserStatuses, handleGetUserTags, handleUpdateChatFilter, haveConnectionFromZwiz } from "../../store/chat";
 import { useTranslation } from "../../utils/utils";
 import { ZIconButton } from "../internal-component/z-icon-button";
+import { openDialog } from "../../store/dialog";
+import { Icon } from "../internal-component/icon";
+import { t } from "i18next";
 export class DialogSearch {
     connectionList = configStore.get('connectionList').map(connection => ({
         iconName: connection.type,
@@ -23,26 +26,85 @@ export class DialogSearch {
             name: label,
         };
     });
+    verifySlipList = [
+        { label: t('chat_filter.verify_slip'), value: 'total_completed_verify_slip' },
+        { label: t('chat_filter.verify_slip_more_than'), value: 'total_completed_verify_slip_more_than' },
+    ];
+    zrmzShopList = [
+        { label: 'Shop1', value: 'shop1' },
+        { label: 'Shop2', value: 'shop2' },
+    ];
+    zervaShopList = [
+        { label: 'Shop1', value: 'shop1' },
+        { label: 'Shop2', value: 'shop2' },
+    ];
     defaultFilter = {
+        name: '',
         search: '',
         // spam: false,
-        read: undefined,
+        read: null,
+        type: null,
         connectionIds: this.connectionList.map(connection => connection.value) || [],
         lastAnswerByIds: this.answerList.map(answer => answer.value) || [],
         statusIds: [],
         tagIds: [],
+        verifySlip: null,
+        verifySlipValue: null,
+        zrmz: {
+            isOnlyCustomers: false,
+            shopId: null,
+            name: null,
+            email: null,
+            phoneNumber: null,
+            totalPointType: null,
+            totalPointMax: null,
+            totalPointMin: null,
+            remainingPointType: null,
+            remainingPointMax: null,
+            remainingPointMin: null,
+        },
+        zerva: {
+            isOnlyCustomers: false,
+            shopId: null,
+            bookingNo: null,
+            name: null,
+            email: null,
+            phoneNumber: null,
+            bookingStartDate: null,
+            bookingEndDate: null,
+            paymentStatus: null,
+            bookingStatus: null,
+        },
     };
     oldFilter;
+    filterType = 'advanced';
+    selectedFilter;
     filter = this.defaultFilter;
+    isShowAdvancedZrmz = false;
+    isShowAdvancedZerva = false;
     cancel;
     search;
     componentWillLoad() {
-        const _filter = {
-            ...filterChatsStore.get('filterChat'),
-            ...this.oldFilter,
-        };
-        if (Object.keys(_filter).length) {
-            this.filter = _filter;
+        const _filterType = filterChatsStore.get('filterType');
+        if (_filterType === 'advanced' && this.filterType === 'advanced') {
+            this.filter = {
+                ...this.oldFilter
+            };
+        }
+        else if (this.filterType === 'custom' && this.selectedFilter) {
+            this.filter = {
+                name: this.selectedFilter.name,
+                search: this.selectedFilter.search,
+                read: this.selectedFilter.read ?? null,
+                type: this.selectedFilter.type ?? null,
+                connectionIds: this.selectedFilter.connection_ids,
+                lastAnswerByIds: this.selectedFilter.last_answer_by_ids,
+                statusIds: this.selectedFilter.status_ids,
+                tagIds: this.selectedFilter.tag_ids,
+            };
+        }
+        else {
+            this.filter = this.defaultFilter;
         }
     }
     handleCancel = () => {
@@ -53,19 +115,105 @@ export class DialogSearch {
         this.filter = { ...this.filter, [field]: value };
     };
     handleSubmit = () => {
+        filterChatsStore.set('filterType', 'advanced');
         this.search.emit(this.filter);
     };
     handleReset = () => {
-        this.filter = this.defaultFilter;
+        this.filter = { ...this.defaultFilter, name: this.selectedFilter?.name || '' };
+    };
+    handleCreateCustomFilter = async () => {
+        const result = await handleCreateChatFilter({
+            ...this.filter,
+            name: this.filter.name,
+            type: this.filter.type ?? null,
+            read: this.filter.read ?? null,
+            connection_ids: this.filter.connectionIds,
+            last_answer_by_ids: this.filter.lastAnswerByIds,
+            status_ids: this.filter.statusIds,
+            tag_ids: this.filter.tagIds,
+        });
+        if (result) {
+            this.cancel.emit();
+        }
+    };
+    handleUpdateCustomFilter = async () => {
+        const result = await handleUpdateChatFilter({
+            ...this.filter,
+            id: this.selectedFilter?.id,
+            name: this.filter.name,
+            type: this.filter.type ?? null,
+            read: this.filter.read ?? null,
+            connection_ids: this.filter.connectionIds,
+            last_answer_by_ids: this.filter.lastAnswerByIds,
+            status_ids: this.filter.statusIds,
+            tag_ids: this.filter.tagIds,
+        });
+        if (result) {
+            this.cancel.emit();
+        }
+    };
+    handleDeleteCustomFilter = async () => {
+        const t = useTranslation();
+        const title = t('chat_filter.confirm_delete_filter') || 'Are you sure you want to delete this filter?';
+        openDialog({
+            open: true,
+            type: "WARNING" /* DIALOG_TYPE.WARNING */,
+            title,
+            buttonName: t('confirm'),
+            cancelButtonName: t('cancel'),
+            onSubmitDialog: () => {
+                handleDeleteChatFilter(this.selectedFilter?.id).then((result) => {
+                    if (result) {
+                        this.cancel.emit();
+                    }
+                });
+            },
+            onCloseDialog: () => {
+                // Dialog closed without confirmation
+            },
+        });
     };
+    isEnableUpdateCustomFilter = () => {
+        const isNameChanged = this.filter.name !== this.selectedFilter?.name;
+        const isTypeChanged = this.filter.type !== this.selectedFilter?.type;
+        const isReadChanged = this.filter.read !== this.selectedFilter?.read;
+        const isSearchChanged = this.filter.search !== this.selectedFilter?.search;
+        // Helper function to check if arrays contain the same items regardless of order
+        const areArraysEqual = (arr1, arr2) => {
+            if (!arr1 && !arr2)
+                return true;
+            if (!arr1 || !arr2)
+                return false;
+            if (arr1.length !== arr2.length)
+                return false;
+            const set1 = new Set(arr1);
+            const set2 = new Set(arr2);
+            return arr1.every(item => set2.has(item)) && arr2.every(item => set1.has(item));
+        };
+        const isConnectionIdsChanged = !areArraysEqual(this.filter.connectionIds, this.selectedFilter?.connection_ids);
+        const isLastAnswerByIdsChanged = !areArraysEqual(this.filter.lastAnswerByIds, this.selectedFilter?.last_answer_by_ids);
+        const isStatusIdsChanged = !areArraysEqual(this.filter.statusIds, this.selectedFilter?.status_ids);
+        const isTagIdsChanged = !areArraysEqual(this.filter.tagIds, this.selectedFilter?.tag_ids);
+        return isNameChanged || isTypeChanged || isReadChanged || isSearchChanged || isConnectionIdsChanged || isLastAnswerByIdsChanged || isStatusIdsChanged || isTagIdsChanged;
+    };
+    renderZrmz() {
+        return h("div", null, h("img", { src: getAssetPath("assets/images/logo/zrmz.png"), alt: "zrmz", class: "h-[40px]" }), h("div", { class: "flex items-center gap-2" }, h("label", { class: "flex-1 inline-flex items-center gap-2 text-sm mt-1 text-surface" }, h("input", { type: "checkbox", checked: this.filter.zrmz?.isOnlyCustomers, onChange: () => this.handleChange('zrmz', { ...this.filter.zrmz, isOnlyCustomers: !this.filter.zrmz?.isOnlyCustomers }) }), h("span", null, t('chat_filter.only_customer_zrmz'))), h(ZButton, { label: t('chat_tab.advance_search'), variant: "text-underline", endIcon: h(Icon, { name: 'Triangle', addClass: `ml-1 size-1.5 fill-current ${this.isShowAdvancedZrmz ? 'rotate-0' : 'rotate-180'}` }), onClick: () => this.isShowAdvancedZrmz = !this.isShowAdvancedZrmz })), this.isShowAdvancedZrmz && h("div", { class: "flex flex-col" }, h("autocomplete-select", { value: this.zrmzShopList.find(item => item.value === this.filter.zrmz?.shopId)?.label, fetchItems: () => Promise.resolve(this.zrmzShopList.map(item => ({ name: item.label, value: item.value }))), onSelecting: item => this.handleChange('zrmz', { ...this.filter.zrmz, shopId: item.detail.value }), referenceSelector: "filter-zrmz-shop", showClearButton: true, placeholder: t('chat_filter.shop_name'), class: "mb-2" }), h(ZInput, { placeholder: t('chat_filter.name'), value: this.filter.zrmz?.name, onChange: value => this.handleChange('zrmz', { ...this.filter.zrmz, name: value }) }), h("div", { class: "flex w-full gap-2" }, h("div", { class: "flex-1" }, h(ZInput, { placeholder: t('quick_message.button_action_tel'), value: this.filter.zrmz?.phoneNumber, onChange: value => this.handleChange('zrmz', { ...this.filter.zrmz, phoneNumber: value }) })), h("div", { class: "flex-1" }, h(ZInput, { placeholder: t('email'), value: this.filter.zrmz?.email, onChange: value => this.handleChange('zrmz', { ...this.filter.zrmz, email: value }) }))), h("p", { class: "text-sm mb-1 ml-1 text-surface" }, t('chat_filter.total_point')), h("div", { class: "flex w-full gap-2" }, h("div", { class: "flex-1" }, h(ZInput, { placeholder: "Point Type", value: this.filter.zrmz?.totalPointType, onChange: value => this.handleChange('zrmz', { ...this.filter.zrmz, totalPointType: value }) })), h("div", { class: "flex-1" }, h(ZInput, { placeholder: "Min", value: this.filter.zrmz?.totalPointMin?.toString(), onChange: value => this.handleChange('zrmz', { ...this.filter.zrmz, totalPointMin: Number.parseInt(value) || 0 }) })), h("div", { class: "flex-1" }, h(ZInput, { placeholder: "Max", value: this.filter.zrmz?.totalPointMax?.toString(), onChange: value => this.handleChange('zrmz', { ...this.filter.zrmz, totalPointMax: Number.parseInt(value) || 0 }) }))), h("p", { class: "text-sm mb-1 ml-1 text-surface" }, t('chat_filter.remaining_point')), h("div", { class: "flex w-full gap-2" }, h("div", { class: "flex-1" }, h(ZInput, { placeholder: "Point Type", value: this.filter.zrmz?.remainingPointType, onChange: value => this.handleChange('zrmz', { ...this.filter.zrmz, remainingPointType: value }) })), h("div", { class: "flex-1" }, h(ZInput, { placeholder: "Min", value: this.filter.zrmz?.remainingPointMin?.toString(), onChange: value => this.handleChange('zrmz', { ...this.filter.zrmz, remainingPointMin: Number.parseInt(value) || 0 }) })), h("div", { class: "flex-1" }, h(ZInput, { placeholder: "Max", value: this.filter.zrmz?.remainingPointMax?.toString(), onChange: value => this.handleChange('zrmz', { ...this.filter.zrmz, remainingPointMax: Number.parseInt(value) || 0 }) })))));
+    }
+    renderZerva() {
+        return (h("div", { class: "mt-1" }, h("img", { src: getAssetPath("assets/images/logo/zerva.png"), alt: "zerva", class: "h-[40px]" }), h("div", { class: "flex items-center gap-2" }, h("label", { class: "flex-1 inline-flex items-center gap-2 text-sm mt-1 text-surface" }, h("input", { type: "checkbox", checked: this.filter.zerva?.isOnlyCustomers, onChange: () => this.handleChange('zerva', { ...this.filter.zerva, isOnlyCustomers: !this.filter.zerva?.isOnlyCustomers }) }), h("span", null, t('chat_filter.only_customer_zerva'))), h(ZButton, { label: t('chat_tab.advance_search'), variant: "text-underline", endIcon: h(Icon, { name: 'Triangle', addClass: `ml-1 size-1.5 fill-current ${this.isShowAdvancedZerva ? 'rotate-0' : 'rotate-180'}` }), onClick: () => this.isShowAdvancedZerva = !this.isShowAdvancedZerva })), this.isShowAdvancedZerva && h("div", { class: "flex flex-col" }, h("autocomplete-select", { value: this.zervaShopList.find(item => item.value === this.filter.zerva?.shopId)?.label, fetchItems: () => Promise.resolve(this.zervaShopList.map(item => ({ name: item.label, value: item.value }))), onSelecting: item => this.handleChange('zerva', { ...this.filter.zerva, shopId: item.detail.value }), referenceSelector: "filter-zerva-shop", showClearButton: true, placeholder: t('chat_filter.shop_name'), class: "mb-2" }), h(ZInput, { placeholder: t('chat_filter.booking_no'), value: this.filter.zerva?.bookingNo, onChange: value => this.handleChange('zerva', { ...this.filter.zerva, bookingNo: value }) }), h(ZInput, { placeholder: t('chat_filter.name'), value: this.filter.zerva?.name, onChange: value => this.handleChange('zerva', { ...this.filter.zerva, name: value }) }), h("div", { class: "flex w-full gap-2" }, h("div", { class: "flex-1" }, h(ZInput, { placeholder: t('quick_message.button_action_tel'), value: this.filter.zerva?.phoneNumber, onChange: value => this.handleChange('zerva', { ...this.filter.zerva, phoneNumber: value }) })), h("div", { class: "flex-1" }, h(ZInput, { placeholder: t('email'), value: this.filter.zerva?.email, onChange: value => this.handleChange('zerva', { ...this.filter.zerva, email: value }) }))), h("p", { class: "text-sm mb-1 ml-1 text-surface" }, t('chat_filter.service_date')), h("div", { class: "flex w-full gap-2" }, h("div", { class: "flex-1" }, h(ZInput, { type: "date", placeholder: t('chat_filter.start_date'), value: this.filter.zerva?.bookingStartDate || '', onChange: value => this.handleChange('zerva', { ...this.filter.zerva, bookingStartDate: value }) })), h("div", { class: "flex-1" }, h(ZInput, { type: "date", placeholder: t('chat_filter.end_date'), value: this.filter.zerva?.bookingEndDate || '', onChange: value => this.handleChange('zerva', { ...this.filter.zerva, bookingEndDate: value }) }))), h("p", { class: "text-sm mb-1 ml-1 text-surface" }, t('status')), h("div", { class: "flex w-full gap-2" }, h("div", { class: "flex-1" }, h("autocomplete-select", { value: this.filter.zerva?.bookingStatus, fetchItems: () => Promise.resolve(this.zervaShopList.map(item => ({ name: item.label, value: item.value }))), onSelecting: item => this.handleChange('zerva', { ...this.filter.zerva, bookingStatus: item.detail.value }), referenceSelector: "filter-zerva-booking-status", showClearButton: true, placeholder: t('chat_filter.booking_status'), class: "mb-2" })), h("div", { class: "flex-1" }, h("autocomplete-select", { value: this.filter.zerva?.paymentStatus, fetchItems: () => Promise.resolve(this.zervaShopList.map(item => ({ name: item.label, value: item.value }))), onSelecting: item => this.handleChange('zerva', { ...this.filter.zerva, paymentStatus: item.detail.value }), referenceSelector: "filter-zerva-payment-status", showClearButton: true, placeholder: t('chat_filter.payment_status'), class: "mb-2" }))))));
+    }
     render() {
         const t = useTranslation();
         const isMobile = responsiveStore.get('isMobile');
-        const selectReadOptions = [{ label: t('chat_tab.all_chat') }, { label: t('chat_tab.already_read'), value: true }, { label: t('chat_tab.unread'), value: false }];
-        return (h(Host, { key: 'd8540d10aade175d8d77a3eafd63e29ab88eccc4' }, h("div", { key: '5d671265d4f4037c321c2c4c80dda22393fc4f3e', class: `dialog-search scroll-container ${isMobile ? 'w-xs' : 'w-xl'}` }, h("div", { key: 'cb9164a4b7a7c14d0151456dcf9c6141996bb6d0', class: "dialog-search-toolbar-action" }, h("div", { key: '2ba1172d9506e57876409738533da6b177de3421', class: "dialog-search-toolbar-action-wrapper " }, h("span", { key: '10c989cd1c334ef3fd76a58c7845aa36887ac574', class: "dialog-search-toolbar-action-reset", onClick: this.handleReset }, t('reset')), h(ZIconButton, { key: '58c6e16dcbf37745bbfd767daa40c0ba1c697b0e', iconName: "X", variant: "none", onClick: this.handleCancel }))), h("h2", { key: '9f9f30fa7928be191086e9d3ae2654b11ad1cf98', class: "dialog-search-toolbar-title" }, t('chat_tab.search_chat')), h("div", { key: '58b5bc058f12e09df323100935ddecb0d646350e', class: "space-y-2" }, h("p", { key: 'e8a7cce635fdbd1163e1edee7609fa01ef8b0d87', class: "dialog-search-text" }, t('search'), "\u00A0", h("span", { key: 'fc212b60766035d68ab9e58622ae7d15aaf04fa4', class: "text-sm text-theme-gray" }, "(", t('chat_tab.filter_search_fields'), ")")), h(ZInput, { key: '4795630ae00746cdaaf8ac5a93b2ff582d7e12a3', placeholder: t('search'), value: this.filter.search, onChange: value => this.handleChange('search', value) }), h("p", { key: '9140e318be3b0dd69700a7224f01bc9c3d364a09', class: "dialog-search-text" }, t('chat_tab.read_status')), h("div", { key: '66aeedf7aaf93567be21588551eed91c0110d160', class: "dialog-search-read-option" }, selectReadOptions.map(({ label, value }) => {
+        const selectReadOptions = [{ label: t('chat_tab.all_chat'), value: null }, { label: t('chat_tab.already_read'), value: true }, { label: t('chat_tab.unread'), value: false }];
+        const selectChatTypeOptions = [{ label: t('chat_filter.all'), value: null }, { label: t('chat_filter.friend'), value: 'user' }, { label: t('chat_filter.group'), value: 'group' }];
+        return (h(Host, { key: '8644594cf5faf6d3a0f076c1b02fce9cc3c4b98b' }, h("div", { key: '23cac53ce2dadadedce3008653dcaa471c249bac', class: `dialog-search scroll-container ${isMobile ? 'w-xs' : 'w-xl'}` }, h("div", { key: '3365d371b9dcdfa8d11610d1ef3cd7b26c3fdf6e', class: "dialog-search-toolbar-action" }, h("div", { key: 'fd3b29cbb1dbe94d3763b531b13030e70fec1aee', class: "dialog-search-toolbar-action-wrapper " }, h("span", { key: '7cbe9070332e1621f431d7a908769605c29f90ec', class: "dialog-search-toolbar-action-reset", onClick: this.handleReset }, t('reset')), h(ZIconButton, { key: '3a9bf5ab45baea022ed76dac4845bbe7f011319c', iconName: "X", variant: "none", onClick: this.handleCancel }))), h("h2", { key: '304bbf73ae2ccfc38da9412b3301383c8346bc19', class: "dialog-search-toolbar-title" }, this.filterType === 'advanced' ? t('chat_tab.advanced_search') : this.selectedFilter ? t('chat_tab.edit_custom_filter') : t('chat_tab.add_custom_filter')), h("div", { key: 'fdebf9044ba42b4d0740082be568ff2a9f6785b0', class: "dialog-search-content" }, h("div", { key: '8d6547c2fb19ddd3c887ea4209d99bf696677067', class: "space-y-2" }, this.filterType === 'custom' && h("div", { key: '308e56f00399316090e3560f1dfab56c7cef057c' }, h("p", { key: '27083190a05134d95fdde02b51e92d032d483aa9', class: "dialog-search-text" }, t('chat_filter.filter_name'), "\u00A0"), h(ZInput, { key: 'c00e5e2ed4344ddd46859265819e8e85e6703f0e', placeholder: t('chat_filter.filter_name'), value: this.filter.name, onChange: value => this.handleChange('name', value) })), h("p", { key: '45d2b4232907d887f807bb62a32905228d737d7d', class: "dialog-search-text" }, t('search'), "\u00A0", h("span", { key: 'a08c8347639ea7b9c5433f3b0d9f04814981ea2f', class: "text-sm text-theme-gray" }, "(", t('chat_tab.filter_search_fields'), ")")), h(ZInput, { key: '22e49d48d88a1300d4b2104963659dac0ac0205a', placeholder: t('search'), value: this.filter.search, onChange: value => this.handleChange('search', value) }), h("p", { key: '74d6c21b3447d4219c6c0211dbd1f12ea2428a09', class: "dialog-search-text" }, t('chat_tab.read_status')), h("div", { key: '7dc1331a43908dd1f853fffe4942a1bc00e062af', class: "dialog-search-read-option" }, selectReadOptions.map(({ label, value }) => {
             const isSelected = value === this.filter.read;
             return h(ZButton, { variant: isSelected ? 'primary' : 'outlined', label: label, title: label, onClick: () => this.handleChange('read', value) });
-        })), h("p", { key: 'f3b594feb2f6ab788c996039393db540a121e194', class: "dialog-search-text" }, t('channel')), h("div", { key: '507634a6e7485b918a05cbcdb6dd1aa737a84591', class: 'mb-2', id: "filter-channel" }, h("autocomplete-multiple-select", { key: '0a0c9cb783dedb42b8afcad561dfa2b384b14951', selectedIds: this.filter.connectionIds, fetchItems: async () => Promise.resolve(this.connectionList), onSelecting: event => this.handleChange('connectionIds', event.detail), referenceSelector: "filter-channel" })), h("p", { key: '351e8bce39fb8c82d2957bb4400fd5c1aa7feb60', class: "dialog-search-text" }, t('chat_tab.last_reply')), h("div", { key: '472062b873ee7deb1152204732238843aa6d361f', class: 'mb-2', id: "filter-last-answer" }, h("autocomplete-multiple-select", { key: '496260a2e0c5f008532800195d3ec10060a84b84', selectedIds: this.filter.lastAnswerByIds, fetchItems: async () => Promise.resolve(this.answerList), onSelecting: event => this.handleChange('lastAnswerByIds', event.detail), referenceSelector: "filter-last-answer" })), h("p", { key: 'c9913b0bf7c54d25778eb8c11447b09d36122b5d', class: "dialog-search-text" }, t('status')), h("div", { key: '42d6a0d6f8e4692bad90c28c7cac7f9f98dcc89b', class: 'mb-2', id: "filter-status" }, h("autocomplete-multiple-select", { key: '23cbcc796290caca1b723af2a529bc268c4bf2eb', selectedIds: this.filter.statusIds, fetchItems: handleGetUserStatuses, onSelecting: event => this.handleChange('statusIds', event.detail), referenceSelector: "filter-status" })), h("p", { key: '68ead277ef9f2f51ada8073a0abb0273c1bccc63', class: "dialog-search-text" }, t('tag')), h("div", { key: '6bb325bee1d2deb1764ba94c1b6253bf862f1aec', class: 'mb-2', id: "filter-tag" }, h("autocomplete-multiple-select", { key: 'f17aa5e2024dd0894be890d6f291139f4570d264', selectedIds: this.filter.tagIds, fetchItems: handleGetUserTags, onSelecting: event => this.handleChange('tagIds', event.detail), referenceSelector: "filter-tag" }))), h("div", { key: 'a0ec136c676521f7c10a68f82eb7b9330a4c3393', class: "dialog-search-action-wrapper" }, h(ZButton, { key: '607b87990949724ec20bd5e428bb9746f941e09f', label: t('search_data'), fullWidth: true, onClick: this.handleSubmit })))));
+        })), h("p", { key: 'e915f1dece80412a59ed2a00ea9fdd6c2aa45f82', class: "dialog-search-text" }, t('channel')), h("div", { key: '1817ca28feca0fb1038912ba07dabc38646070fa', class: 'mb-2', id: "filter-channel" }, h("autocomplete-multiple-select", { key: 'c43b6c45fbca77dcab93c733558db3121e45e0ab', selectedIds: this.filter.connectionIds, fetchItems: async () => Promise.resolve(this.connectionList), onSelecting: event => this.handleChange('connectionIds', event.detail), referenceSelector: "filter-channel" })), h("p", { key: '0ed787b83aac340abdfc66194f630056b2a540d1', class: "dialog-search-text" }, t('chat_tab.last_reply')), h("div", { key: 'ffa937b4aeb84c0f3f8b9cc142c4d93b2b519700', class: 'mb-2', id: "filter-last-answer" }, h("autocomplete-multiple-select", { key: '8ef7dfad6f32d21f048beeb33c6cb9e8cc70daff', selectedIds: this.filter.lastAnswerByIds, fetchItems: async () => Promise.resolve(this.answerList), onSelecting: event => this.handleChange('lastAnswerByIds', event.detail), referenceSelector: "filter-last-answer" })), h("p", { key: '58175b27737ed2883f3a932dfd445e6333e0d7a5', class: "dialog-search-text" }, t('chat_filter.type'), "\u00A0", h("span", { key: '938125c8c6715b39dbe60b05fca2e75347ed7c71', class: "text-sm text-theme-gray" }, "(", t('chat_filter.type_for_line_oa'), ")")), h("div", { key: '669d4180c706dcf3dcec91f03317d8e98cbb0fad', class: "dialog-search-read-option" }, selectChatTypeOptions.map(({ label, value }) => {
+            const isSelected = value === this.filter.type;
+            return h(ZButton, { variant: isSelected ? 'primary' : 'outlined', label: label, title: label, onClick: () => this.handleChange('type', value) });
+        })), h("p", { key: 'e162c67444ff6e60edb2911c10af4ad3ce681475', class: "dialog-search-text" }, t('status')), h("div", { key: '58e9021261df36546bd9c8a6bdbe0961fd5b4ee3', class: 'mb-2', id: "filter-status" }, h("autocomplete-multiple-select", { key: '50d42eb427e48849193625ff5b855ffe40e0e00f', selectedIds: this.filter.statusIds, fetchItems: handleGetUserStatuses, onSelecting: event => this.handleChange('statusIds', event.detail), referenceSelector: "filter-status" })), h("p", { key: '04c06903a2ab8cdcb5d3312790e171e4967b2ecf', class: "dialog-search-text" }, t('tag')), h("div", { key: '55bd2b3aa65dadf40aa421acd8d48d83f6261c63', class: 'mb-2', id: "filter-tag" }, h("autocomplete-multiple-select", { key: 'd07a260ae4198262f9e829f5456ecf1a3d95c553', selectedIds: this.filter.tagIds, fetchItems: handleGetUserTags, onSelecting: event => this.handleChange('tagIds', event.detail), referenceSelector: "filter-tag" })), haveConnectionFromZwiz() && (h(h.Fragment, null, h("p", { key: '2529a64f4a24670d762081dea80413d9239abeb7', class: "dialog-search-text" }, t('chat_filter.verify_slip')), h("div", { key: '583c6b50d61f0934199eedacec530c428a9bddb4', class: "flex mb-2 gap-2", id: "filter-verify-slip" }, h("autocomplete-select", { key: 'c1ebf7d7a6858924cbc29a26b89156db3ab607ba', class: "flex-1", value: this.verifySlipList.find(item => item.value === this.filter.verifySlip)?.label, fetchItems: () => Promise.resolve(this.verifySlipList.map(item => ({ name: item.label, value: item.value }))), onSelecting: item => this.handleChange('verifySlip', item.detail.value), referenceSelector: "filter-verify-slip", showClearButton: true }), h("div", { key: 'f321a97938474d058c969eef9769b81e12558d45', class: "w-1/4" }, h(ZInput, { key: '51fc25c43e234da4b552c0716422eb368c8fb12a', placeholder: t('chat_filter.quantity'), value: this.filter.verifySlipValue?.toString() || '', onChange: value => this.handleChange('verifySlipValue', Number.parseInt(value) || 0) })), h("p", { key: '5fd3d21883cdf200dca75fd353a7882d197184f7', class: "text-sm mt-2" }, t('chat_filter.times'))))), haveConnectionFromZwiz() && this.renderZrmz(), haveConnectionFromZwiz() && this.renderZerva())), this.filterType === 'advanced' && h("div", { key: 'f9cd50989761cb91f64094b8f2cc36ea1a187c5c', class: "dialog-search-action-wrapper" }, h(ZButton, { key: 'ae3ef5c554f6f1bbad56cc9e48fab5ae9c7555ba', label: t('search_data'), fullWidth: true, onClick: this.handleSubmit })), this.filterType === 'custom' && !this.selectedFilter && h("div", { key: '46665e28993d265701972ed98d421273cac14616', class: "dialog-search-action-wrapper" }, h(ZButton, { key: '2ba3ae3046e078116b001cba1827b12a49838e5a', label: t('chat_filter.add_custom_filter'), fullWidth: true, onClick: this.handleCreateCustomFilter, disabled: !this.filter.name })), this.filterType === 'custom' && this.selectedFilter && h("div", { key: 'de2b0a2ba48176239f9c8cfaa6930ebc2b3dd779', class: "dialog-search-action-wrapper" }, h(ZButton, { key: '92bbaedfe6ea480ba27a94ad8f35a5fc5ae1c8b0', label: t('save'), fullWidth: true, onClick: this.handleUpdateCustomFilter, disabled: !this.filter.name || !this.isEnableUpdateCustomFilter() }), h(ZButton, { key: 'dcd226e138c6ffb723bbe23976eed4730550492a', variant: 'text-underline', label: t('delete'), fullWidth: true, onClick: this.handleDeleteCustomFilter })))));
     }
     static get is() { return "dialog-search"; }
     static get originalStyleUrls() {
@@ -85,7 +233,7 @@ export class DialogSearch {
                 "mutable": false,
                 "complexType": {
                     "original": "SearchChatsParams",
-                    "resolved": "{ search?: string; spam?: boolean; read?: boolean; connectionIds?: string[]; lastAnswerByIds?: string[]; statusIds?: string[]; tagIds?: string[]; }",
+                    "resolved": "{ name?: string; search?: string; spam?: boolean; type?: \"user\" | \"group\"; read?: boolean; context?: string; connectionIds?: string[]; lastAnswerByIds?: string[]; statusIds?: string[]; tagIds?: string[]; verifySlip?: string; verifySlipValue?: number; zrmz?: { isOnlyCustomers?: boolean; shopId?: string; name?: string; phoneNumber?: string; email?: string; totalPointType?: string; totalPointMin?: number; totalPointMax?: number; remainingPointType?: string; remainingPointMin?: number; remainingPointMax?: number; }; zerva?: { isOnlyCustomers?: boolean; shopId?: string; bookingNo?: string; name?: string; phoneNumber?: string; email?: string; bookingStartDate?: string; bookingEndDate?: string; paymentStatus?: string; bookingStatus?: string; }; }",
                     "references": {
                         "SearchChatsParams": {
                             "location": "import",
@@ -102,12 +250,57 @@ export class DialogSearch {
                 },
                 "getter": false,
                 "setter": false
+            },
+            "filterType": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'quick' | 'advanced' | 'custom'",
+                    "resolved": "\"advanced\" | \"custom\" | \"quick\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "filter-type",
+                "defaultValue": "'advanced'"
+            },
+            "selectedFilter": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "ChatFilter",
+                    "resolved": "{ id: string; name: string; search?: string; read?: boolean; type?: \"user\" | \"group\"; connection_ids?: string[]; last_answer_by_ids?: string[]; status_ids?: string[]; tag_ids?: string[]; created_at?: string; updated_at?: string; }",
+                    "references": {
+                        "ChatFilter": {
+                            "location": "import",
+                            "path": "../../api/type",
+                            "id": "src/api/type.ts::ChatFilter"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false
             }
         };
     }
     static get states() {
         return {
-            "filter": {}
+            "filter": {},
+            "isShowAdvancedZrmz": {},
+            "isShowAdvancedZerva": {}
         };
     }
     static get events() {
@@ -138,7 +331,7 @@ export class DialogSearch {
                 },
                 "complexType": {
                     "original": "SearchChatsParams",
-                    "resolved": "{ search?: string; spam?: boolean; read?: boolean; connectionIds?: string[]; lastAnswerByIds?: string[]; statusIds?: string[]; tagIds?: string[]; }",
+                    "resolved": "{ name?: string; search?: string; spam?: boolean; type?: \"user\" | \"group\"; read?: boolean; context?: string; connectionIds?: string[]; lastAnswerByIds?: string[]; statusIds?: string[]; tagIds?: string[]; verifySlip?: string; verifySlipValue?: number; zrmz?: { isOnlyCustomers?: boolean; shopId?: string; name?: string; phoneNumber?: string; email?: string; totalPointType?: string; totalPointMin?: number; totalPointMax?: number; remainingPointType?: string; remainingPointMin?: number; remainingPointMax?: number; }; zerva?: { isOnlyCustomers?: boolean; shopId?: string; bookingNo?: string; name?: string; phoneNumber?: string; email?: string; bookingStartDate?: string; bookingEndDate?: string; paymentStatus?: string; bookingStatus?: string; }; }",
                     "references": {
                         "SearchChatsParams": {
                             "location": "import",

package/dist/collection/components/internal-component/icon.js

@@ -1,6 +1,6 @@
 import { h } from "@stencil/core";
 // Import only icons actually used in the project (49 icons instead of 1000+)
-import { ArrowDown, ArrowRight, Ban, Bot, Camera, Check, ChevronDown, ChevronLeft, ChevronRight, ChevronUp, CircleCheck, CircleMinus, CircleOff, CircleX, Edit, Ellipsis, EllipsisVertical, File, Folder, Globe, Image, ImageOff, Inbox, Info, Languages, Loader2, LoaderCircle, Mail, MailCheck, MailWarning, MessageSquareText, MoreVertical, Paperclip, Pencil, Pin, Play, Plus, Reply, RotateCw, Save, Search, Send, SlidersHorizontal, SquareMenu, Touchpad, Trash2, Triangle, TriangleAlert, Unlink, UserRound, UserSearch, UsersRound, X, } from "lucide";
+import { ArrowDown, ArrowRight, Ban, Bot, Camera, Check, ChevronDown, ChevronLeft, ChevronRight, ChevronUp, CircleCheck, CircleMinus, CircleOff, CircleX, Edit, Ellipsis, EllipsisVertical, File, Folder, Globe, Image, ImageOff, Inbox, Info, Languages, Loader2, LoaderCircle, Mail, MailCheck, MailWarning, MessageSquareText, MoreVertical, Paperclip, Pencil, Pin, Play, Plus, Reply, RotateCw, Save, Search, Send, SlidersHorizontal, SquareMenu, Touchpad, Trash2, Triangle, TriangleAlert, Unlink, UserRound, UserSearch, UsersRound, X, BotMessageSquare, Filter, } from "lucide";
 // Icon map for tree-shaking - only includes icons actually used
 const iconMap = {
     ArrowDown,
@@ -56,6 +56,8 @@ const iconMap = {
     UserSearch,
     UsersRound,
     X,
+    BotMessageSquare,
+    Filter,
 };
 export const Icon = ({ name, addClass }) => {
     const icon = iconMap[name];

package/dist/collection/components/internal-component/z-button.js

@@ -1,5 +1,5 @@
 import { h } from "@stencil/core";
-export const ZButton = ({ id, variant = 'primary', textVariant = 'primary', disabled = false, onClick, fullWidth, maxWidth, label, startIcon, endIcon, size = 'medium', ref, title, }) => {
+export const ZButton = ({ id, variant = 'primary', textVariant = 'primary', disabled = false, onClick, fullWidth, maxWidth, label, startIcon, endIcon, size = 'medium', ref, title, padding, }) => {
     let styleSize = 'z-button-medium';
     if (size === 'small') {
         styleSize = 'z-button-small';
@@ -7,11 +7,26 @@ export const ZButton = ({ id, variant = 'primary', textVariant = 'primary', disa
     if (size === 'large') {
         styleSize = 'z-button-large';
     }
-    const base = `z-button ${styleSize} ${fullWidth ? 'w-full' : maxWidth ? maxWidth : ''}`;
+    const base = `z-button ${padding} ${styleSize} ${fullWidth ? 'w-full' : maxWidth ? maxWidth : ''}`;
     const primary = 'z-button-primary';
     const outlined = 'z-button-outlined';
     const text = `${textVariant === 'primary' ? 'text-primary' : 'text-surface'} hover:brightness-110`;
+    const textUnderline = `${textVariant === 'primary' ? 'text-primary' : 'text-surface'} hover:brightness-110 underline`;
     const disabledStyle = 'z-button-disabled';
-    const classList = [base, variant === 'primary' ? primary : variant === 'outlined' ? outlined : text, disabled ? disabledStyle : ''].join(' ');
-    return (h("button", { id: id, title: title, ref: ref, class: classList, disabled: disabled, onClick: e => !disabled && onClick?.(e) }, startIcon, h("span", { class: "z-button-text", id: id }, label), endIcon));
+    let variantClass;
+    if (variant === 'primary') {
+        variantClass = primary;
+    }
+    else if (variant === 'outlined') {
+        variantClass = outlined;
+    }
+    else if (variant === 'text-underline') {
+        variantClass = textUnderline;
+    }
+    else {
+        variantClass = text;
+    }
+    const disabledClass = disabled ? disabledStyle : '';
+    const classList = [base, variantClass, disabledClass].filter(Boolean).join(' ');
+    return (h("button", { id: id, title: title, ref: ref, class: classList, disabled: disabled, onClick: e => !disabled && onClick?.(e) }, startIcon, label && h("span", { class: "z-button-text", id: id }, label), endIcon));
 };

package/dist/collection/components/internal-component/z-input.js

@@ -2,5 +2,5 @@ import { h } from "@stencil/core";
 import { configStore } from "../../store/store";
 export const ZInput = ({ id, label, placeholder = '', value = '', onChange, onKeyDown, autoFocus, type = 'text', error }) => {
     const theme = configStore.get('theme');
-    return (h("div", { class: "mb-4", "data-theme": theme }, label && h("label", { class: "z-input-label" }, label), h("input", { id: id, type: type, placeholder: placeholder, class: "z-input", value: value, onInput: (e) => onChange?.(e.target.value), onKeyDown: onKeyDown, autoFocus: autoFocus }), error && h("p", { class: "z-input-error" }, error)));
+    return (h("div", { class: "mb-2", "data-theme": theme }, label && h("label", { class: "z-input-label" }, label), h("input", { id: id, type: type, placeholder: placeholder, class: "z-input", value: value, onInput: (e) => onChange?.(e.target.value), onKeyDown: onKeyDown, autoFocus: autoFocus }), error && h("p", { class: "z-input-error" }, error)));
 };