@antscorp/antsomi-ui 1.3.5-beta.917 → 1.3.5-beta.919

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/TagifyInput/TagifyInput.js

@@ -16,13 +16,13 @@ import '@yaireo/tagify/dist/tagify.css';
 // Styled
 import { TagTextArea, TagifyWrapper, WrapperPlaceHolder } from './styled';
 // Utils
-import { parseTagStringToTagify, convertInputStringToOriginal, emojiManufacturer, getEmojiTag, isPersonalizeTagType, generateTagContent, unescapeString, hasLineBreak, selectRange, isTagClickable, findURLInTextNodes, getAttributesString, isAnchorNodeChildOfElement, } from './utils';
-import { acceptablePatternChecking, detectURLRegex, getCachedRegex, getPersonalizeTagInfo, patternHandlers, } from './patternHandlers';
+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, defaultCssVariables, tagifyDefaultProps, } from './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';
 const TagifyInput = forwardRef((props, ref) => {
     // Props
-    const { initialValue, escapeHTML, status, readonly, readonlyTag, realtime, disabled, maxLength, maxHeight, minWidth, placeholder, isSingleLineText, acceptableTagPattern, mapAttributes, mapErrorAttributes, maxPersonalizeTags, name, children, cssTagifyVariables, onTagClick, onChange, } = 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;
     // States
     const [isLineBreak, setIsLineBreak] = useState(hasLineBreak(initialValue));
     const [tooltipRefresher, setTooltipRefresher] = useState(1);
@@ -351,7 +351,7 @@ const TagifyInput = forwardRef((props, ref) => {
             if (newTag && tagifyRef.current) {
                 const { settings, value: currentTags } = tagifyRef.current;
                 const { readonly, maxTags } = settings;
-                const currentPersonalizeTags = currentTags.filter(tag => ![EMOJI, SHORT_LINK].includes(tag.type));
+                const currentPersonalizeTags = currentTags.filter(tag => ![EMOJI, SHORT_LINK, SHORT_LINK_V2].includes(tag.type));
                 const currentPersonalizeTagsLength = currentPersonalizeTags.length;
                 // Check readonly
                 if (readonly)
@@ -367,7 +367,7 @@ const TagifyInput = forwardRef((props, ref) => {
                      * Validate the max limit before add new tag
                      * For emoji and short link, it will be passed
                      */
-                    if (![EMOJI, SHORT_LINK].includes(type) &&
+                    if (![EMOJI, SHORT_LINK, SHORT_LINK_V2].includes(type) &&
                         currentPersonalizeTagsLength >= maxTags)
                         return;
                     // Create new tag
@@ -403,7 +403,30 @@ const TagifyInput = forwardRef((props, ref) => {
                 tagifyRef.current.removeAllTags();
             }
         },
-    }), [onInjectTagAtCaret, placeCaretAfterNode]);
+        onReload: (newValue) => {
+            if (!tagifyRef.current) {
+                throw new Error('Tagify instance is not initialized');
+            }
+            if (!_.isString(newValue)) {
+                throw new Error('Reload value should be string');
+            }
+            if (newValue === '') {
+                tagifyRef.current.loadOriginalValues(newValue);
+                return;
+            }
+            if (!escapeHTML) {
+                const newContent = parseTagStringToTagify(newValue, acceptableTagPattern);
+                tagifyRef.current.loadOriginalValues(newContent);
+            }
+            else {
+                // Sometimes the input value has html tags, it makes the input rendered incorrectly -> it rendered html
+                // -> need to escape the html tags to render correctly
+                const escapeContent = htmlEntities.escape(newValue);
+                const newContent = parseTagStringToTagify(escapeContent, acceptableTagPattern);
+                tagifyRef.current.loadOriginalValues(newContent);
+            }
+        },
+    }), [acceptableTagPattern, escapeHTML, onInjectTagAtCaret, placeCaretAfterNode]);
     const onTagItemClick = useCallback((event) => {
         event.stopPropagation();
         event.preventDefault();
@@ -503,6 +526,8 @@ const TagifyInput = forwardRef((props, ref) => {
                 if (tagData) {
                     const { type, value } = tagData;
                     const isPersonalTag = isPersonalizeTagType(type);
+                    const isShortLinkTag = isShortLinkTagType(type);
+                    /** Case Personalize */
                     if (isPersonalTag && value) {
                         const isAccepted = acceptablePatternChecking(acceptableType, acceptableTagPattern);
                         // No need to continue if pattern is not accepted
@@ -565,6 +590,45 @@ const TagifyInput = forwardRef((props, ref) => {
                             }
                         }
                     }
+                    /** Case Short Link V2 Tag */
+                    if (isShortLinkTag) {
+                        const isAccepted = acceptablePatternChecking(SHORT_LINK_PTN, acceptableTagPattern);
+                        if (!isAccepted)
+                            return;
+                        const { url, shortener, label } = tagData;
+                        const { label: tagLabel, isValid, message, type: tagType, } = getShortLinkTagInfo({
+                            type,
+                            label,
+                            shortener,
+                            url,
+                            mapAttributes: attributes,
+                            mapErrorAttributes: errorAttributes,
+                        });
+                        const tagTextNode = tagifyRef.current?.getTagTextNode(tagElement);
+                        /*
+                         * Just only update to the correct text of the tag
+                         * NOTE: Do not actually affect raw data
+                         */
+                        if (tagTextNode) {
+                            tagTextNode.textContent = tagLabel;
+                            // Clear all previous attributes
+                            tagElement.removeAttribute(REMOVED_TAG);
+                            tagElement.removeAttribute(NO_VIEW_TAG);
+                            tagElement.removeAttribute(INVALID_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(MESSAGE_TAG, message);
+                                tagifyRef.current?.getSetTagData(tagElement, {
+                                    ...tagData,
+                                    status: 'error',
+                                    statusMsg: message,
+                                });
+                            }
+                        }
+                    }
                 }
             });
             setTooltipRefresher(prev => prev + 1);
@@ -755,7 +819,7 @@ const TagifyInput = forwardRef((props, ref) => {
         detectReplaceURLToTag();
     }, [detectReplaceURLToTag]);
     // CAVEAT: Some case need to "FORCE" sync the original values to Tagify instance
-    useEffect(() => {
+    useDeepCompareEffect(() => {
         if (tagifyRef.current) {
             const { DOM, settings } = tagifyRef.current;
             const { empty } = settings.classNames;
@@ -891,7 +955,7 @@ const TagifyInput = forwardRef((props, ref) => {
             }
         };
     }, [tooltipRefresher]);
-    return (_jsxs(TagifyWrapper, { ref: tagifyWrapperRef, "$cssTagifyVariables": cssVariablesMemoized, className: "tagify-container", id: "tagify-container", "data-test": "tagify-wrapper", "$status": status, "$maxHeight": maxHeight, "$minWidth": minWidth, "$tagifyFullWidth": isLineBreak, "$placeholder": placeholder, "$isSingleLineText": isSingleLineText, "$tagInvalidIcon": iconWarning, "$tagErrorIcon": iconError, onClick: onTagifyWrapperClick, children: [_jsx(TagTextArea, { id: "tagify-textarea", ref: inputRef, name: name, defaultValue: parsedDefaultValue, "data-test": "tagify-input" }), _jsx(WrapperPlaceHolder, { "data-test": "wrapper-placeholder", ref: placeholderRef, "$isShow": !!children, children: children })] }));
+    return (_jsxs(TagifyWrapper, { ref: tagifyWrapperRef, "$cssTagifyVariables": cssVariablesMemoized, className: "tagify-container", id: "tagify-container", "data-test": "tagify-wrapper", "$status": status, "$maxHeight": maxHeight, "$minWidth": minWidth, "$minWidthPlaceholder": minWidthPlaceholder, "$tagifyFullWidth": isLineBreak, "$placeholder": placeholder, "$isSingleLineText": isSingleLineText, "$tagInvalidIcon": iconWarning, "$tagErrorIcon": iconError, onClick: onTagifyWrapperClick, children: [_jsx(TagTextArea, { id: "tagify-textarea", ref: inputRef, name: name, defaultValue: parsedDefaultValue, "data-test": "tagify-input" }), _jsx(WrapperPlaceHolder, { "data-test": "wrapper-placeholder", ref: placeholderRef, "$isShow": !!children, children: children })] }));
 });
 TagifyInput.defaultProps = tagifyDefaultProps;
 export default memo(TagifyInput);

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

@@ -33,11 +33,13 @@ export declare const PATTERN_CACHE_TYPE: {
     readonly SHORT_LINK_PTN: "shortlink_pattern";
     readonly SHORT_LINK_INDIVIDUAL_PTN: "shortlink_individual_pattern";
     readonly SHORT_LINK_GENERAL_PTN: "shortlink_general_pattern";
+    readonly SHORT_LINK_V2_INDIVIDUAL_PTN: "shortlink_v2_individual_pattern";
+    readonly SHORT_LINK_V2_GENERAL_PTN: "shortlink_v2_general_pattern";
     readonly LINE_EMOJI_PTN: "line_emoji_pattern";
     readonly PERSONALIZE_PTN: "personalize_pattern";
     readonly VIBER_EMOJI_PTN: "viber_emoji_pattern";
 };
-export declare const SHORT_LINK_PTN: "shortlink_pattern", SHORT_LINK_INDIVIDUAL_PTN: "shortlink_individual_pattern", SHORT_LINK_GENERAL_PTN: "shortlink_general_pattern", LINE_EMOJI_PTN: "line_emoji_pattern", PERSONALIZE_PTN: "personalize_pattern", VIBER_EMOJI_PTN: "viber_emoji_pattern";
+export declare const SHORT_LINK_PTN: "shortlink_pattern", SHORT_LINK_INDIVIDUAL_PTN: "shortlink_individual_pattern", SHORT_LINK_GENERAL_PTN: "shortlink_general_pattern", SHORT_LINK_V2_INDIVIDUAL_PTN: "shortlink_v2_individual_pattern", SHORT_LINK_V2_GENERAL_PTN: "shortlink_v2_general_pattern", LINE_EMOJI_PTN: "line_emoji_pattern", PERSONALIZE_PTN: "personalize_pattern", VIBER_EMOJI_PTN: "viber_emoji_pattern";
 export declare const DEFAULT_ACCEPT_TAGS: ("shortlink_pattern" | "line_emoji_pattern" | "personalize_pattern" | "viber_emoji_pattern")[];
 export declare const tagifyDefaultProps: TagifyInputProps;
 export declare const TAG_TYPE: {
@@ -52,14 +54,19 @@ export declare const TAG_TYPE: {
     readonly CUSTOM_FN: "custom";
     readonly EMOJI: "emoji";
     readonly SHORT_LINK: "shortlink";
+    readonly SHORT_LINK_V2: "shortlink_v2";
     readonly DETECT_LINK: "detect_link";
     readonly CONTENT_SOURCE_GROUP: "groups";
 };
-export declare const CUSTOMER: "customer", VISITOR: "visitor", EVENT: "event", JOURNEY: "story", CAMPAIGN: "campaign", VARIANT: "variant", PROMOTION_CODE: "promotion_code", CUSTOM_FN: "custom", EMOJI: "emoji", DETECT_LINK: "detect_link", SHORT_LINK: "shortlink", OBJECT_WIDGET: "objectWidget", CONTENT_SOURCE_GROUP: "groups";
+export declare const CUSTOMER: "customer", VISITOR: "visitor", EVENT: "event", JOURNEY: "story", CAMPAIGN: "campaign", VARIANT: "variant", PROMOTION_CODE: "promotion_code", CUSTOM_FN: "custom", EMOJI: "emoji", DETECT_LINK: "detect_link", SHORT_LINK: "shortlink", SHORT_LINK_V2: "shortlink_v2", OBJECT_WIDGET: "objectWidget", CONTENT_SOURCE_GROUP: "groups";
 export declare const SHORT_LINK_TYPE: {
     readonly INDIVIDUAL: "shortlink";
     readonly GENERAL: "shortlink_static";
 };
+export declare const SHORT_LINK_TYPE_V2: {
+    readonly INDIVIDUAL: "shortlink_v2";
+    readonly GENERAL: "shortlink_v2_static";
+};
 export declare const TAG_COLOR: {
     readonly customer: string | undefined;
     readonly detect_link: "#e8feca";
@@ -67,6 +74,10 @@ export declare const TAG_COLOR: {
         readonly shortlink: "#CAFEDD";
         readonly shortlink_static: "#EFE2D9";
     };
+    readonly shortlink_v2: {
+        readonly shortlink: "#CAFEDD";
+        readonly shortlink_static: "#EFE2D9";
+    };
     readonly visitor: "#e8feca";
     readonly event: "#fecaca";
     readonly story: "#FAFAAF";

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

@@ -34,11 +34,13 @@ export const PATTERN_CACHE_TYPE = {
     SHORT_LINK_PTN: 'shortlink_pattern',
     SHORT_LINK_INDIVIDUAL_PTN: 'shortlink_individual_pattern',
     SHORT_LINK_GENERAL_PTN: 'shortlink_general_pattern',
+    SHORT_LINK_V2_INDIVIDUAL_PTN: 'shortlink_v2_individual_pattern',
+    SHORT_LINK_V2_GENERAL_PTN: 'shortlink_v2_general_pattern',
     LINE_EMOJI_PTN: 'line_emoji_pattern',
     PERSONALIZE_PTN: 'personalize_pattern',
     VIBER_EMOJI_PTN: 'viber_emoji_pattern',
 };
-export const { SHORT_LINK_PTN, SHORT_LINK_INDIVIDUAL_PTN, SHORT_LINK_GENERAL_PTN, LINE_EMOJI_PTN, PERSONALIZE_PTN, VIBER_EMOJI_PTN, } = PATTERN_CACHE_TYPE;
+export const { SHORT_LINK_PTN, SHORT_LINK_INDIVIDUAL_PTN, SHORT_LINK_GENERAL_PTN, SHORT_LINK_V2_INDIVIDUAL_PTN, SHORT_LINK_V2_GENERAL_PTN, LINE_EMOJI_PTN, PERSONALIZE_PTN, VIBER_EMOJI_PTN, } = PATTERN_CACHE_TYPE;
 export const DEFAULT_ACCEPT_TAGS = [
     SHORT_LINK_PTN,
     PERSONALIZE_PTN,
@@ -51,6 +53,7 @@ export const tagifyDefaultProps = {
     realtime: true,
     maxHeight: 266,
     placeholder: undefined,
+    minWidthPlaceholder: 130,
     acceptableTagPattern: DEFAULT_ACCEPT_TAGS,
     onChange: () => { },
 };
@@ -66,14 +69,19 @@ export const TAG_TYPE = {
     CUSTOM_FN: 'custom',
     EMOJI: 'emoji',
     SHORT_LINK: 'shortlink',
+    SHORT_LINK_V2: 'shortlink_v2',
     DETECT_LINK: 'detect_link',
     CONTENT_SOURCE_GROUP: 'groups',
 };
-export const { CUSTOMER, VISITOR, EVENT, JOURNEY, CAMPAIGN, VARIANT, PROMOTION_CODE, CUSTOM_FN, EMOJI, DETECT_LINK, SHORT_LINK, OBJECT_WIDGET, CONTENT_SOURCE_GROUP, } = 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, } = TAG_TYPE;
 export const SHORT_LINK_TYPE = {
     INDIVIDUAL: 'shortlink', // Individual link
     GENERAL: 'shortlink_static', // General link
 };
+export const SHORT_LINK_TYPE_V2 = {
+    INDIVIDUAL: 'shortlink_v2', // Individual link
+    GENERAL: 'shortlink_v2_static', // General link
+};
 export const TAG_COLOR = {
     [CUSTOMER]: globalToken?.blue2,
     [DETECT_LINK]: '#e8feca',
@@ -81,6 +89,10 @@ export const TAG_COLOR = {
         [SHORT_LINK_TYPE.INDIVIDUAL]: '#CAFEDD',
         [SHORT_LINK_TYPE.GENERAL]: '#EFE2D9',
     },
+    [SHORT_LINK_V2]: {
+        [SHORT_LINK_TYPE.INDIVIDUAL]: '#CAFEDD',
+        [SHORT_LINK_TYPE.GENERAL]: '#EFE2D9',
+    },
     [VISITOR]: '#e8feca',
     [EVENT]: '#fecaca',
     [JOURNEY]: '#FAFAAF',

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

@@ -19,5 +19,13 @@ 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;
+export declare const getShortLinkTagInfo: (params: {
+    type: string;
+    label: string;
+    url: string;
+    shortener: string;
+    mapAttributes?: MapAttributesProps;
+    mapErrorAttributes?: MapAttributesProps;
+}) => TagInfo;
 export declare const patternHandlers: Record<PatterTagName, PatternHandlerWrapper>;
 export {};

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

@@ -2,12 +2,13 @@
 /* eslint-disable no-console */
 // Libraries
 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, 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, VIBER_EMOJI_PTN, } from './constants';
 /*
  * Usage to cache compiled regular expressions:
  * const regex = getCachedRegex(pattern, flags);
@@ -254,12 +255,12 @@ export const getPersonalizeTagInfo = (originalTag, mapAttributes, mapErrorAttrib
                             // Case Pool removed
                             if (!isExist) {
                                 isRemoved = !isExist;
-                                message = 'This pool is removed';
+                                message = translate(translations._PERSONALIZATION_TAG_ERR_REMOVED, 'This pool is removed');
                             }
                             else if (!isView) {
                                 // Case No permission
                                 hasViewPermission = isView;
-                                message = 'You do not have permission on this pool';
+                                message = translate(translations._PERMISSION_ERR_POOL, 'You do not have permission on this pool');
                             }
                         }
                     }
@@ -284,6 +285,49 @@ export const getPersonalizeTagInfo = (originalTag, mapAttributes, mapErrorAttrib
         return { label: originalTag, type: originalTag, isValid: false, isRemoved: false };
     }
 };
+export const getShortLinkTagInfo = (params) => {
+    const { type, label, url, shortener, mapAttributes, mapErrorAttributes } = params;
+    try {
+        let [isValid, message] = [true, ''];
+        switch (type) {
+            case SHORT_LINK_V2:
+                if (mapAttributes && mapAttributes[type]) {
+                    const isExistShortLink = has(mapAttributes[type], shortener);
+                    if (!isExistShortLink) {
+                        isValid = false;
+                        message = translate('', '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');
+                            }
+                        }
+                    }
+                }
+                break;
+            default:
+                break;
+        }
+        return {
+            type,
+            message,
+            isValid,
+            label,
+        };
+    }
+    catch (error) {
+        console.error('Error in getTagLabel', error);
+        return {
+            label,
+            type,
+            isValid: false,
+            message: translate('', 'This shortener is inactivated or removed'),
+        };
+    }
+};
 const createTagPattern = (tagInfo) => `[[${JSON.stringify(tagInfo)}]]`;
 const generateShortlinkLabel = (params) => {
     const { type } = params;
@@ -294,6 +338,12 @@ const generateShortlinkLabel = (params) => {
         case SHORT_LINK_TYPE.GENERAL: {
             return 'General Shortlink';
         }
+        // case SHORT_LINK_TYPE_V2.INDIVIDUAL: {
+        //   return 'Individual Shortlink V2';
+        // }
+        // case SHORT_LINK_TYPE_V2.GENERAL: {
+        //   return 'General Shortlink V2';
+        // }
         default: {
             const randomId = random(5);
             return `https://ants.ly/${randomId}`;
@@ -457,6 +507,81 @@ const handleViberPattern = match => {
     const tag = createTagPattern(tagData);
     return { isValid, tag, tagData };
 };
+/*
+ * Function to handle #{shortlink_v2(...)} pattern
+ *
+ */
+const handleShortlinkV2IndividualPattern = match => {
+    const [fullMatch, type, shortener, url = ''] = match;
+    const label = generateShortlinkLabel({ type: SHORT_LINK_TYPE.INDIVIDUAL });
+    const urlForValidate = url?.replace(new RegExp(PERSONALIZE_PTN_PATTERN, 'g'), 'personalize_pattern');
+    const isValid = isValidUrl(urlForValidate, {
+        protocols: ['https:'],
+        requireTld: false,
+        allowFragment: true,
+        requireFragment: false,
+        allowNumericTld: true,
+        allowUnderscores: true,
+        allowTrailingDot: true,
+        allowIp: true,
+    });
+    // Validate the URL inside the shortlink pattern
+    if (!isValid) {
+        console.error(`Invalid URL detected in shortlink individual: Full match: ${fullMatch} - URL: ${url} - Validate URL: ${urlForValidate}`);
+        return {
+            isValid,
+            tag: '[[Invalid URL]]',
+            tagData: undefined,
+        };
+    }
+    const tagData = {
+        label,
+        type: SHORT_LINK_V2,
+        shortlinkType: SHORT_LINK_TYPE.INDIVIDUAL,
+        value: fullMatch,
+        shortener,
+        url,
+    };
+    const tag = createTagPattern(tagData);
+    return { isValid, tag, tagData };
+};
+/*
+ * Function to handle #{shortlink_v2_static(...)} pattern
+ *
+ */
+const handleShortlinkV2GeneralPattern = match => {
+    const [fullMatch, type, shortener, url] = match;
+    const label = generateShortlinkLabel({ type: SHORT_LINK_TYPE.GENERAL });
+    const isValid = isValidUrl(url, {
+        protocols: ['https:'],
+        requireTld: false,
+        allowFragment: true,
+        requireFragment: false,
+        allowNumericTld: true,
+        allowUnderscores: true,
+        allowTrailingDot: true,
+        allowIp: true,
+    });
+    // Validate the URL inside the shortlink general pattern
+    if (!isValid) {
+        console.error(`Invalid URL detected in shortlink general: fullMatch:: ${fullMatch}`);
+        return {
+            isValid,
+            tag: '[[Invalid URL]]',
+            tagData: undefined,
+        };
+    }
+    const tagData = {
+        label,
+        type: SHORT_LINK_V2,
+        shortlinkType: SHORT_LINK_TYPE.GENERAL,
+        value: fullMatch,
+        shortener,
+        url,
+    };
+    const tag = createTagPattern(tagData);
+    return { isValid, tag, tagData };
+};
 // Map of regex patterns to their respective wrapped handlers
 export const patternHandlers = {
     /*
@@ -477,6 +602,19 @@ export const patternHandlers = {
         acceptablePattern: SHORT_LINK_PTN,
         handler: errorWrapper(handleShortlinkGeneralPattern),
     },
+    [SHORT_LINK_V2_INDIVIDUAL_PTN]: {
+        pattern: '#\\{(shortlink_v2)\\(([^|]+)\\|\\s*([^)]+)\\)\\}',
+        // pattern: '#\\{shortlink_v2\\([^()]+?\\)\\}(?!_static)',
+        name: SHORT_LINK_V2_INDIVIDUAL_PTN, // Used to cache the regex, please keep the name unique for each pattern
+        acceptablePattern: SHORT_LINK_PTN,
+        handler: errorWrapper(handleShortlinkV2IndividualPattern),
+    },
+    [SHORT_LINK_V2_GENERAL_PTN]: {
+        pattern: '#\\{(shortlink_static_v2)\\(([^|]+)\\|\\s*([^)]+)\\)\\}',
+        name: SHORT_LINK_V2_GENERAL_PTN, // Used to cache the regex, please keep the name unique for each pattern
+        acceptablePattern: SHORT_LINK_PTN,
+        handler: errorWrapper(handleShortlinkV2GeneralPattern),
+    },
     /*
      * NOTE: Line pattern with strict boundaries to ensure it matches only the intended format.
      */

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

@@ -82,6 +82,13 @@ export interface TagifyInputProps {
      * Defines the minimum width of the input.
      */
     minWidth?: CSSProperties['minWidth'];
+    /**
+     * Defines the minimum width of the placeholder.
+     * Used for the placeholder when the input is empty.
+     *
+     * @default 130px
+     */
+    minWidthPlaceholder?: CSSProperties['minWidth'];
     /**
      * Defines the status of the input, used for styling and validation.
      */
@@ -122,6 +129,7 @@ export interface TagifyInputProps {
 export interface TagifyInputRef {
     onAddNewTag: (newTag: TagDataCustomize | string) => void;
     onReplaceTag: (currentTagEle: HTMLElement, newTag: TagDataCustomize) => void;
+    onReload: (newValue: string) => void;
 }
 export type EmojiCollection = (typeof EMOJI_COLLECTIONS)[keyof typeof EMOJI_COLLECTIONS];
 export type TagType = (typeof TAG_TYPE)[keyof typeof TAG_TYPE];
@@ -141,7 +149,7 @@ export interface TagDataEmoji extends Omit<TagDataText, 'type'> {
 }
 export interface TagDataShortLink extends Omit<TagDataText, 'type'> {
     value: string;
-    type: Extract<TagType, 'shortlink'>;
+    type: Extract<TagType, 'shortlink' | 'shortlink_v2'>;
     shortlinkType: ShortLinkType;
 }
 export type TagDataCustomize = TagDataEmoji | TagDataText | TagDataShortLink;
@@ -181,6 +189,7 @@ export interface TagifyWrapperProps {
     $status?: StatusType;
     $maxHeight?: number;
     $minWidth?: CSSProperties['minWidth'];
+    $minWidthPlaceholder?: TagifyInputProps['minWidthPlaceholder'];
     $tagifyFullWidth?: boolean;
     $tagInvalidIcon?: any;
     $tagErrorIcon?: any;

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

@@ -46,6 +46,7 @@ export declare const getImageSourceViberEmoji: (fileName?: string) => any;
 export declare const emojiManufacturer: (text: string, collectionType: EmojiCollection) => string[];
 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 generateTagContent: (params: {
     tagData: TagDataCustomize;
     content: string;

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

@@ -1,7 +1,7 @@
 // Libraries
 import stringReplaceToArray from 'string-replace-to-array';
 // Constants
-import { EMOJI_COLLECTIONS, PREFIX_PATTERN_LINE_MESSAGE, READONLY_TAG, TAG_TYPE, } from './constants';
+import { EMOJI_COLLECTIONS, PREFIX_PATTERN_LINE_MESSAGE, READONLY_TAG, SHORT_LINK_V2, TAG_TYPE, } from './constants';
 import { iconsViber } from './iconsViber';
 // Utils
 import { acceptablePatternChecking, detectURLRegex, getCachedRegex, patternHandlers, tagRegexStringPattern, } from './patternHandlers';
@@ -401,6 +401,7 @@ export const isPersonalizeTagType = (type) => [
     CUSTOM_FN,
     CONTENT_SOURCE_GROUP,
 ].includes(type);
+export const isShortLinkTagType = (type) => [SHORT_LINK_V2].includes(type);
 export const generateTagContent = (params) => {
     const { tagData, content } = params;
     let dataAttrsString = '';
@@ -409,6 +410,11 @@ export const generateTagContent = (params) => {
         const { shortlinkType } = tagData;
         dataAttrs.set(`tag-${TAG_TYPE.SHORT_LINK}-type`, shortlinkType);
     }
+    /** SHORT_LINK_V2 */
+    if (tagData.type === TAG_TYPE.SHORT_LINK_V2) {
+        const { shortlinkType } = tagData;
+        dataAttrs.set(`tag-${TAG_TYPE.SHORT_LINK_V2}-type`, shortlinkType);
+    }
     dataAttrs.forEach((value, key) => {
         dataAttrsString = dataAttrsString.concat(` data-${key}="${value}"`);
     });

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

@@ -1,6 +1,6 @@
 import type { StatusType, TagifyWrapperProps } from './types';
 export declare const getTagifyStyled: ({ $maxHeight, $tagifyFullWidth }: TagifyWrapperProps) => import("styled-components").FlattenSimpleInterpolation;
-export declare const getTagifyInputStyled: ({ $minWidth, $placeholder, $isSingleLineText, }: TagifyWrapperProps) => import("styled-components").FlattenSimpleInterpolation;
+export declare const getTagifyInputStyled: ({ $minWidth, $placeholder, $minWidthPlaceholder, $isSingleLineText, }: TagifyWrapperProps) => import("styled-components").FlattenSimpleInterpolation;
 export declare const getStyledTags: () => string;
 export declare const getTagifyTagStyled: (_wrapperProps: TagifyWrapperProps) => import("styled-components").FlattenInterpolation<import("styled-components").ThemedStyledProps<TagifyWrapperProps, any>>;
 export declare const getBackgroundInputStatus: (status?: StatusType) => string;

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, TAG_COLOR, TAG_H, TAG_TYPE, } from './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';
 export const getTagifyStyled = ({ $maxHeight, $tagifyFullWidth }) => css `
   ${$maxHeight &&
     css `
@@ -36,12 +36,21 @@ export const getTagifyStyled = ({ $maxHeight, $tagifyFullWidth }) => css `
   font-size: var(--input-font-size);
   background: transparent;
 `;
-export const getTagifyInputStyled = ({ $minWidth, $placeholder, $isSingleLineText, }) => css `
+export const getTagifyInputStyled = ({ $minWidth, $placeholder, $minWidthPlaceholder, $isSingleLineText, }) => css `
   // Because $placeholder depends on $minWidth to display
-  ${$minWidth &&
-    !$placeholder &&
-    css `
-    min-width: ${isString($minWidth) ? $minWidth : `${$minWidth}px`} !important;
+  ${css `
+    min-width: ${(() => {
+    // Primary check for $minWidth
+    if ($minWidth) {
+        return isString($minWidth) ? $minWidth : `${$minWidth}px`;
+    }
+    // Secondary check for $placeholder
+    if ($placeholder) {
+        return isString($minWidthPlaceholder) ? $minWidthPlaceholder : `${$minWidthPlaceholder}px`;
+    }
+    // Fallback value
+    return 'unset';
+})()} !important;
   `}
 
   ${$isSingleLineText &&
@@ -71,6 +80,12 @@ export const getStyledTags = () => {
                     break;
                 return TAG_COLOR[SHORT_LINK][shortlinkType];
             }
+            case TAG_TYPE.SHORT_LINK_V2: {
+                const { shortlinkType } = tag;
+                if (!shortlinkType)
+                    break;
+                return TAG_COLOR[SHORT_LINK_V2][shortlinkType];
+            }
             default: {
                 if (!type)
                     return 'white';
@@ -122,6 +137,22 @@ export const getStyledTags = () => {
     })};
       };
     }
+    
+    &[data-tag-type~='${TAG_TYPE.SHORT_LINK_V2}'] {
+      &[data-tag-${TAG_TYPE.SHORT_LINK_V2}-type~='${SHORT_LINK_TYPE.INDIVIDUAL}'] {
+        background: ${getBackgroundColor({
+        type: TAG_TYPE.SHORT_LINK_V2,
+        shortlinkType: SHORT_LINK_TYPE.INDIVIDUAL,
+    })};
+      };
+
+      &[data-tag-${TAG_TYPE.SHORT_LINK_V2}-type~='${SHORT_LINK_TYPE.GENERAL}'] {
+        background: ${getBackgroundColor({
+        type: TAG_TYPE.SHORT_LINK_V2,
+        shortlinkType: SHORT_LINK_TYPE.GENERAL,
+    })};
+      };
+    }
   `;
 };
 export const getTagifyTagStyled = (_wrapperProps) => css `
@@ -152,8 +183,8 @@ export const getTagifyTagStyled = (_wrapperProps) => css `
             }
           }
         }
-        > div[data-tag-type='promotion_code'] {
-          background-color: white;
+        > div[data-tag-type] {
+          background-color: white !important;
           border: 1px solid red;
         }
       `}
@@ -181,8 +212,8 @@ export const getTagifyTagStyled = (_wrapperProps) => css `
             }
           }
         }
-        > div[data-tag-type='promotion_code'] {
-          background-color: white;
+        > div[data-tag-type] {
+          background-color: white !important;
           border: 1px solid red;
         }
       `}
@@ -211,8 +242,8 @@ export const getTagifyTagStyled = (_wrapperProps) => css `
             }
           }
         }
-        > div[data-tag-type='promotion_code'] {
-          background-color: white;
+        > div[data-tag-type] {
+          background-color: white !important;
           border: 1px solid red;
         }
       `}

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.917",
+  "version": "1.3.5-beta.919",
   "description": "An enterprise-class UI design language and React UI library.",
   "sideEffects": [
     "dist/*",
@@ -253,3 +253,4 @@
     "react-router-dom": ">= 5.1.0"
   }
 }
+