@antscorp/antsomi-ui 1.3.5-beta.785 → 1.3.5-beta.787

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

@@ -7,7 +7,6 @@ import { useDeepCompareMemo } from '@antscorp/antsomi-ui/es/hooks/useDeepCompare
 import { useDebounce } from '@antscorp/antsomi-ui/es/hooks/useDebounce';
 import { useUpdateEffect } from '@antscorp/antsomi-ui/es/hooks/useUpdateEffect';
 import { useDeepCompareEffect } from '@antscorp/antsomi-ui/es/hooks/useDeepCompareEffect';
-import { useSettingsTagify } from './hooks';
 // Components
 import Tagify from '@yaireo/tagify';
 // Css
@@ -53,6 +52,10 @@ const TagifyInput = forwardRef((props, ref) => {
                         selection.removeAllRanges();
                         selection.addRange(range);
                     }
+                    // Change data out
+                    const inputValue = tagifyRef.current.getInputValue();
+                    const convertedValue = convertInputStringToOriginal(inputValue);
+                    onChange(convertedValue);
                 }
                 else {
                     // In case add new common tag
@@ -208,12 +211,29 @@ const TagifyInput = forwardRef((props, ref) => {
         };
     }, [initializeTagify]);
     // Settings some tagify attributes
-    useSettingsTagify(tagifyRef.current, {
-        disabled,
-        readonly,
-        maxPersonalizeTags,
-        placeholder,
-    });
+    useLayoutEffect(() => {
+        if (tagifyRef.current && typeof readonly !== 'undefined') {
+            tagifyRef.current.setReadonly(!!readonly);
+        }
+    }, [readonly]);
+    // Set disabled
+    useLayoutEffect(() => {
+        if (tagifyRef.current && typeof disabled !== 'undefined') {
+            tagifyRef.current.setDisabled(!!disabled);
+        }
+    }, [disabled]);
+    // Set placeholder
+    useLayoutEffect(() => {
+        if (tagifyRef.current && typeof placeholder !== 'undefined') {
+            tagifyRef.current.setPlaceholder(placeholder);
+        }
+    }, [placeholder]);
+    // Set max personalize tags
+    useLayoutEffect(() => {
+        if (tagifyRef.current && typeof maxPersonalizeTags !== 'undefined') {
+            tagifyRef.current.settings.maxTags = maxPersonalizeTags;
+        }
+    }, [maxPersonalizeTags]);
     /*
      * Need to sync label of the tags if any map attribute is changed to make correct label
      * */
@@ -275,6 +295,12 @@ const TagifyInput = forwardRef((props, ref) => {
         const convertedValue = convertInputStringToOriginal(inputTypeDebounce);
         onChange(convertedValue);
     }, [inputTypeDebounce]);
