@antscorp/antsomi-ui 1.3.5-beta.934 → 1.3.5-beta.936

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, } from './utils';
 import { acceptablePatternChecking, detectURLRegex, getCachedRegex, getPersonalizeTagInfo, getShortLinkTagInfo, patternHandlers, } from './patternHandlers';
 // Constants
-import { DETECT_LINK, EMOJI, FORCE_SHOW_TOOLTIP, INVALID_TAG, MESSAGE_TAG, NO_VIEW_TAG, PERSONALIZE_PTN, PROMOTION_CODE, READONLY_TAG, REMOVED_TAG, SHORT_LINK, SHORT_LINK_PTN, SHORT_LINK_V2, defaultCssVariables, tagifyDefaultProps, } from './constants';
+import { DETECT_LINK, EMOJI, ERROR_TAG, FORCE_SHOW_TOOLTIP, INVALID_TAG, MESSAGE_TAG, PERSONALIZE_PTN, PROMOTION_CODE, READONLY_TAG, SHORT_LINK, SHORT_LINK_PTN, SHORT_LINK_V2, WARNING_TAG, defaultCssVariables, tagifyDefaultProps, } from './constants';
 const TagifyInput = forwardRef((props, ref) => {
     // Props
     const { initialValue, escapeHTML, status, readonly, readonlyTag, realtime, disabled, maxLength, maxHeight, minWidth, placeholder, minWidthPlaceholder, isSingleLineText, acceptableTagPattern, mapAttributes, mapErrorAttributes, maxPersonalizeTags, name, children, cssTagifyVariables, onTagClick, onChange, } = props;
@@ -552,7 +552,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, hasViewPermission, } = getPersonalizeTagInfo(tagCode, attributes, errorAttributes);
+                            const { label: tagLabel, isValid, message, type, isRemoved, canView, isArchived, isActive, isExpired, } = getPersonalizeTagInfo(tagCode, attributes, errorAttributes);
                             const isPromotionCode = type === PROMOTION_CODE;
                             const tagTextNode = tagifyRef.current?.getTagTextNode(tagElement);
                             /*
@@ -562,42 +562,31 @@ const TagifyInput = forwardRef((props, ref) => {
                             if (tagTextNode) {
                                 tagTextNode.textContent = tagLabel;
                                 // Clear all previous attributes
-                                tagElement.removeAttribute(REMOVED_TAG);
-                                tagElement.removeAttribute(NO_VIEW_TAG);
                                 tagElement.removeAttribute(INVALID_TAG);
+                                tagElement.removeAttribute(ERROR_TAG);
+                                tagElement.removeAttribute(WARNING_TAG);
                                 tagElement.removeAttribute(READONLY_TAG);
                                 tagElement.removeAttribute(MESSAGE_TAG);
                                 // In case promotion pool has something wrong
                                 if (isPromotionCode && message) {
-                                    if (isRemoved) {
-                                        tagElement.setAttribute(REMOVED_TAG, 'true');
+                                    if (isRemoved || isArchived || !isActive || isExpired) {
+                                        tagElement.setAttribute(ERROR_TAG, 'true');
                                         tagElement.setAttribute(MESSAGE_TAG, message);
-                                        tagifyRef.current?.getSetTagData(tagElement, {
-                                            ...tagData,
-                                            status: 'error',
-                                            statusMsg: message,
-                                        });
                                     }
-                                    else if (!hasViewPermission) {
-                                        tagElement.setAttribute(NO_VIEW_TAG, 'true');
+                                    else if (!canView) {
+                                        tagElement.setAttribute(WARNING_TAG, 'true');
                                         tagElement.setAttribute(MESSAGE_TAG, message);
-                                        tagifyRef.current?.getSetTagData(tagElement, {
-                                            ...tagData,
-                                            status: 'warning',
-                                            statusMsg: message,
-                                        });
                                     }
                                     else if (!isValid) {
                                         tagElement.setAttribute(READONLY_TAG, 'true');
                                         tagElement.setAttribute(INVALID_TAG, 'true');
                                         tagElement.setAttribute(MESSAGE_TAG, message);
-                                        tagifyRef.current?.getSetTagData(tagElement, {
-                                            ...tagData,
-                                            status: 'warning',
-                                            statusMsg: message,
-                                        });
                                     }
                                 }
+                                else if ((isArchived || !isActive || isExpired) && message) {
+                                    tagElement.setAttribute(ERROR_TAG, 'true');
+                                    tagElement.setAttribute(MESSAGE_TAG, message);
+                                }
                             }
                         }
                     }
@@ -623,20 +612,15 @@ const TagifyInput = forwardRef((props, ref) => {
                         if (tagTextNode) {
                             tagTextNode.textContent = tagLabel;
                             // Clear all previous attributes
-                            tagElement.removeAttribute(REMOVED_TAG);
-                            tagElement.removeAttribute(NO_VIEW_TAG);
                             tagElement.removeAttribute(INVALID_TAG);
+                            tagElement.removeAttribute(ERROR_TAG);
+                            tagElement.removeAttribute(WARNING_TAG);
                             tagElement.removeAttribute(READONLY_TAG);
                             tagElement.removeAttribute(MESSAGE_TAG);
                             // In case promotion pool has something wrong
                             if (!isValid && message) {
-                                tagElement.setAttribute(REMOVED_TAG, 'true');
+                                tagElement.setAttribute(ERROR_TAG, 'true');
                                 tagElement.setAttribute(MESSAGE_TAG, message);
-                                tagifyRef.current?.getSetTagData(tagElement, {
-                                    ...tagData,
-                                    status: 'error',
-                                    statusMsg: message,
-                                });
                             }
                         }
                     }
@@ -919,8 +903,8 @@ const TagifyInput = forwardRef((props, ref) => {
     useDeepCompareEffect(() => {
         const showTooltip = (tagElement) => {
             const tagRect = tagElement.getBoundingClientRect();
-            const removeTag = tagElement.getAttribute(REMOVED_TAG);
-            const noViewTag = tagElement.getAttribute(NO_VIEW_TAG);
+            const errorTag = tagElement.getAttribute(ERROR_TAG);
+            const warningTag = tagElement.getAttribute(WARNING_TAG);
             const invalidTag = tagElement.getAttribute(INVALID_TAG);
             const messageTag = tagElement.getAttribute(MESSAGE_TAG);
             const forceShowTooltipAttr = tagElement.getAttribute(FORCE_SHOW_TOOLTIP);
@@ -933,7 +917,7 @@ const TagifyInput = forwardRef((props, ref) => {
             const tooltip = document.querySelector('.tagify__tooltip');
             tooltip?.setAttribute('style', 'display: block !important;visibility: hidden !important;');
             const tooltipRect = tooltip?.getBoundingClientRect();
-            const hasWrongAttribute = removeTag === 'true' || noViewTag === 'true' || invalidTag === 'true';
+            const hasWrongAttribute = errorTag === 'true' || warningTag === 'true' || invalidTag === 'true';
             const isTooltipVisible = tooltipRect && hasWrongAttribute;
             const isForceVisible = tooltipRect && forceShowTooltipAttr === 'true';
             if (isTooltipVisible || isForceVisible) {

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

@@ -11,8 +11,10 @@ export declare const TAG_CUSTOM_ATTRIBUTES: {
     readonly NO_VIEW_TAG: "no-view-tag";
     readonly MESSAGE_TAG: "message-tag";
     readonly FORCE_SHOW_TOOLTIP: "force-show-tooltip";
+    readonly ERROR_TAG: "error-tag";
+    readonly WARNING_TAG: "warning-tag";
 };
-export declare const 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";
+export declare const 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";
 export declare const defaultCssVariables: {
     '--input-color': string | undefined;
     '--input-font-size': string;

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

@@ -12,8 +12,10 @@ export const TAG_CUSTOM_ATTRIBUTES = {
     NO_VIEW_TAG: 'no-view-tag',
     MESSAGE_TAG: 'message-tag',
     FORCE_SHOW_TOOLTIP: 'force-show-tooltip',
+    ERROR_TAG: 'error-tag',
+    WARNING_TAG: 'warning-tag',
 };
-export const { READONLY_TAG, INVALID_TAG, REMOVED_TAG, NO_VIEW_TAG, MESSAGE_TAG, FORCE_SHOW_TOOLTIP, } = TAG_CUSTOM_ATTRIBUTES;
+export const { READONLY_TAG, INVALID_TAG, REMOVED_TAG, NO_VIEW_TAG, MESSAGE_TAG, FORCE_SHOW_TOOLTIP, ERROR_TAG, WARNING_TAG, } = TAG_CUSTOM_ATTRIBUTES;
 export const defaultCssVariables = {
     '--input-color': globalToken?.colorText,
     '--input-font-size': `${globalToken?.fontSize}px`,

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

@@ -5,7 +5,10 @@ interface TagInfo {
     isValid: boolean;
     message?: string;
     isRemoved?: boolean;
-    hasViewPermission?: boolean;
+    canView?: boolean;
+    isArchived?: boolean;
+    isActive?: boolean;
+    isExpired?: boolean;
 }
 /**
  * Retrieves a cached regular expression or compiles and caches it if not found.

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

@@ -220,7 +220,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 ||
@@ -230,16 +232,36 @@ export const getPersonalizeTagInfo = (originalTag, mapAttributes, mapErrorAttrib
     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 (!mapAttributes || (!mapAttributes[type] && !isCsGroup)) {
             // return fallback if no mapping
-            return { type, label: attributeName || type, isValid: false, isRemoved: false };
+            return {
+                type,
+                label: attributeName || type,
+                isValid: false,
+                isRemoved,
+                canView,
+                isArchived,
+                isActive,
+                isExpired,
+            };
         }
         // 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
@@ -251,15 +273,30 @@ export const getPersonalizeTagInfo = (originalTag, mapAttributes, mapErrorAttrib
                         if (mapErrorAttributes &&
                             mapErrorAttributes[type] &&
                             mapErrorAttributes[type][attributeName]) {
-                            const { isEdit = false, isView = false, isExist = true, } = mapErrorAttributes[type][attributeName] || {};
-                            // Case Pool removed
+                            const { isEdit = false, 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');
                             }
+                            else if (_isArchived) {
+                                // Case Pool is Archived
+                                isArchived = true;
+                                message = 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');
+                            }
+                            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');
+                            }
                             else if (!isView) {
-                                // Case No permission
-                                hasViewPermission = isView;
+                                // Case Pool Can't View
+                                canView = isView;
                                 message = translate(translations._PERMISSION_ERR_POOL, 'You do not have permission on this pool');
                             }
                         }
@@ -268,6 +305,22 @@ export const getPersonalizeTagInfo = (originalTag, mapAttributes, mapErrorAttrib
                 break;
             }
             default: {
+                if (mapAttributes[type] &&
+                    combineAttribute &&
+                    !has(mapAttributes[type], combineAttribute)) {
+                    isValid = false;
+                    message = 'This attribute does not exist anymore';
+                }
+                if (mapErrorAttributes &&
+                    mapErrorAttributes[type] &&
+                    mapErrorAttributes[type][combineAttribute]) {
+                    const { isArchived: _isArchived = false, isActive: _isActive = true, isExpired: _isExpired = false, } = mapErrorAttributes[type][combineAttribute] || {};
+                    if (_isArchived) {
+                        // Case Pool is Archived
+                        isArchived = true;
+                        message = translate(translations._PERSONALIZATION_TAG_ERR_ATT_ARCHIVE, 'This attribute has been archived');
+                    }
+                }
                 break;
             }
         }
@@ -277,7 +330,10 @@ export const getPersonalizeTagInfo = (originalTag, mapAttributes, mapErrorAttrib
             isValid,
             label: label || type,
             isRemoved,
-            hasViewPermission,
+            canView,
+            isArchived,
+            isActive,
+            isExpired,
         };
     }
     catch (error) {
@@ -295,14 +351,14 @@ export const getShortLinkTagInfo = (params) => {
                     const isExistShortLink = has(mapAttributes[type], shortener);
                     if (!isExistShortLink) {
                         isValid = false;
-                        message = translate('', 'This shortener is inactivated or removed');
+                        message = 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('', 'This shortener is inactivated or removed');
+                                message = translate(translations?._PER_TAG_LINK_ERR || '', 'This shortener is inactivated or removed');
                             }
                         }
                     }
@@ -324,7 +380,7 @@ export const getShortLinkTagInfo = (params) => {
             label,
             type,
             isValid: false,
-            message: translate('', 'This shortener is inactivated or removed'),
+            message: translate(translations._PER_TAG_LINK_ERR, 'This shortener is inactivated or removed'),
         };
     }
 };
@@ -479,6 +535,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/utils.style.js

@@ -3,7 +3,7 @@ import { css } from 'styled-components';
 import { isString } from 'lodash';
 // Constants
 import { globalToken } from '@antscorp/antsomi-ui/es/constants';
-import { DETECT_LINK, EMOJI, INVALID_TAG, MIN_H_WRAPPER, NO_VIEW_TAG, READONLY_TAG, REMOVED_TAG, SHORT_LINK, SHORT_LINK_TYPE, SHORT_LINK_V2, TAG_COLOR, TAG_H, TAG_TYPE, } from './constants';
+import { DETECT_LINK, EMOJI, ERROR_TAG, MIN_H_WRAPPER, READONLY_TAG, SHORT_LINK, SHORT_LINK_TYPE, SHORT_LINK_V2, TAG_COLOR, TAG_H, TAG_TYPE, WARNING_TAG, } from './constants';
 export const getTagifyStyled = ({ $maxHeight, $tagifyFullWidth }) => css `
   ${$maxHeight &&
     css `
@@ -160,7 +160,7 @@ export const getTagifyTagStyled = (_wrapperProps) => css `
     cursor: not-allowed;
   }
 
-  &[${REMOVED_TAG}='true'] {
+  &[${ERROR_TAG}='true'] {
     ${({ $tagErrorIcon }) => $tagErrorIcon &&
     css `
         > div {
@@ -189,37 +189,8 @@ export const getTagifyTagStyled = (_wrapperProps) => css `
         }
       `}
   }
-  &[${NO_VIEW_TAG}='true'] {
-    ${({ $tagInvalidIcon }) => $tagInvalidIcon &&
-    css `
-        > div {
-          padding-right: 22px;
-          position: relative;
 
-          > span {
-            &::after {
-              content: '';
-              position: absolute;
-              top: 50%;
-              right: 5px;
-              transform: translateY(calc(-50%));
-              width: 14px;
-              height: 14px;
-              display: inline-block;
-              background-image: url(${$tagInvalidIcon});
-              background-size: contain;
-              background-repeat: no-repeat;
-            }
-          }
-        }
-        > div[data-tag-type] {
-          background-color: white !important;
-          border: 1px solid red;
-        }
-      `}
-  }
-
-  &[${INVALID_TAG}='true'] {
+  &[${WARNING_TAG}='true'] {
     ${({ $tagInvalidIcon }) => $tagInvalidIcon &&
     css `
         > div {
@@ -232,7 +203,7 @@ export const getTagifyTagStyled = (_wrapperProps) => css `
               position: absolute;
               top: 50%;
               right: 5px;
-              transform: translateY(calc(-50% - 1px));
+              transform: translateY(calc(-50%));
               width: 14px;
               height: 14px;
               display: inline-block;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@antscorp/antsomi-ui",
-  "version": "1.3.5-beta.934",
+  "version": "1.3.5-beta.936",
   "description": "An enterprise-class UI design language and React UI library.",
   "sideEffects": [
     "dist/*",
@@ -61,7 +61,7 @@
     "not op_mini all"
   ],
   "dependencies": {
-    "@antscorp/antsomi-locales": "1.0.17",
+    "@antscorp/antsomi-locales": "1.0.28",
     "@antscorp/icons": "0.27.54",
     "@antscorp/image-editor": "1.0.2",
     "@antscorp/processing-notification": "^1.0.3",