@antscorp/antsomi-ui 2.0.113 → 2.0.115

package/es/components/molecules/TagifyInput/constants.js

@@ -5,15 +5,32 @@ export const DIMENSIONS = {
     TAG_H: 24,
 };
 export const { MIN_H_WRAPPER, TAG_H } = DIMENSIONS;
+export const TAG_STATUS = {
+    REMOVED: 'removed',
+    ARCHIVED: 'archived',
+    ACTIVE: 'active',
+    INACTIVE: 'inactive',
+    EXPIRED: 'expired',
+    WARNING: 'warning',
+    ERROR: 'error',
+    INVALID: 'invalid',
+    DO_NOT_VIEW: 'do-not-view',
+};
 export const TAG_CUSTOM_ATTRIBUTES = {
+    PREPARING_ST: 'preparing-setting',
     READONLY_TAG: 'readonly-tag',
     INVALID_TAG: 'invalid-tag',
     REMOVED_TAG: 'removed-tag',
     NO_VIEW_TAG: 'no-view-tag',
     MESSAGE_TAG: 'message-tag',
     FORCE_SHOW_TOOLTIP: 'force-show-tooltip',
+    ERROR_TAG: 'error-tag',
+    WARNING_TAG: 'warning-tag',
+    PRIORITY_COLOR_TYPE: 'priority-color-type',
+    BG_COLOR_PERSONALIZE_TYPE: 'bg-color-personalize-type',
+    BG_COLOR_PERSONALIZE_TYPE_V2: 'bgColorPersonalizeType',
 };
