@antscorp/antsomi-ui 1.3.5-beta.982 → 1.3.5-beta.984

package/es/components/molecules/AddDynamicContent/components/DisplayFormat/DisplayFormat.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import type { PayloadInfo } from '@antscorp/antsomi-ui/es/types';
 export type TDisplayFormat = 'number' | 'percentage' | 'currency' | 'datetime';
 type DisplayFormatProps = {

package/es/components/molecules/DisplayFormat/DisplayFormatSettings.js

@@ -43,10 +43,9 @@ export const DisplayFormatSettings = props => {
         if (displayFormatType === 'datetime') {
             formatDFValue = formatDatetimeDF(DATE_TIME_EXAMPLE, settings);
         }
-        return (_jsxs("div", { className: "ants-flex ants-items-center ants-gap-2 ant-flex-row", style: {
+        return (_jsxs("div", { className: "ants-flex ants-items-center ant-flex-row", style: {
                 display: 'flex',
                 alignItems: 'center',
-                gap: '8px',
                 marginBottom: '5px',
                 flexShrink: 0,
                 width: '100%',
@@ -64,7 +63,7 @@ export const DisplayFormatSettings = props => {
                                 whiteSpace: 'nowrap',
                                 flexShrink: 0,
                                 width: '100%',
-                                maxWidth: displayFormatType === 'datetime' ? '100%' : 'calc(98% + 1px)',
+                                maxWidth: displayFormatType === 'datetime' ? '100%' : 'calc(100% - 2.5px)',
                             }, suffixCount: 7, tooltip: true, children: formatDFValue }), _jsx(Button, { disabled: disabled, size: "small", icon: _jsx(EditIcon, { width: 16, height: 16, color: "#005EB8" }), className: "ants-border-none", style: {
                                 backgroundColor: showDetailEdit ? '#DEEFFE' : 'transparent',
                                 border: 'none',

package/es/components/molecules/InputSelectAttribute/index.d.ts

@@ -12,7 +12,7 @@ type Option = {
 export interface InputSelectAttributeProps {
     sourceOptions: Option[];
     codeOptions: Option[];
-    listSourceInit: Option[];
+    codeOptionsInitial?: Option[];
     label?: string;
     errorMsg?: string;
     value: Value;

package/es/components/molecules/InputSelectAttribute/index.js

@@ -1,8 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 // Libraries
 import { memo, useCallback, useEffect, useMemo, useState } from 'react';
-import { get, keyBy } from 'lodash';
-import { Form, Select, Typography } from 'antd';
+import { get, isUndefined, keyBy } from 'lodash';
+import { Flex, Form, Select, Tooltip, Typography } from 'antd';
 // Translations
 import { translate, translations } from '@antscorp/antsomi-ui/es/locales';
 // Components
@@ -10,10 +10,12 @@ import Icon from '@antscorp/icons';
 import { ModalV2 } from '../ModalV2';
 import { StyledTag as Tag } from '@antscorp/antsomi-ui/es/components/molecules/SelectV2/styled';
 import { StyledSelect } from './styled';
+import { EmptyData } from '../EmptyData';
+import { Dashboard30Icon, ErrorIcon } from '../../icons';
 // Constants
 import { THEME } from '@antscorp/antsomi-ui/es/constants';
 const InputSelectAttribute = (props) => {
-    const { value, errorMsg, label, listSourceInit = [], sourceOptions = [], codeOptions = [], onChange, onChangeSelectSource, } = props;
+    const { value, errorMsg, label, sourceOptions = [], codeOptions = [], codeOptionsInitial = [], onChange, onChangeSelectSource, } = props;
     const [form] = Form.useForm();
     // States
     const [openModal, setOpenModal] = useState(false);
@@ -28,13 +30,14 @@ const InputSelectAttribute = (props) => {
     });
     // Effects
     useEffect(() => {
-        if (attributeState.code === '') {
+        if (attributeState.code === '' ||
+            !codeOptions.find(option => option.value === attributeState.code)) {
             form.setFieldsValue({ code: codeOptions[0]?.value });
         }
     }, [attributeState, codeOptions, form]);
     // Memoized
     const mapCodeOpts = useMemo(() => keyBy(codeOptions, 'value'), [codeOptions]);
-    const listSourceInitOpts = useMemo(() => keyBy(listSourceInit, 'value'), [listSourceInit]);
+    const mapCodeOriginOpts = useMemo(() => keyBy(codeOptionsInitial, 'value'), [codeOptionsInitial]);
     const onOpenModal = useCallback(() => {
         setOpenModal(true);
     }, []);
@@ -66,6 +69,8 @@ const InputSelectAttribute = (props) => {
         let element = null;
         const isObjValue = value && typeof value !== 'string';
         if (openModal || isObjValue) {
+            const isErrorTag = (isObjValue &&
+                isUndefined(get(mapCodeOriginOpts, [value.code])));
             element = (_jsxs("div", { style: {
                     display: 'flex',
                     alignItems: 'center',
@@ -73,21 +78,21 @@ const InputSelectAttribute = (props) => {
                     height: 32,
                     padding: '4px 12px 4px 4px',
                     borderBottom: `1px solid ${errorMsg ? THEME.token?.colorError : THEME.token?.blue1}`,
-                }, children: [_jsx("div", { style: { width: '100%', cursor: 'pointer' }, onClick: onOpenModal, children: isObjValue && (_jsx(Tag, { children: get(mapCodeOpts, [value.code, 'label'], get(listSourceInitOpts, [value.code, 'label'])) })) }), _jsx(Icon, { type: "icon-ants-remove", style: { fontSize: 10, color: '#222', cursor: 'pointer' }, onClick: onDeselect })] }));
+                }, children: [_jsx("div", { style: { width: '100%', cursor: 'pointer' }, onClick: onOpenModal, children: isObjValue && (_jsx(Tag, { isError: isErrorTag, children: isErrorTag ? (_jsxs(Flex, { gap: 5, align: "center", children: ["Unknown", _jsx(Tooltip, { title: "The used dynamic content is removed", children: _jsx(ErrorIcon, { size: 16 }) })] })) : (get(mapCodeOpts, [value.code, 'label'], mapCodeOriginOpts[value.code]?.label)) })) }), _jsx(Icon, { type: "icon-ants-remove", style: { fontSize: 10, color: '#222', cursor: 'pointer' }, onClick: onDeselect })] }));
         }
         else {
-            element = (_jsx(StyledSelect, { mode: "multiple", options: [{ value: '', label: translate(translations.orSelectAField.title) }], notFoundContent: null, onSelect: onOpenModal, style: { width: '100%', borderTop: 'none', borderLeft: 'none', borderRight: 'none' }, onDeselect: onDeselect, autoClearSearchValue: false, searchValue: typeof value === 'string' ? value : '', onSearch: onChangeInput, status: errorMsg ? 'error' : undefined, placeholder: typeof value === 'string' ? value : translate(translations.inputYourValue.title), "$isPlaceholder": !value, "$isError": !!errorMsg, dropdownStyle: {
+            element = (_jsx(StyledSelect, { mode: "multiple", options: [{ value: '', label: 'Or select a field' }], notFoundContent: null, onSelect: onOpenModal, style: { width: '100%', borderTop: 'none', borderLeft: 'none', borderRight: 'none' }, onDeselect: onDeselect, autoClearSearchValue: false, searchValue: typeof value === 'string' ? value : '', onSearch: onChangeInput, status: errorMsg ? 'error' : undefined, placeholder: typeof value === 'string' ? value : translate(translations.inputYourValue.title), "$isPlaceholder": !value, "$isError": !!errorMsg, dropdownStyle: {
                     ...(openModal ? { display: 'none' } : {}),
                 } }));
         }
         return element;
     };
-    return (_jsxs(_Fragment, { children: [renderInput(), errorMsg ? (_jsx(Typography.Text, { style: { marginLeft: 8, color: THEME.token?.red8, marginTop: 5 }, children: errorMsg })) : null, _jsx(ModalV2, { title: translate(translations._PREDICT_MODEL_SELECT_ATTRIBUTE, 'Select attribute'), okText: translate(translations._ACT_APPLY, 'Apply'), open: openModal, onOk: onOk, onCancel: onHideModal, destroyOnClose: true, children: _jsxs(Form, { colon: false, form: form, initialValues: {
+    return (_jsxs(_Fragment, { children: [renderInput(), errorMsg ? (_jsx(Typography.Text, { style: { marginLeft: 8, color: THEME.token?.red8, marginTop: 5 }, children: errorMsg })) : null, _jsx(ModalV2, { title: translate(translations._PREDICT_MODEL_SELECT_ATTRIBUTE, 'Select attribute'), okText: translate(translations._ACT_APPLY, 'Apply'), open: openModal, onOk: onOk, onCancel: onHideModal, destroyOnClose: true, centered: true, children: _jsxs(Form, { colon: false, form: form, initialValues: {
                         sources: attributeState.source || sourceOptions[0]?.value,
                         code: attributeState.code || codeOptions[0]?.value,
-                    }, children: [_jsx(Form.Item, { label: translate(translations._TITL_PERSONALIZATION_TYPE, 'Content Source'), name: "sources", required: true, labelCol: { span: 6 }, labelAlign: "left", rules: [{ required: true, message: 'Please select field!' }], children: _jsx(Select, { suffixIcon: _jsx(Icon, { type: "icon-ants-expand-more", style: { fontSize: '20px', color: THEME.token?.colorIcon } }), options: sourceOptions, value: attributeState.source, onChange: newValue => {
+                    }, children: [_jsx(Form.Item, { label: translate(translations._TITL_PERSONALIZATION_TYPE, 'Content Source'), name: "sources", required: true, labelCol: { span: 6 }, labelAlign: "left", rules: [{ required: true, message: 'Please select field!' }], children: _jsx(Select, { suffixIcon: _jsx(Icon, { type: "icon-ants-expand-more", style: { fontSize: '20px', color: THEME.token?.colorIcon } }), options: sourceOptions, placeholder: "Please select an item", value: attributeState.source, onChange: newValue => {
                                     setAttributeState(state => ({ ...state, code: '', source: newValue }));
                                     onChangeSelectSource(newValue);
-                                } }) }), _jsx(Form.Item, { label: label || 'Allocated Code', required: true, labelCol: { span: 6 }, labelAlign: "left", name: "code", rules: [{ required: true, message: 'Please select field!' }], children: _jsx(Select, { suffixIcon: _jsx(Icon, { type: "icon-ants-expand-more", style: { fontSize: '20px', color: THEME.token?.colorIcon } }), value: attributeState.code, options: codeOptions }) })] }) })] }));
+                                } }) }), _jsx(Form.Item, { label: label || 'Allocated Code', required: true, labelCol: { span: 6 }, labelAlign: "left", name: "code", rules: [{ required: true, message: 'Please select field!' }], children: _jsx(Select, { suffixIcon: _jsx(Icon, { type: "icon-ants-expand-more", style: { fontSize: '20px', color: THEME.token?.colorIcon } }), notFoundContent: _jsx(EmptyData, { size: "small", icon: _jsx(Dashboard30Icon, {}), description: "No personalized content in this journey" }), placeholder: "Please select an item", value: attributeState.code, options: codeOptions }) })] }) })] }));
 };
 export default memo(InputSelectAttribute);

package/es/components/molecules/SelectV2/styled.d.ts

@@ -9,7 +9,9 @@ export declare const StyledSelect: import("styled-components").StyledComponent<(
     OptGroup: import("rc-select/lib/OptGroup").OptionGroupFC;
     _InternalPanelDoNotUseOrYouWillBeFired: (props: import("antd/es/_util/type").AnyObject) => import("react").JSX.Element;
 }, any, {}, never>;
-export declare const StyledTag: import("styled-components").StyledComponent<import("antd").TagType, any, {}, never>;
+export declare const StyledTag: import("styled-components").StyledComponent<import("antd").TagType, any, {
+    isError?: boolean | undefined;
+}, never>;
 export declare const CloseButton: import("styled-components").StyledComponent<"div", any, {
     borderColor?: any;
 }, never>;

package/es/components/molecules/SelectV2/styled.js

@@ -105,8 +105,8 @@ export const StyledTag = styled(Tag) `
   margin-right: 5px !important;
   padding: 5px 10px !important;
   border-radius: 15px !important;
-  border: none !important;
-  background-color: ${THEME.token?.blue2} !important;
+  border: ${p => (p.isError ? `1px solid ${THEME.token?.colorError}` : 'none')} !important;
+  background-color: ${p => (p.isError ? THEME.token?.bw0 : THEME.token?.blue2)} !important;
   cursor: pointer !important;
 
   .antsomi-tag-close-icon {

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

@@ -19,7 +19,7 @@ import { TagTextArea, TagifyWrapper, WrapperPlaceHolder } from './styled';
 import { parseTagStringToTagify, convertInputStringToOriginal, emojiManufacturer, getEmojiTag, isPersonalizeTagType, generateTagContent, unescapeString, hasLineBreak, selectRange, isTagClickable, findURLInTextNodes, getAttributesString, isAnchorNodeChildOfElement, isShortLinkTagType, isCustomTagType, sanitizeTagAttributes, getTagAttributes, applyTagAttributes, getTagContentAttributes, } from './utils';
 import { acceptablePatternChecking, detectURLRegex, getCachedRegex, getCustomTagId, getPersonalizeTagInfo, getShortLinkTagInfo, patternHandlers, } from './patternHandlers';
 // Constants
-import { DETECT_LINK, EMOJI, PERSONALIZE_PTN, PROMOTION_CODE, SHORT_LINK, SHORT_LINK_PTN, SHORT_LINK_V2, TAG_TYPE, defaultCssVariables, tagifyDefaultProps, TAG_CUSTOM_ATTRIBUTES, } from './constants';
+import { DETECT_LINK, EMOJI, PERSONALIZE_PTN, SHORT_LINK, SHORT_LINK_PTN, SHORT_LINK_V2, TAG_TYPE, defaultCssVariables, tagifyDefaultProps, TAG_CUSTOM_ATTRIBUTES, } from './constants';
 const { CUSTOM_TAG } = TAG_TYPE;
 const { READONLY_TAG, INVALID_TAG, MESSAGE_TAG, FORCE_SHOW_TOOLTIP, ERROR_TAG, WARNING_TAG } = TAG_CUSTOM_ATTRIBUTES;
 const TagifyInput = forwardRef((props, ref) => {
@@ -535,8 +535,8 @@ const TagifyInput = forwardRef((props, ref) => {
     /*
      * Any map attribute change will sync label of the tags
      */
-    const makeValidLabelTags = useCallback((attributes, errorAttributes, tagProperties) => {
-        if (tagifyRef.current && labelTagRefreshness) {
+    const makeValidLabelTags = useCallback((attributes, errorAttributes) => {
+        if (tagifyRef.current) {
             const tagElements = tagifyRef.current.getTagElms();
             const { pattern, name: cachePatternName, acceptablePattern: acceptableType, } = patternHandlers[PERSONALIZE_PTN];
             tagElements.forEach(tagElement => {
@@ -559,8 +559,7 @@ const TagifyInput = forwardRef((props, ref) => {
                         while ((match = regex.exec(value)) !== null) {
                             const [, personalizeContent] = match;
                             const [tagCode] = personalizeContent.split('||');
-                            const { label: tagLabel, isValid, message, type, isRemoved, canView, isArchived, isActive, isExpired, } = getPersonalizeTagInfo(tagCode, attributes, errorAttributes, tagProperties);
-                            const isPromotionCode = type === PROMOTION_CODE;
+                            const { label: tagLabel, type, status, statusMsg, } = getPersonalizeTagInfo(tagCode, attributes, errorAttributes);
                             const tagTextNode = tagifyRef.current?.getTagTextNode(tagElement);
                             /*
                              * Just only update to the correct text of the tag
@@ -575,22 +574,14 @@ const TagifyInput = forwardRef((props, ref) => {
                                 }
                                 // Remove all existing attributes
                                 sanitizeTagAttributes(tagElement);
-                                // In case promotion pool has something wrong
-                                if (message) {
-                                    if (isRemoved || isArchived || !isActive || isExpired) {
-                                        tagElement.setAttribute(ERROR_TAG, 'true');
-                                        tagElement.setAttribute(MESSAGE_TAG, message);
-                                    }
-                                    else if (!canView) {
-                                        tagElement.setAttribute(WARNING_TAG, 'true');
-                                        tagElement.setAttribute(MESSAGE_TAG, message);
-                                    }
-                                    else if (!isValid) {
-                                        tagElement.setAttribute(READONLY_TAG, 'true');
-                                        tagElement.setAttribute(INVALID_TAG, 'true');
-                                        tagElement.setAttribute(MESSAGE_TAG, message);
-                                    }
-                                }
+                                // Update new tag attributes
+                                const tagAttributes = getTagAttributes({
+                                    type: type,
+                                    status,
+                                    statusMsg,
+                                    displayName: tagLabel,
+                                });
+                                applyTagAttributes(tagElement, tagAttributes);
                             }
                         }
                     }
@@ -600,7 +591,7 @@ const TagifyInput = forwardRef((props, ref) => {
                         if (!isAccepted)
                             return;
                         const { url, shortener, label } = tagData;
-                        const { label: tagLabel, isValid, message, type: tagType, } = getShortLinkTagInfo({
+                        const { label: tagLabel, type: tagType, status, statusMsg, } = getShortLinkTagInfo({
                             type,
                             label,
                             shortener,
@@ -617,11 +608,14 @@ const TagifyInput = forwardRef((props, ref) => {
                             tagTextNode.textContent = tagLabel;
                             // Remove all existing attributes
                             sanitizeTagAttributes(tagElement);
-                            // In case promotion pool has something wrong
-                            if (!isValid && message) {
-                                tagElement.setAttribute(ERROR_TAG, 'true');
-                                tagElement.setAttribute(MESSAGE_TAG, message);
-                            }
+                            // Update new tag attributes
+                            const tagAttributes = getTagAttributes({
+                                type: type,
+                                status,
+                                statusMsg,
+                                displayName: tagLabel,
+                            });
+                            applyTagAttributes(tagElement, tagAttributes);
                         }
                     }
                 }
@@ -826,7 +820,7 @@ const TagifyInput = forwardRef((props, ref) => {
      * Need to sync label of the tags if any map attribute is changed to make correct label
      * */
     useDeepCompareEffect(() => {
-        makeValidLabelTags(mapAttributes, mapErrorAttributes, {});
+        makeValidLabelTags(mapAttributes, mapErrorAttributes);
     }, [mapAttributes, mapErrorAttributes, makeValidLabelTags]);
     useLayoutEffect(() => {
         if (tagProperties) {
@@ -882,7 +876,7 @@ const TagifyInput = forwardRef((props, ref) => {
                 const content = parseTagStringToTagify(textValue, acceptableTagPattern);
                 tagifyRef.current.loadOriginalValues(content);
                 // Need to sync label of the tags if any map attribute is changed to make correct label
-                makeValidLabelTags(mapAttributes, mapErrorAttributes, tagProperties);
+                makeValidLabelTags(mapAttributes, mapErrorAttributes);
             }
         }
     }, [
@@ -891,7 +885,6 @@ const TagifyInput = forwardRef((props, ref) => {
         mapErrorAttributes,
         escapeHTML,
         acceptableTagPattern,
-        tagProperties,
         makeValidLabelTags,
     ]);
     useEffect(() => {

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

@@ -1,14 +1,9 @@
-import type { AcceptablePattern, MapAttributesProps, PatterTagName, PatternHandlerWrapper, TagProperties, TagTypeProperty } from './types';
+import type { AcceptablePattern, MapAttributesProps, PatterTagName, PatternHandlerWrapper, TagTypeProperty } from './types';
 interface TagInfo {
     label: string;
     type: string;
-    isValid: boolean;
-    message?: string;
-    isRemoved?: boolean;
-    canView?: boolean;
-    isArchived?: boolean;
-    isActive?: boolean;
-    isExpired?: boolean;
+    status: string;
+    statusMsg: string;
 }
 /**
  * Retrieves a cached regular expression or compiles and caches it if not found.
@@ -29,7 +24,7 @@ export declare function acceptablePatternChecking(pattern: AcceptablePattern, ac
  * @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, tagProperties: TagProperties) => TagInfo;
+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

@@ -1,14 +1,14 @@
 /* eslint-disable no-cond-assign */
 /* eslint-disable no-console */
 // Libraries
-import { get, has } from 'lodash';
+import { has } from 'lodash';
 import { translate, translations } from '@antscorp/antsomi-locales';
 // Utils
 import { errorWrapper } from './errorWrapper';
 import { isViberEmoji } from './iconsViber';
 import { random } from '@antscorp/antsomi-ui/es/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, TAG_TYPE, VIBER_EMOJI_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, } from './constants';
 const { CUSTOM_TAG } = TAG_TYPE;
 /*
  * Usage to cache compiled regular expressions:
@@ -244,88 +244,68 @@ const getLabelAttribute = (type, attributeName, subAttributeName, mapAttributes)
         mapping[combineAttribute]?.template_name ||
         combineAttribute);
 };
-export const getPersonalizeTagInfo = (originalTag, mapAttributes, mapErrorAttributes, tagProperties) => {
+export const getPersonalizeTagInfo = (originalTag, mapAttributes, mapErrorAttributes) => {
     try {
         const [type, attributeName, subAttributeName] = originalTag.split('.');
         const isCsGroup = type === CONTENT_SOURCE_GROUP;
         const combineAttribute = subAttributeName
             ? `${attributeName}.${subAttributeName}`
             : attributeName;
-        // Check additional case for each tag type
-        let [isValid, message, isRemoved, canView, isArchived, isActive, isExpired] = [
-            true,
-            '',
-            false,
-            true,
-            false,
-            true,
-            false,
-        ];
-        if (!has(mapAttributes, type) && !has(tagProperties, attributeName) && !isCsGroup) {
-            // return fallback if no mapping
-            return {
-                type,
-                label: attributeName || type,
-                isValid: false,
-                message: 'This tag does not exist anymore',
-                isRemoved,
-                canView,
-                isArchived,
-                isActive,
-                isExpired,
-            };
-        }
+        let status = '';
+        let statusMsg = '';
         // Get label based on mapping
         const label = isCsGroup
             ? getContentSourceLabel(attributeName, subAttributeName, mapAttributes)
             : getLabelAttribute(type, attributeName, subAttributeName, mapAttributes);
-        const tagType = type === CUSTOM_TAG ? get(tagProperties, [attributeName, 'type']) : type;
-        switch (tagType) {
+        switch (type) {
             case PROMOTION_CODE: {
-                if (has(mapErrorAttributes, [tagType, attributeName])) {
-                    isValid = false;
-                    message = 'This pool does not exist anymore';
+                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?.[tagType]?.[attributeName] || {};
+                    isView = false, isExist = true, isArchived: _isArchived = false, isActive: _isActive = true, isExpired: _isExpired = false, } = mapErrorAttributes?.[type]?.[attributeName] || {};
                     if (!isExist) {
                         // Case Pool Removed
-                        isRemoved = !isExist;
-                        message = translate(translations._PERSONALIZATION_TAG_ERR_REMOVED, 'This pool is removed');
+                        status = TAG_STATUS.REMOVED;
+                        statusMsg = translate(translations._PERSONALIZATION_TAG_ERR_REMOVED, 'This pool is removed');
                     }
                     else if (_isArchived) {
                         // Case Pool is Archived
-                        isArchived = true;
-                        message = translate(translations._PERSONALIZATION_TAG_ERR_ATT_ARCHIVE, 'This attribute has been 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
-                        isActive = false;
-                        message = translate(translations._PERSONALIZATION_TAG_ERR_POOL_DEACTIVATE, 'This pool has been deactivated. You have to turn it on to use');
+                        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
-                        isExpired = true;
-                        message = translate(translations._PERSONALIZATION_TAG_ERR_POOL_EXPIRE, 'This pool has expired, new codes could not be allocated');
+                        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
-                        canView = isView;
-                        message = translate(translations._PERMISSION_ERR_POOL, 'You do not have permission on this pool');
+                        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, [tagType, combineAttribute])) {
-                    isValid = false;
-                    message = 'This attribute does not exist anymore';
-                    const { isArchived: _isArchived = false, isActive: _isActive = true, isExpired: _isExpired = false, } = mapErrorAttributes?.[tagType]?.[combineAttribute] || {};
+                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
-                        isArchived = true;
-                        message = translate(translations._PERSONALIZATION_TAG_ERR_ATT_ARCHIVE, 'This attribute has been archived');
+                        status = TAG_STATUS.ARCHIVED;
+                        statusMsg = translate(translations._PERSONALIZATION_TAG_ERR_ATT_ARCHIVE, 'This attribute has been archived');
                     }
                 }
                 break;
@@ -333,39 +313,39 @@ export const getPersonalizeTagInfo = (originalTag, mapAttributes, mapErrorAttrib
         }
         return {
             type,
-            message,
-            isValid,
             label: label || type,
-            isRemoved,
-            canView,
-            isArchived,
-            isActive,
-            isExpired,
+            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');
                             }
                         }
                     }
@@ -376,9 +356,9 @@ export const getShortLinkTagInfo = (params) => {
         }
         return {
             type,
-            message,
-            isValid,
             label,
+            status,
+            statusMsg,
         };
     }
     catch (error) {
@@ -386,8 +366,8 @@ export const getShortLinkTagInfo = (params) => {
         return {
             label,
             type,
-            isValid: false,
-            message: translate(translations._PER_TAG_LINK_ERR, 'This shortener is inactivated or removed'),
+            status: TAG_STATUS.ERROR,
+            statusMsg: translate(translations._PER_TAG_LINK_ERR, 'This shortener is inactivated or removed'),
         };
     }
 };

package/es/components/template/TemplateListing/Loadable.d.ts

@@ -3,5 +3,4 @@
  * Asynchronously loads the component for TemplateListing
  *
  */
-/// <reference types="react" />
 export declare const TemplateListing: (props: import("./types").TemplateListingProps<{}>) => JSX.Element;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@antscorp/antsomi-ui",
-  "version": "1.3.5-beta.982",
+  "version": "1.3.5-beta.984",
   "description": "An enterprise-class UI design language and React UI library.",
   "sideEffects": [
     "dist/*",