+    // Removes all tags and resets the original input tag's value property if the initial value back to is empty string
+    useUpdateEffect(() => {
+        if (initialValue === '' && tagifyRef.current) {
+            tagifyRef.current.removeAllTags();
+        }
+    }, [initialValue]);
     useEffect(() => {
         if (!tagifyRef.current?.DOM.scope)
             return;

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

@@ -39,8 +39,9 @@ export declare const TAG_TYPE: {
     readonly CUSTOM_FN: "custom";
     readonly EMOJI: "emoji";
     readonly SHORT_LINK: "shortlink";
+    readonly CONTENT_SOURCE_GROUP: "groups";
 };
-export declare const CUSTOMER: "customer", VISITOR: "visitor", EVENT: "event", PROMOTION_CODE: "promotion_code", CUSTOM_FN: "custom", EMOJI: "emoji", SHORT_LINK: "shortlink", OBJECT_WIDGET: "objectWidget";
+export declare const CUSTOMER: "customer", VISITOR: "visitor", EVENT: "event", PROMOTION_CODE: "promotion_code", CUSTOM_FN: "custom", EMOJI: "emoji", SHORT_LINK: "shortlink", OBJECT_WIDGET: "objectWidget", CONTENT_SOURCE_GROUP: "groups";
 export declare const TAG_COLOR: {
     readonly customer: string | undefined;
     readonly shortlink: string | undefined;
@@ -49,6 +50,7 @@ export declare const TAG_COLOR: {
     readonly promotion_code: "#d8cafe";
     readonly objectWidget: "#cafedd";
     readonly custom: "#bbefbe";
+    readonly groups: "#ffdd9f";
 };
 export declare const EMOJI_COLLECTIONS: {
     readonly COMMON: "common";

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

@@ -53,8 +53,9 @@ export const TAG_TYPE = {
     CUSTOM_FN: 'custom',
     EMOJI: 'emoji',
     SHORT_LINK: 'shortlink',
+    CONTENT_SOURCE_GROUP: 'groups',
 };
-export const { CUSTOMER, VISITOR, EVENT, PROMOTION_CODE, CUSTOM_FN, EMOJI, SHORT_LINK, OBJECT_WIDGET, } = TAG_TYPE;
+export const { CUSTOMER, VISITOR, EVENT, PROMOTION_CODE, CUSTOM_FN, EMOJI, SHORT_LINK, OBJECT_WIDGET, CONTENT_SOURCE_GROUP, } = TAG_TYPE;
 export const TAG_COLOR = {
     [CUSTOMER]: globalToken?.blue2,
     [SHORT_LINK]: globalToken?.blue2,
@@ -63,6 +64,7 @@ export const TAG_COLOR = {
     [PROMOTION_CODE]: '#d8cafe',
     [OBJECT_WIDGET]: '#cafedd',
     [CUSTOM_FN]: '#bbefbe',
+    [CONTENT_SOURCE_GROUP]: '#ffdd9f',
 };
 export const EMOJI_COLLECTIONS = {
     COMMON: 'common',

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

@@ -5,7 +5,7 @@ import { errorWrapper } from './errorWrapper';
 import { isViberEmoji } from './iconsViber';
 import { random } from '@antscorp/antsomi-ui/es/utils';
 // Constants
-import { EMOJI, EMOJI_COLLECTIONS, LINE_EMOJI_PTN, PERSONALIZE_PTN, PREFIX_PATTERN_LINE_MESSAGE, 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, SHORT_LINK, SHORT_LINK_GENERAL_PTN, SHORT_LINK_INDIVIDUAL_PTN, SHORT_LINK_PTN, SHORT_LINK_TYPE, VIBER_EMOJI_PTN, } from './constants';
 /*
  * Usage to cache compiled regular expressions:
  * const regex = getCachedRegex(pattern, flags);
@@ -40,19 +40,38 @@ export function validateURL(txt) {
 }
 export const getPersonalizeTagInfo = (originalTag, mapAttributes) => {
     try {
-        const [type, attributeName] = originalTag.split('.');
-        if (!mapAttributes || !mapAttributes[type]) {
+        const [type, attributeName, subAttributeName] = originalTag.split('.');
+        const isCsGroup = type === CONTENT_SOURCE_GROUP;
+        let label = attributeName || type;
+        if (!mapAttributes || (!mapAttributes[type] && !isCsGroup)) {
             // return fallback if no mapping
-            return { type, label: attributeName || type };
+            return { type, label };
+        }
+        // Check if it is a content source tag
+        if (isCsGroup) {
+            const csRegex = getCachedRegex('^([^\\[]+)', 'g', 'cs_group_Regex');
+            const match = attributeName.match(csRegex);
+            if (match) {
+                const csGroupId = match[0];
+                const mapping = mapAttributes[csGroupId];
+                label =
+                    mapping[subAttributeName]?.display ||
+                        mapping[subAttributeName]?.label ||
+                        subAttributeName;
+            }
+        }
+        else {
+            const mapping = mapAttributes[type];
+            label =
+                mapping[attributeName]?.label ||
+                    mapping[attributeName]?.display ||
+                    mapping[attributeName]?.template_name ||
+                    mapping[attributeName]?.value ||
+                    type;
         }
-        const mapping = mapAttributes[type];
         return {
             type,
-            label: mapping[attributeName]?.label ||
-                mapping[attributeName]?.display ||
-                mapping[attributeName]?.template_name ||
-                mapping[attributeName]?.value ||
-                type,
+            label: label || type,
         };
     }
     catch (error) {
@@ -143,14 +162,16 @@ const handleLinePattern = match => {
 const handlePersonalizeTagPattern = match => {
     const [personalizeTag, personalizeContent] = match;
     const [tagCode] = personalizeContent.split('||');
-    const [type, attributeName] = tagCode.split('.');
+    const [type, attributeName, subAttributeName] = tagCode.split('.');
     if (!tagCode || !type) {
         console.error('Invalid personalize pattern detected: ', tagCode);
         return { isValid: false, tag: '[[Invalid Personalize]]' };
     }
+    const isContentSourceTag = type === CONTENT_SOURCE_GROUP;
+    const label = isContentSourceTag && subAttributeName ? subAttributeName : attributeName || type;
     const tag = createTagPattern({
+        label,
         type: type,
-        label: attributeName || type,
         value: personalizeTag,
     });
     return { isValid: true, tag };

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

@@ -1,7 +1,7 @@
 // Libraries
 import stringReplaceToArray from 'string-replace-to-array';
 // Constants
-import { CUSTOMER, CUSTOM_FN, EMOJI, EMOJI_COLLECTIONS, EVENT, OBJECT_WIDGET, PREFIX_PATTERN_LINE_MESSAGE, PROMOTION_CODE, TAG_COLOR, TAG_TYPE, VISITOR, } from './constants';
+import { CONTENT_SOURCE_GROUP, CUSTOMER, CUSTOM_FN, EMOJI, EMOJI_COLLECTIONS, EVENT, OBJECT_WIDGET, PREFIX_PATTERN_LINE_MESSAGE, PROMOTION_CODE, TAG_COLOR, TAG_TYPE, VISITOR, } from './constants';
 import { iconsViber } from './iconsViber';
 import { globalToken } from '@antscorp/antsomi-ui/es/constants';
 // Utils
@@ -327,7 +327,15 @@ export const getStyledTags = () => {
     });
     return styledTags.join('');
 };
-export const isPersonalizeTagType = (type) => [CUSTOMER, VISITOR, EVENT, PROMOTION_CODE, OBJECT_WIDGET, CUSTOM_FN].includes(type);
+export const isPersonalizeTagType = (type) => [
+    CUSTOMER,
+    VISITOR,
+    EVENT,
+    PROMOTION_CODE,
+    OBJECT_WIDGET,
+    CUSTOM_FN,
+    CONTENT_SOURCE_GROUP,
+].includes(type);
 export const getBackgroundInputStatus = (status) => {
     switch (status) {
         case 'error':

package/es/locales/en/google-sheet.json

@@ -758,6 +758,11 @@
     "_NOTI_INVALID_DATE_FORMAT": "Invalid Date Format",
     "_NOTI_INVALID_NAME": "Invalid field",
     "_NOTI_INVALID_URL": "Invalid URL",
+    "_NOTI_INVALID_DOMAIN_1": "Please enter a valid domain, including a top-level domain (e.g., .com, .net, .vn)",
+    "_NOTI_INVALID_DOMAIN_2": "Only letters (a-z), numbers (0-9), hyphens (-), and dots (.) are allowed",
+    "_NOTI_INVALID_COOKIE_1": "The Cookie Domain must not end with a special character",
+    "_NOTI_INVALID_COOKIE_2": "The Cookie Domain must be a part of the entered domain",
+    "_NOTI_EMPTY": "This field can’t be empty",
     "_NOTI_JOURNEY_NOT_FOUND": "Journey Not Found",
     "_NOTI_MAXIMUM_COLUMN_SET": "You can save a maximum of 15 column sets",
     "_NOTI_MAXIMUM_FILE_SIZE_ICON": "Please select a file less than {{fileSize}} MB, please try again",

package/es/locales/i18n.d.ts

@@ -760,6 +760,11 @@ export declare const translationsJson: {
             _NOTI_INVALID_DATE_FORMAT: string;
             _NOTI_INVALID_NAME: string;
             _NOTI_INVALID_URL: string;
+            _NOTI_INVALID_DOMAIN_1: string;
+            _NOTI_INVALID_DOMAIN_2: string;
+            _NOTI_INVALID_COOKIE_1: string;
+            _NOTI_INVALID_COOKIE_2: string;
+            _NOTI_EMPTY: string;
             _NOTI_JOURNEY_NOT_FOUND: string;
             _NOTI_MAXIMUM_COLUMN_SET: string;
             _NOTI_MAXIMUM_FILE_SIZE_ICON: string;
@@ -4091,6 +4096,11 @@ export declare const translationsJson: {
             _NOTI_INVALID_DATE_FORMAT: string;
             _NOTI_INVALID_NAME: string;
             _NOTI_INVALID_URL: string;
+            _NOTI_INVALID_DOMAIN_1: string;
+            _NOTI_INVALID_DOMAIN_2: string;
+            _NOTI_INVALID_COOKIE_1: string;
+            _NOTI_INVALID_COOKIE_2: string;
+            _NOTI_EMPTY: string;
             _NOTI_JOURNEY_NOT_FOUND: string;
             _NOTI_MAXIMUM_COLUMN_SET: string;
             _NOTI_MAXIMUM_FILE_SIZE_ICON: string;
@@ -6972,6 +6982,11 @@ export declare const translationsJson: {
             _NOTI_INVALID_DATE_FORMAT: string;
             _NOTI_INVALID_NAME: string;
             _NOTI_INVALID_URL: string;
+            _NOTI_INVALID_DOMAIN_1: string;
+            _NOTI_INVALID_DOMAIN_2: string;
+            _NOTI_INVALID_COOKIE_1: string;
+            _NOTI_INVALID_COOKIE_2: string;
+            _NOTI_EMPTY: string;
             _NOTI_JOURNEY_NOT_FOUND: string;
             _NOTI_MAXIMUM_COLUMN_SET: string;
             _NOTI_MAXIMUM_FILE_SIZE_ICON: string;