-export const { READONLY_TAG, INVALID_TAG, REMOVED_TAG, NO_VIEW_TAG, MESSAGE_TAG, FORCE_SHOW_TOOLTIP, } = TAG_CUSTOM_ATTRIBUTES;
+export const { PREPARING_ST, READONLY_TAG, INVALID_TAG, REMOVED_TAG, NO_VIEW_TAG, MESSAGE_TAG, FORCE_SHOW_TOOLTIP, ERROR_TAG, WARNING_TAG, PRIORITY_COLOR_TYPE, BG_COLOR_PERSONALIZE_TYPE, BG_COLOR_PERSONALIZE_TYPE_V2, } = TAG_CUSTOM_ATTRIBUTES;
 export const defaultCssVariables = {
     '--input-color': globalToken?.colorText,
     '--input-font-size': `${globalToken?.fontSize}px`,
@@ -58,6 +75,7 @@ export const tagifyDefaultProps = {
     placeholder: undefined,
     minWidthPlaceholder: 130,
     acceptableTagPattern: DEFAULT_ACCEPT_TAGS,
+    mapErrorAttributes: {},
     onChange: () => { },
 };
 export const TAG_TYPE = {
@@ -75,9 +93,12 @@ export const TAG_TYPE = {
     SHORT_LINK_V2: 'shortlink_v2',
     DETECT_LINK: 'detect_link',
     CONTENT_SOURCE_GROUP: 'groups',
+    ALLOCATED_CODE: 'allocated_code',
+    CUSTOM_TAG: 'custom_tag', // Refer to all tag type
     UNSUBSCRIBE_WHATSAPP: 'unsubscribe_whatsapp',
 };
-export const { CUSTOMER, VISITOR, EVENT, JOURNEY, CAMPAIGN, VARIANT, PROMOTION_CODE, CUSTOM_FN, EMOJI, DETECT_LINK, SHORT_LINK, SHORT_LINK_V2, OBJECT_WIDGET, CONTENT_SOURCE_GROUP, UNSUBSCRIBE_WHATSAPP, } = TAG_TYPE;
+export const { CUSTOMER, VISITOR, EVENT, JOURNEY, CAMPAIGN, VARIANT, PROMOTION_CODE, CUSTOM_FN, EMOJI, DETECT_LINK, SHORT_LINK, SHORT_LINK_V2, OBJECT_WIDGET, CONTENT_SOURCE_GROUP, ALLOCATED_CODE, CUSTOM_TAG, UNSUBSCRIBE_WHATSAPP, } = TAG_TYPE;
+export const TAG_TYPE_LIST = Object.freeze(Object.values(TAG_TYPE));
 export const SHORT_LINK_TYPE = {
     INDIVIDUAL: 'shortlink', // Individual link
     GENERAL: 'shortlink_static', // General link
@@ -107,6 +128,8 @@ export const TAG_COLOR = {
     [CUSTOM_FN]: '#bbefbe',
     [CONTENT_SOURCE_GROUP]: '#ffdd9f',
     [EMOJI]: 'transparent',
+    [ALLOCATED_CODE]: '#DAA7F8',
+    [CUSTOM_TAG]: 'transparent',
     [UNSUBSCRIBE_WHATSAPP]: '#cafedd',
 };
 export const EMOJI_COLLECTIONS = {

package/es/components/molecules/TagifyInput/patternHandlers.d.ts

@@ -1,11 +1,9 @@
-import type { AcceptablePattern, MapAttributesProps, PatterTagName, PatternHandlerWrapper } from './types';
+import type { AcceptablePattern, MapAttributesProps, PatterTagName, PatternHandlerWrapper, TagTypeProperty } from './types';
 interface TagInfo {
     label: string;
     type: string;
-    isValid: boolean;
-    message?: string;
-    isRemoved?: boolean;
-    hasViewPermission?: boolean;
+    status: string;
+    statusMsg: string;
 }
 /**
  * Retrieves a cached regular expression or compiles and caches it if not found.
@@ -18,7 +16,15 @@ export declare function getCachedRegex(pattern: string, flags?: string, cacheKey
 export declare const detectURLRegex: RegExp;
 export declare const tagRegexStringPattern = "\\[\\[({.*?})\\]\\]";
 export declare function acceptablePatternChecking(pattern: AcceptablePattern, acceptablePattern: Array<AcceptablePattern>): boolean;
-export declare const getPersonalizeTagInfo: (originalTag: string, mapAttributes?: MapAttributesProps, mapErrorAttributes?: MapAttributesProps) => TagInfo;
+/**
+ * Extracts the custom tag ID from a merge code if the tag type is a custom tag.
+ *
+ * @param {TagTypeProperty} tagType - The type of the tag to check.
+ * @param {string} mergeCode - The merge code containing the tag information, typically in the format "type.customTagId||additionalInfo".
+ * @returns {string} The extracted custom tag ID if the tag type is a custom tag; otherwise, empty string.
+ */
+export declare const getCustomTagId: (tagType: TagTypeProperty, mergeCode: string) => string;
+export declare const getPersonalizeTagInfo: (originalTag: string, mapAttributes: MapAttributesProps, mapErrorAttributes: MapAttributesProps) => TagInfo;
 export declare const getShortLinkTagInfo: (params: {
     type: string;
     label: string;

package/es/components/molecules/TagifyInput/patternHandlers.js

@@ -9,7 +9,8 @@ import { isViberEmoji } from './iconsViber';
 import { random } from '@antscorp/antsomi-ui/es/utils';
 import { containsTagType } from './utils';
 // Constants
-import { CONTENT_SOURCE_GROUP, EMOJI, EMOJI_COLLECTIONS, LINE_EMOJI_PTN, PERSONALIZE_PTN, PREFIX_PATTERN_LINE_MESSAGE, PROMOTION_CODE, SHORT_LINK, SHORT_LINK_GENERAL_PTN, SHORT_LINK_INDIVIDUAL_PTN, SHORT_LINK_PTN, SHORT_LINK_TYPE, SHORT_LINK_V2, SHORT_LINK_V2_GENERAL_PTN, SHORT_LINK_V2_INDIVIDUAL_PTN, VIBER_EMOJI_PTN, UNSUBSCRIBE_WHATSAPP, UNSUBSCRIBE_WHATSAPP_PTN, UNSUBSCRIBE_PTN, } from './constants';
+import { CONTENT_SOURCE_GROUP, EMOJI, EMOJI_COLLECTIONS, LINE_EMOJI_PTN, PERSONALIZE_PTN, PREFIX_PATTERN_LINE_MESSAGE, PROMOTION_CODE, SHORT_LINK, SHORT_LINK_GENERAL_PTN, SHORT_LINK_INDIVIDUAL_PTN, SHORT_LINK_PTN, SHORT_LINK_TYPE, SHORT_LINK_V2, SHORT_LINK_V2_GENERAL_PTN, SHORT_LINK_V2_INDIVIDUAL_PTN, TAG_STATUS, TAG_TYPE, VIBER_EMOJI_PTN, UNSUBSCRIBE_WHATSAPP, UNSUBSCRIBE_WHATSAPP_PTN, UNSUBSCRIBE_PTN, } from './constants';
+const { CUSTOM_TAG } = TAG_TYPE;
 /*
  * Usage to cache compiled regular expressions:
  * const regex = getCachedRegex(pattern, flags);
@@ -202,6 +203,21 @@ const getContentSourceLabel = (attributeName, subAttributeName, mapAttributes) =
     }
     return attributeName;
 };
+/**
+ * Extracts the custom tag ID from a merge code if the tag type is a custom tag.
+ *
+ * @param {TagTypeProperty} tagType - The type of the tag to check.
+ * @param {string} mergeCode - The merge code containing the tag information, typically in the format "type.customTagId||additionalInfo".
+ * @returns {string} The extracted custom tag ID if the tag type is a custom tag; otherwise, empty string.
+ */
+export const getCustomTagId = (tagType, mergeCode) => {
+    const isCustomTag = tagType === CUSTOM_TAG;
+    if (!isCustomTag)
+        return '';
+    const [tagCode] = mergeCode.split('||');
+    const [, customTagId] = tagCode.split('.');
+    return customTagId;
+};
 /**
  * Retrieves the label for a attribute tag.
  * @param {string} type - The type from the original tag.
@@ -221,7 +237,9 @@ const getLabelAttribute = (type, attributeName, subAttributeName, mapAttributes)
             mapping[attributeName]?.value ||
             type);
     }
-    const combineAttribute = `${attributeName}.${subAttributeName}`;
+    const combineAttribute = subAttributeName
+        ? `${attributeName}.${subAttributeName}`
+        : attributeName;
     return (mapping[combineAttribute]?.label ||
         mapping[combineAttribute]?.display ||
         mapping[combineAttribute]?.template_name ||
@@ -231,79 +249,104 @@ export const getPersonalizeTagInfo = (originalTag, mapAttributes, mapErrorAttrib
     try {
         const [type, attributeName, subAttributeName] = originalTag.split('.');
         const isCsGroup = type === CONTENT_SOURCE_GROUP;
-        if (!mapAttributes || (!mapAttributes[type] && !isCsGroup)) {
-            // return fallback if no mapping
-            return { type, label: attributeName || type, isValid: false, isRemoved: false };
-        }
+        const combineAttribute = subAttributeName
+            ? `${attributeName}.${subAttributeName}`
+            : attributeName;
+        let status = '';
+        let statusMsg = '';
         // Get label based on mapping
         const label = isCsGroup
             ? getContentSourceLabel(attributeName, subAttributeName, mapAttributes)
             : getLabelAttribute(type, attributeName, subAttributeName, mapAttributes);
-        // Check additional case for each tag type
-        let [isValid, message, isRemoved, hasViewPermission] = [true, '', false, true];
         switch (type) {
             case PROMOTION_CODE: {
-                // Check if the code is exist in the map
-                if (mapAttributes[type] && attributeName) {
-                    const isExistPromotionPool = has(mapAttributes[type], attributeName);
-                    if (!isExistPromotionPool) {
-                        isValid = false;
-                        message = 'This pool does not exist anymore';
-                        if (mapErrorAttributes &&
-                            mapErrorAttributes[type] &&
-                            mapErrorAttributes[type][attributeName]) {
-                            const { isEdit = false, isView = false, isExist = true, } = mapErrorAttributes[type][attributeName] || {};
-                            // Case Pool removed
-                            if (!isExist) {
-                                isRemoved = !isExist;
-                                message = translate(translations._PERSONALIZATION_TAG_ERR_REMOVED, 'This pool is removed');
-                            }
-                            else if (!isView) {
-                                // Case No permission
-                                hasViewPermission = isView;
-                                message = translate(translations._PERMISSION_ERR_POOL, 'You do not have permission on this pool');
-                            }
-                        }
+                if (has(mapErrorAttributes, [type, attributeName])) {
+                    status = TAG_STATUS.INVALID;
+                    statusMsg = 'This pool does not exist anymore';
+                    const { 
+                    // isEdit = false,
+                    isView = false, isExist = true, isArchived: _isArchived = false, isActive: _isActive = true, isExpired: _isExpired = false, } = mapErrorAttributes?.[type]?.[attributeName] || {};
+                    if (!isExist) {
+                        // Case Pool Removed
+                        status = TAG_STATUS.REMOVED;
+                        statusMsg = translate(translations._PERSONALIZATION_TAG_ERR_REMOVED, 'This pool is removed');
+                    }
+                    else if (_isArchived) {
+                        // Case Pool is Archived
+                        status = TAG_STATUS.ARCHIVED;
+                        statusMsg = translate(translations._PERSONALIZATION_TAG_ERR_ATT_ARCHIVE, 'This attribute has been archived');
+                    }
+                    else if (!_isActive) {
+                        // Case Pool is Inactive
+                        status = TAG_STATUS.INACTIVE;
+                        statusMsg = translate(translations._PERSONALIZATION_TAG_ERR_POOL_DEACTIVATE, 'This pool has been deactivated. You have to turn it on to use');
+                    }
+                    else if (_isExpired) {
+                        // Case Pool is Expired
+                        status = TAG_STATUS.EXPIRED;
+                        statusMsg = translate(translations._PERSONALIZATION_TAG_ERR_POOL_EXPIRE, 'This pool has expired, new codes could not be allocated');
+                    }
+                    else if (!isView) {
+                        // Case Pool Can't View
+                        status = TAG_STATUS.DO_NOT_VIEW;
+                        statusMsg = translate(translations._PERMISSION_ERR_POOL, 'You do not have permission on this pool');
                     }
                 }
+                // }
+                break;
+            }
+            case CUSTOM_TAG: {
                 break;
             }
             default: {
+                if (has(mapErrorAttributes, [type, combineAttribute])) {
+                    status = TAG_STATUS.ERROR;
+                    statusMsg = 'This attribute does not exist anymore';
+                    const { isArchived: _isArchived = false, isActive: _isActive = true, isExpired: _isExpired = false, } = mapErrorAttributes?.[type]?.[combineAttribute] || {};
+                    if (_isArchived) {
+                        // Case Tag is Archived
+                        status = TAG_STATUS.ARCHIVED;
+                        statusMsg = translate(translations._PERSONALIZATION_TAG_ERR_ATT_ARCHIVE, 'This attribute has been archived');
+                    }
+                }
                 break;
             }
         }
         return {
             type,
-            message,
-            isValid,
             label: label || type,
-            isRemoved,
-            hasViewPermission,
+            status,
+            statusMsg,
         };
     }
     catch (error) {
         console.error('Error in getTagLabel', error);
-        return { label: originalTag, type: originalTag, isValid: false, isRemoved: false };
+        return {
+            label: originalTag,
+            type: originalTag,
+            status: TAG_STATUS.ERROR,
+            statusMsg: 'This tag does not exist anymore',
+        };
     }
 };
 export const getShortLinkTagInfo = (params) => {
     const { type, label, url, shortener, mapAttributes, mapErrorAttributes } = params;
     try {
-        let [isValid, message] = [true, ''];
+        let [status, statusMsg] = ['', ''];
         switch (type) {
             case SHORT_LINK_V2:
                 if (mapAttributes && mapAttributes[type]) {
                     const isExistShortLink = has(mapAttributes[type], shortener);
                     if (!isExistShortLink) {
-                        isValid = false;
-                        message = translate(translations?._PER_TAG_LINK_ERR || '', 'This shortener is inactivated or removed');
+                        status = TAG_STATUS.INVALID;
+                        statusMsg = translate(translations?._PER_TAG_LINK_ERR || '', 'This shortener is inactivated or removed');
                         if (mapErrorAttributes &&
                             mapErrorAttributes?.[type] &&
                             mapErrorAttributes?.[type]?.[shortener]) {
                             const { isView = true, isExist = true } = mapErrorAttributes[type][shortener] || {};
                             if (!isExist || !isView) {
-                                isValid = false;
-                                message = translate(translations?._PER_TAG_LINK_ERR || '', 'This shortener is inactivated or removed');
+                                status = TAG_STATUS.REMOVED;
+                                statusMsg = translate(translations?._PER_TAG_LINK_ERR || '', 'This shortener is inactivated or removed');
                             }
                         }
                     }
@@ -314,9 +357,9 @@ export const getShortLinkTagInfo = (params) => {
         }
         return {
             type,
-            message,
-            isValid,
             label,
+            status,
+            statusMsg,
         };
     }
     catch (error) {
@@ -324,8 +367,8 @@ export const getShortLinkTagInfo = (params) => {
         return {
             label,
             type,
-            isValid: false,
-            message: translate('', 'This shortener is inactivated or removed'),
+            status: TAG_STATUS.ERROR,
+            statusMsg: translate(translations._PER_TAG_LINK_ERR, 'This shortener is inactivated or removed'),
         };
     }
 };
@@ -491,6 +534,8 @@ const handlePersonalizeTagPattern = match => {
         type: type,
         value: personalizeTag,
         attributeName,
+        subAttributeName,
+        key: subAttributeName ? `${attributeName}.${subAttributeName}` : attributeName,
     };
     const tag = createTagPattern(tagData);
     return { isValid: true, tag, tagData };

package/es/components/molecules/TagifyInput/types.d.ts

@@ -1,9 +1,20 @@
 /// <reference types="yaireo__tagify" />
 import Tagify, { ClassNameSettings, TagData, TagifySettings } from '@yaireo/tagify';
-import { EMOJI_COLLECTIONS, PATTERN_CACHE_TYPE, SHORT_LINK_TYPE, TAG_TYPE } from './constants';
+import { EMOJI_COLLECTIONS, PATTERN_CACHE_TYPE, SHORT_LINK_TYPE, TAG_COLOR, TAG_STATUS, TAG_TYPE } from './constants';
 import { type CSSProperties } from 'react';
+export type TagType = (typeof TAG_TYPE)[keyof typeof TAG_TYPE];
+export type TagTypeProperty = Exclude<TagType, 'detect_link' | 'emoji' | 'shortlink'>;
+export type TagProperty = {
+    [key: string]: any;
+    displayName: string;
+    type: TagTypeProperty;
+};
+export type TagProperties = Record<string, TagProperty>;
+export type TagAttribute = [string, string];
+export type TagStatus = (typeof TAG_STATUS)[keyof typeof TAG_STATUS];
 export type MapAttributesProps = Record<string, Record<string, any>>;
 export type StatusType = 'error' | 'success' | 'warning';
+export type BackgroundColorPersonalizeType = Exclude<keyof typeof TAG_COLOR, 'detect_link' | 'emoji' | 'shortlink'>;
 /**
  * Interface defining the properties for the Tagify input component.
  * Provides configuration options and event handlers to manage Tagify's behavior and appearance.
@@ -27,6 +38,11 @@ export interface TagifyInputProps {
      * @default true
      */
     realtime?: boolean;
+    /**
+     * Defines the custom properties associated with tags.
+     * Allows for additional customization of tag attributes, labels, and types.
+     */
+    tagProperties?: TagProperties;
     /**
      * Optional mapping configuration for custom attributes associated with tags.
      * Defines how tag attributes are mapped and processed internally.
@@ -118,6 +134,11 @@ export interface TagifyInputProps {
      * Receives the tag detail as parameter, allowing custom actions on tag click.
      */
     onTagClick?: (tagDetail: Tagify.ClickEventData<TagDataCustomize>) => void;
+    /**
+     * Event handler triggered when a tag is removed.
+     * Receives the tag detail as parameter, allowing custom actions on tag removal.
+     */
+    onTagRemove?: (tagDetail: Tagify.RemoveEventData<TagDataCustomize>) => void;
     /**
      * Event handler triggered when the input value changes.
      * Receives the updated input value as a string, allowing for controlled component updates.
@@ -136,7 +157,6 @@ export interface TagifyInputRef {
     onReload: (newValue: string) => void;
 }
 export type EmojiCollection = (typeof EMOJI_COLLECTIONS)[keyof typeof EMOJI_COLLECTIONS];
-export type TagType = (typeof TAG_TYPE)[keyof typeof TAG_TYPE];
 export type ShortLinkType = (typeof SHORT_LINK_TYPE)[keyof typeof SHORT_LINK_TYPE];
 export type PatternCacheType = (typeof PATTERN_CACHE_TYPE)[keyof typeof PATTERN_CACHE_TYPE];
 export type PatterTagName = Exclude<PatternCacheType, 'shortlink_pattern' | 'unsubscribe_pattern'>;
@@ -145,8 +165,9 @@ export interface TagDataText extends TagData {
     value: string;
     label: string;
     type: TagType;
+    bgColorPersonalizeType?: BackgroundColorPersonalizeType;
 }
-export interface TagDataEmoji extends Omit<TagDataText, 'type'> {
+export interface TagDataEmoji extends Omit<TagDataText, 'type' | 'bgColorPersonalizeType'> {
     value: string;
     type: Extract<TagType, 'emoji'>;
     collection: EmojiCollection;

package/es/components/molecules/TagifyInput/utils.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="yaireo__tagify" />
 import Tagify from '@yaireo/tagify';
-import { AcceptablePattern, EmojiCollection, EmojiTag, TagDataCustomize, TagType } from './types';
+import { AcceptablePattern, TagAttribute, EmojiCollection, EmojiTag, TagDataCustomize, TagProperty, TagType } from './types';
 /**
  * Parses the input string and replaces matching patterns with processed tags.
  * This function iterates over predefined regex patterns and replaces each match
@@ -47,6 +47,12 @@ export declare const emojiManufacturer: (text: string, collectionType: EmojiColl
 export declare const getEmojiTag: ({ src, emoji, code }: EmojiTag) => string;
 export declare const isPersonalizeTagType: (type: TagType) => boolean;
 export declare const isShortLinkTagType: (type: TagType) => boolean;
+export declare const isCustomTagType: (type: TagType) => boolean;
+export declare const sanitizeTagAttributes: (tagElement: HTMLElement) => void;
+export declare const applyTagAttributes: (element: HTMLElement, attributes: TagAttribute[]) => void;
+export declare const getStatusTagAttributes: (statusMsg: string) => Record<string, TagAttribute[]>;
+export declare const getTagContentAttributes: (propertyType: string) => TagAttribute[];
+export declare const getTagAttributes: (property: TagProperty) => TagAttribute[];
 export declare const isUnsubscribeTagType: (type: TagType) => boolean;
 export declare const generateTagContent: (params: {
     tagData: TagDataCustomize;
@@ -196,3 +202,6 @@ export declare const getCurrentSelectionAndCloneRange: () => {
 };
 export declare const handleTextNodeBackspace: (range: Range) => void;
 export declare const handleEnterWithNextTag: (range: Range) => void;
+export declare function preventUndoRedo(e: CustomEvent<Tagify.KeydownEventData<TagDataCustomize>>['detail']['event'], { disableRedo }?: {
+    disableRedo?: boolean | undefined;
+}): void;

package/es/components/molecules/TagifyInput/utils.js

@@ -1,11 +1,13 @@
 // Libraries
 import stringReplaceToArray from 'string-replace-to-array';
 // Constants
-import { EMOJI_COLLECTIONS, PREFIX_PATTERN_LINE_MESSAGE, READONLY_TAG, SHORT_LINK_V2, TAG_TYPE, UNSUBSCRIBE_WHATSAPP, } from './constants';
+import { EMOJI_COLLECTIONS, PREFIX_PATTERN_LINE_MESSAGE, SHORT_LINK_V2, TAG_CUSTOM_ATTRIBUTES, TAG_STATUS, TAG_TYPE, UNSUBSCRIBE_WHATSAPP, } from './constants';
 import { iconsViber } from './iconsViber';
 // Utils
 import { acceptablePatternChecking, detectURLRegex, getCachedRegex, patternHandlers, tagRegexStringPattern, } from './patternHandlers';
-const { CUSTOMER, VISITOR, EVENT, JOURNEY, CAMPAIGN, VARIANT, PROMOTION_CODE, CUSTOM_FN, OBJECT_WIDGET, CONTENT_SOURCE_GROUP, } = TAG_TYPE;
+const { CUSTOMER, VISITOR, EVENT, JOURNEY, CAMPAIGN, VARIANT, PROMOTION_CODE, CUSTOM_FN, OBJECT_WIDGET, CONTENT_SOURCE_GROUP, ALLOCATED_CODE, CUSTOM_TAG, } = TAG_TYPE;
+const { PREPARING_ST, READONLY_TAG, INVALID_TAG, MESSAGE_TAG, ERROR_TAG, WARNING_TAG, PRIORITY_COLOR_TYPE, BG_COLOR_PERSONALIZE_TYPE, BG_COLOR_PERSONALIZE_TYPE_V2, } = TAG_CUSTOM_ATTRIBUTES;
+const { REMOVED, ARCHIVED, INACTIVE, INVALID, EXPIRED, WARNING, DO_NOT_VIEW, ERROR } = TAG_STATUS;
 /*
  * Custom error type for JSON parse errors
  */
@@ -400,13 +402,76 @@ export const isPersonalizeTagType = (type) => [
     OBJECT_WIDGET,
     CUSTOM_FN,
     CONTENT_SOURCE_GROUP,
+    ALLOCATED_CODE,
+    // CUSTOM_TAG,
 ].includes(type);
 export const isShortLinkTagType = (type) => [SHORT_LINK_V2].includes(type);
+export const isCustomTagType = (type) => type === CUSTOM_TAG;
+export const sanitizeTagAttributes = (tagElement) => {
+    const attributesToRemove = [INVALID_TAG, ERROR_TAG, WARNING_TAG, READONLY_TAG, MESSAGE_TAG];
+    attributesToRemove.forEach(attr => tagElement.removeAttribute(attr));
+};
+export const applyTagAttributes = (element, attributes) => {
+    attributes.forEach(([attr, value]) => element.setAttribute(attr, value));
+};
+export const getStatusTagAttributes = (statusMsg) => {
+    const statusAttributes = {
+        error: [
+            [ERROR_TAG, 'true'],
+            [MESSAGE_TAG, statusMsg],
+        ],
+        warning: [
+            [WARNING_TAG, 'true'],
+            [MESSAGE_TAG, statusMsg],
+        ],
+        invalid: [
+            [READONLY_TAG, 'true'],
+            [INVALID_TAG, 'true'],
+            [MESSAGE_TAG, statusMsg],
+        ],
+    };
+    return statusAttributes;
+};
+export const getTagContentAttributes = (propertyType) => [
+    [`data-${PRIORITY_COLOR_TYPE}`, propertyType],
+    [`data-${BG_COLOR_PERSONALIZE_TYPE}`, propertyType],
+];
+export const getTagAttributes = (property) => {
+    const { status, statusMsg, type } = property;
+    const attributes = [[BG_COLOR_PERSONALIZE_TYPE_V2, type]];
+    if (!statusMsg)
+        return attributes;
+    const statusAttributes = getStatusTagAttributes(statusMsg);
+    switch (status) {
+        case REMOVED:
+        case ARCHIVED:
+        case EXPIRED:
+        case ERROR:
+        case INACTIVE:
+            attributes.push(...statusAttributes.error);
+            break;
+        case WARNING:
+        case DO_NOT_VIEW:
+            attributes.push(...statusAttributes.warning);
+            break;
+        case INVALID:
+            attributes.push(...statusAttributes.invalid);
+            break;
+        default: {
+            break;
+        }
+    }
+    return attributes;
+};
 export const isUnsubscribeTagType = (type) => [UNSUBSCRIBE_WHATSAPP].includes(type);
 export const generateTagContent = (params) => {
     const { tagData, content } = params;
     let dataAttrsString = '';
     const dataAttrs = new Map([['tag-type', tagData.type]]);
+    if (tagData.bgColorPersonalizeType) {
+        dataAttrs.set(PRIORITY_COLOR_TYPE, tagData.bgColorPersonalizeType);
+        dataAttrs.set(BG_COLOR_PERSONALIZE_TYPE, tagData.bgColorPersonalizeType);
+    }
     if (tagData.type === TAG_TYPE.SHORT_LINK) {
         const { shortlinkType } = tagData;
         dataAttrs.set(`tag-${TAG_TYPE.SHORT_LINK}-type`, shortlinkType);
@@ -420,7 +485,7 @@ export const generateTagContent = (params) => {
         dataAttrsString = dataAttrsString.concat(` data-${key}="${value}"`);
     });
     return `
-    <div ${dataAttrsString}>
+    <div ${dataAttrsString} class="tagify__tag-content">
       ${content}
     </div>
   `;
@@ -553,9 +618,12 @@ export function isTagClickable(tagify, tag, tagData) {
         return false;
     }
     const isValidType = isValidTagType(type);
+    const preparingSetting = tag.getAttribute(PREPARING_ST);
     const readonlyTag = tag.getAttribute(READONLY_TAG);
+    const isTagReadonly = readonlyTag && readonlyTag === 'true';
+    const isPreparingSetting = preparingSetting && preparingSetting === 'true';
     const { readonly } = tagify.settings;
-    return !(readonly || (readonlyTag && readonlyTag === 'true') || !isValidType);
+    return !(readonly || isTagReadonly || isPreparingSetting || !isValidType);
 }
 /**
  * Finds text nodes within an HTML element that contain URLs.
@@ -728,3 +796,13 @@ export const handleEnterWithNextTag = (range) => {
         return;
     insertZeroWidthSpaceBeforeTag(currentNode);
 };
+export function preventUndoRedo(e, { disableRedo = false } = {}) {
+    const key = e.key.toLowerCase();
+    const isUndo = (e.ctrlKey || e.metaKey) && key === 'z';
+    const isRedo = (disableRedo && (e.ctrlKey || e.metaKey) && key === 'y') ||
+        ((e.ctrlKey || e.metaKey) && e.shiftKey && key === 'z');
+    if (isUndo || isRedo) {
+        e.preventDefault();
+        e.stopPropagation();
+    }
+}