@antscorp/antsomi-ui 1.3.5-beta.782 → 1.3.5-beta.784

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

@@ -7,6 +7,7 @@ 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
@@ -14,15 +15,16 @@ import '@yaireo/tagify/dist/tagify.css';
 // Styled
 import { TagTextArea, TagifyWrapper, WrapperPlaceHolder } from './styled';
 // Utils
-import { parseTagStringToTagify, convertInputStringToOriginal, emojiManufacturer, getEmojiTag, } from './utils';
+import { parseTagStringToTagify, convertInputStringToOriginal, emojiManufacturer, getEmojiTag, isPersonalizeTagType, } from './utils';
+import { acceptablePatternChecking, getCachedRegex, getPersonalizeTagInfo, patternHandlers, } from './patternHandlers';
 // Constants
-import { EMOJI, defaultCssVariables, tagifyDefaultProps } from './constants';
+import { EMOJI, PERSONALIZE_PTN, SHORT_LINK, defaultCssVariables, tagifyDefaultProps, } from './constants';
 const TagifyInput = forwardRef((props, ref) => {
     // Props
-    const { value, readonly, maxLength, placeholder, acceptableTagPattern, mapAttributes, maxTags, name, children, cssTagifyVariables, onTagClick, onChange, } = props;
+    const { initialValue, readonly, disabled, maxLength, placeholder, acceptableTagPattern, mapAttributes, maxPersonalizeTags, name, children, cssTagifyVariables, onTagClick, onChange, } = props;
     console.count('------------ re-render ------------');
     // States
-    const [inputTyping, , setInputTyping] = useDebounce(value, 450);
+    const [inputTypeDebounce, , setInputTyping] = useDebounce(initialValue, 450);
     // Refs
     const inputRef = useRef(null);
     const tagifyRef = useRef(null);
@@ -30,20 +32,22 @@ const TagifyInput = forwardRef((props, ref) => {
     const placeHolderRef = useRef(null);
     // Memoizations
     const cssVariablesMemoized = useMemo(() => _.assign({}, defaultCssVariables, cssTagifyVariables || {}), [cssTagifyVariables]);
-    const parsedValue = useDeepCompareMemo(() => parseTagStringToTagify(value, acceptableTagPattern, mapAttributes), [value, acceptableTagPattern, mapAttributes]);
+    const parsedDefaultValue = useDeepCompareMemo(() => parseTagStringToTagify(initialValue, acceptableTagPattern), [initialValue, acceptableTagPattern]);
     // Expose some methods
     useImperativeHandle(ref, () => ({
         onAddNewTag: (newTag) => {
             if (newTag && tagifyRef.current) {
-                const { settings } = tagifyRef.current;
-                const { readonly } = settings;
+                const { settings, value: currentTags } = tagifyRef.current;
+                const { readonly, maxTags } = settings;
+                const currentPersonalizeTags = currentTags.filter(tag => ![EMOJI, SHORT_LINK].includes(tag.type));
+                const currentPersonalizeTagsLength = currentPersonalizeTags.length;
                 // Check readonly
                 if (readonly)
                     return;
                 // For case add new common emoji
                 if (typeof newTag === 'string') {
                     tagifyRef.current.injectAtCaret(newTag);
-                    // Need to reselect to keep the caret position
+                    // Need to re-select to keep the caret position
                     const selection = window.getSelection();
                     if (selection?.rangeCount) {
                         const range = selection.getRangeAt(0);
@@ -52,21 +56,26 @@ const TagifyInput = forwardRef((props, ref) => {
                     }
                 }
                 else {
+                    // In case add new common tag
                     const { type } = newTag;
-                    // Add new tag
+                    /*
+                     * Validate the max limit before add new tag
+                     * For emoji and short link, it will be passed
+                     */
+                    if (![EMOJI, SHORT_LINK].includes(type) &&
+                        currentPersonalizeTagsLength >= maxTags)
+                        return;
+                    // Create new tag
                     const newTagEle = tagifyRef.current.createTagElem(newTag);
+                    // Add new tag
                     tagifyRef.current.injectAtCaret(newTagEle);
                     // Change data out before place the caret to keep valid caret positioning
                     const inputValue = tagifyRef.current.getInputValue();
                     const convertedValue = convertInputStringToOriginal(inputValue);
                     onChange(convertedValue);
-                    if (type === EMOJI) {
-                        const elm = tagifyRef.current.insertAfterTag(newTagEle, '\u00A0'); //  <- adds space after the tag
-                        tagifyRef.current.placeCaretAfterNode(elm);
-                    }
-                    else {
-                        tagifyRef.current.placeCaretAfterNode(newTagEle);
-                    }
+                    // NOTE: place to refactor if not need to add space after the tag
+                    const spaceEle = tagifyRef.current.insertAfterTag(newTagEle, '\u00A0'); //  <- adds space after the tag
+                    tagifyRef.current.placeCaretAfterNode(spaceEle);
                 }
             }
         },
@@ -136,17 +145,19 @@ const TagifyInput = forwardRef((props, ref) => {
                 templates: {
                     tag: customizeTag,
                 },
-                maxTags,
-                readonly,
                 mode: 'mix',
-                placeholder,
+                placeholder: 'Enter your text...',
                 mixMode: {
                     insertAfterTag: '', // Not insert anything after tag
                 },
                 tagTextProp: 'label', // Use `tagify.label` to display the tags
                 enforceWhitelist: false, // Ensure that tags not in the whitelist can be added
                 duplicates: true, // Allow duplicate tags
-                editTags: false, // Allow tag editing
+                editTags: false, // Not allow tag editing
+                dropdown: {
+                    enabled: false, // Do not display the dropdown
+                },
+                pattern: /^$a/, // -> using this regex never match any character to "prevent" add new tag when press enter
                 hooks: {
                     beforeKeyDown: (event, data) => {
                         /*
@@ -174,7 +185,7 @@ const TagifyInput = forwardRef((props, ref) => {
                 },
             });
         }
-    }, [placeholder, readonly, maxTags, maxLength, customizeTag]);
+    }, [maxLength, customizeTag]);
     // Initialization tagify
     useLayoutEffect(() => {
         initializeTagify();
@@ -184,14 +195,53 @@ const TagifyInput = forwardRef((props, ref) => {
             }
         };
     }, [initializeTagify]);
-    // Force refresh tags the tagify after the map attributes changes to show valid tags
+    // Settings some tagify attributes
+    useSettingsTagify(tagifyRef.current, {
+        disabled,
+        readonly,
+        maxPersonalizeTags,
+        placeholder,
+    });
+    /*
+     * Need to sync label of the tags if any map attribute is changed to make correct label
+     * */
     useDeepCompareEffect(() => {
         if (!_.isEmpty(mapAttributes) && tagifyRef.current) {
-            const inputValue = tagifyRef.current?.getInputValue();
-            console.count('----------- refresh tagify -----------');
-            tagifyRef.current?.loadOriginalValues(inputValue);
+            const tagElements = tagifyRef.current.getTagElms();
+            const { pattern, name: cachePatternName, acceptablePattern: acceptableType, } = patternHandlers[PERSONALIZE_PTN];
+            tagElements.forEach(tagElement => {
+                const { __tagifyTagData: tagData } = tagElement;
+                if (tagData) {
+                    const { type, value } = tagData;
+                    const isPersonalTag = isPersonalizeTagType(type);
+                    if (isPersonalTag && value) {
+                        const isAccepted = acceptablePatternChecking(acceptableType, acceptableTagPattern);
+                        // No need to continue if pattern is not accepted
+                        if (!isAccepted)
+                            return;
+                        // Use the cached regex instead of creating a new one each time
+                        const regex = getCachedRegex(pattern, 'g', cachePatternName);
+                        let match;
+                        // Iterate over matches of the current pattern
+                        // eslint-disable-next-line no-cond-assign
+                        while ((match = regex.exec(value)) !== null) {
+                            const [, personalizeContent] = match;
+                            const [tagCode] = personalizeContent.split('||');
+                            const { label: tagLabel } = getPersonalizeTagInfo(tagCode, mapAttributes);
+                            const tagTextNode = tagifyRef.current?.getTagTextNode(tagElement);
+                            if (tagTextNode) {
+                                /*
+                                 * Just only update to the correct text of the tag
+                                 * NOTE: Do not actually affect raw data
+                                 */
+                                tagTextNode.textContent = tagLabel;
+                            }
+                        }
+                    }
+                }
+            });
         }
-    }, [mapAttributes]);
+    }, [mapAttributes, acceptableTagPattern]);
     // Listen to Tagify events
     useEffect(() => {
         const { current: tagifyInstance } = tagifyRef || {};
@@ -210,9 +260,9 @@ const TagifyInput = forwardRef((props, ref) => {
         };
     }, [onTagItemClick, onTagifyTyping, onTagifyRemoved]);
     useUpdateEffect(() => {
-        const convertedValue = convertInputStringToOriginal(inputTyping);
+        const convertedValue = convertInputStringToOriginal(inputTypeDebounce);
         onChange(convertedValue);
-    }, [inputTyping]);
+    }, [inputTypeDebounce]);
     useEffect(() => {
         if (!tagifyRef.current?.DOM.scope)
             return;
@@ -241,7 +291,7 @@ const TagifyInput = forwardRef((props, ref) => {
             }
         };
     }, []);
-    return (_jsxs(TagifyWrapper, { ref: tagifyWrapperRef, "$cssTagifyVariables": cssVariablesMemoized, className: "tagify-container", id: "tagify-container", "data-test": "tagify-wrapper", children: [_jsx(TagTextArea, { id: "tagify-textarea", ref: inputRef, name: name, defaultValue: parsedValue, "data-test": "tagify-input" }), _jsx(WrapperPlaceHolder, { ref: placeHolderRef, "$isShow": !!children, children: children })] }));
+    return (_jsxs(TagifyWrapper, { ref: tagifyWrapperRef, "$cssTagifyVariables": cssVariablesMemoized, className: "tagify-container", id: "tagify-container", "data-test": "tagify-wrapper", children: [_jsx(TagTextArea, { id: "tagify-textarea", ref: inputRef, name: name, defaultValue: parsedDefaultValue, "data-test": "tagify-input" }), _jsx(WrapperPlaceHolder, { ref: placeHolderRef, "$isShow": !!children, children: children })] }));
 });
 TagifyInput.defaultProps = tagifyDefaultProps;
 export default memo(TagifyInput);

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

@@ -36,9 +36,10 @@ export const DEFAULT_ACCEPT_TAGS = [
     LINE_EMOJI_PTN,
 ];
 export const tagifyDefaultProps = {
-    value: '',
+    initialValue: '',
     name: 'tagifyInput',
     readonly: false,
+    disabled: false,
     placeholder: undefined,
     acceptableTagPattern: DEFAULT_ACCEPT_TAGS,
     onChange: () => { },

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

@@ -1,6 +1,6 @@
-export const errorWrapper = (handler) => (match, mapAttributes) => {
+export const errorWrapper = (handler) => match => {
     try {
-        return handler(match, mapAttributes);
+        return handler(match);
     }
     catch (error) {
         // eslint-disable-next-line no-console

package/es/components/molecules/TagifyInput/hooks/index.d.ts

@@ -0,0 +1 @@
+export * from './useSettingsTagify';

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

@@ -0,0 +1 @@
+export * from './useSettingsTagify';

package/es/components/molecules/TagifyInput/hooks/useSettingsTagify.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="yaireo__tagify" />
+import Tagify from '@yaireo/tagify';
+import type { TagDataCustomize, TagifyInputProps } from '../types';
+type TagifyInstanceProps = Tagify<TagDataCustomize> | null;
+type SettingsTagifyProps = Pick<TagifyInputProps, 'readonly' | 'disabled' | 'placeholder' | 'maxPersonalizeTags'>;
+export declare const useSettingsTagify: (tagifyInstance: TagifyInstanceProps, settings: SettingsTagifyProps) => void;
+export {};

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

@@ -0,0 +1,30 @@
+/* eslint-disable react-hooks/exhaustive-deps */
+// Libraries
+import { useLayoutEffect } from 'react';
+export const useSettingsTagify = (tagifyInstance, settings) => {
+    const { readonly, disabled, placeholder, maxPersonalizeTags } = settings;
+    // Set read only
+    useLayoutEffect(() => {
+        if (tagifyInstance && typeof readonly !== 'undefined') {
+            tagifyInstance.setReadonly(readonly);
+        }
+    }, [readonly]);
+    // Set disabled
+    useLayoutEffect(() => {
+        if (tagifyInstance && typeof disabled !== 'undefined') {
+            tagifyInstance.setDisabled(disabled);
+        }
+    }, [disabled]);
+    // Set placeholder
+    useLayoutEffect(() => {
+        if (tagifyInstance && typeof placeholder !== 'undefined') {
+            tagifyInstance.setPlaceholder(placeholder);
+        }
+    }, [placeholder]);
+    // Set max personalize tags
+    useLayoutEffect(() => {
+        if (tagifyInstance && typeof maxPersonalizeTags !== 'undefined') {
+            tagifyInstance.settings.maxTags = maxPersonalizeTags;
+        }
+    }, [maxPersonalizeTags]);
+};

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

@@ -1,4 +1,4 @@
-import type { AcceptablePattern, PatterTagName, PatternHandlerWrapper } from './types';
+import type { AcceptablePattern, MapAttributesProps, PatterTagName, PatternHandlerWrapper } from './types';
 /**
  * Retrieves a cached regular expression or compiles and caches it if not found.
  * @param pattern The regex pattern string.
@@ -10,4 +10,8 @@ export declare function getCachedRegex(pattern: string, flags?: string, cacheKey
 export declare const tagRegexStringPattern = "\\[\\[({.*?})\\]\\]";
 export declare function acceptablePatternChecking(pattern: AcceptablePattern, acceptablePattern: Array<AcceptablePattern>): boolean;
 export declare function validateURL(txt: string): boolean;
+export declare const getPersonalizeTagInfo: (originalTag: string, mapAttributes?: MapAttributesProps) => {
+    label: string;
+    type: string;
+};
 export declare const patternHandlers: Record<PatterTagName, PatternHandlerWrapper>;

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

@@ -38,7 +38,7 @@ export function validateURL(txt) {
     const regexUrl = getCachedRegex('^(https?:\\/\\/)?(([A-Za-z]{3,9}:)?(\\/\\/)?(?:[-;:&=+$,\\w]+@)?[A-Za-z0-9.-]+|(?:www\\.|[-;:&=+$,\\w]+@)[A-Za-z0-9.-]+)((\\/[+~%\\/\\.\\w-_]*)*(?:\\?[-+=&;%@\\.\\w_]*)?(#(?:[.!\\/\\\\\\w-]*)?)?)$', '', 'checkingURL');
     return regexUrl.test(txt);
 }
-const getPersonalizeTagInfo = (originalTag, mapAttributes) => {
+export const getPersonalizeTagInfo = (originalTag, mapAttributes) => {
     try {
         const [type, attributeName] = originalTag.split('.');
         if (!mapAttributes || !mapAttributes[type]) {
@@ -87,7 +87,7 @@ const handleShortlinkIndividualPattern = match => {
     const tag = createTagPattern({
         label,
         type: SHORT_LINK,
-        shortLinkType: SHORT_LINK_TYPE.INDIVIDUAL,
+        shortlinkType: SHORT_LINK_TYPE.INDIVIDUAL,
         value: fullMatch,
     });
     return { isValid, tag };
@@ -114,7 +114,7 @@ const handleShortlinkGeneralPattern = match => {
     const tag = createTagPattern({
         label,
         type: SHORT_LINK,
-        shortLinkType: SHORT_LINK_TYPE.GENERAL,
+        shortlinkType: SHORT_LINK_TYPE.GENERAL,
         value: fullMatch,
     });
     return { isValid, tag };
@@ -140,17 +140,17 @@ const handleLinePattern = match => {
 /*
  * Function to handle generic of personalize #{...} pattern
  */
-const handlePersonalizeTagPattern = (match, mapAttributes) => {
+const handlePersonalizeTagPattern = match => {
     const [personalizeTag, personalizeContent] = match;
     const [tagCode] = personalizeContent.split('||');
-    const { label: tagLabel, type: tagType } = getPersonalizeTagInfo(tagCode, mapAttributes);
-    if (!tagCode || !tagType) {
+    const [type, attributeName] = tagCode.split('.');
+    if (!tagCode || !type) {
         console.error('Invalid personalize pattern detected: ', tagCode);
         return { isValid: false, tag: '[[Invalid Personalize]]' };
     }
     const tag = createTagPattern({
-        type: tagType,
-        label: tagLabel,
+        type: type,
+        label: attributeName || type,
         value: personalizeTag,
     });
     return { isValid: true, tag };

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

@@ -9,10 +9,10 @@ export type MapAttributesProps = Record<string, Record<string, any>>;
  */
 export interface TagifyInputProps {
     /**
-     * Represents the initial or current value of the Tagify input.
-     * Typically used to populate the tags when the component is first rendered.
+     * Initial value for the Tagify input field.
+     * Only used when the component is first rendered.
      */
-    value: string;
+    initialValue: string;
     /**
      * Optional mapping configuration for custom attributes associated with tags.
      * Defines how tag attributes are mapped and processed internally.
@@ -30,12 +30,13 @@ export interface TagifyInputProps {
     classNames?: ClassNameSettings;
     placeholder?: TagifySettings['placeholder'];
     readonly?: TagifySettings['readonly'];
+    disabled?: boolean;
     maxLength?: number;
     /**
      * Specifies the maximum number of tags that can be added to the input.
      * Helps enforce constraints by limiting the number of tags a user can input.
      */
-    maxTags?: TagifySettings['maxTags'];
+    maxPersonalizeTags?: TagifySettings['maxTags'];
     /**
      * Defines acceptable patterns or validation rules for tags.
      * Ensures only tags matching specified patterns can be added, enforcing content rules.
@@ -84,7 +85,7 @@ interface TagDataEmoji extends Omit<TagDataText, 'type'> {
 interface TagDataShortLink extends Omit<TagDataText, 'type'> {
     value: string;
     type: Extract<TagType, 'shortlink'>;
-    shortLinkType: ShortLinkType;
+    shortlinkType: ShortLinkType;
 }
 export type TagDataCustomize = TagDataEmoji | TagDataText | TagDataShortLink;
 export interface EmojiTag {
@@ -92,7 +93,7 @@ export interface EmojiTag {
     emoji: string;
     code: string;
 }
-export type PatternHandler = (match: RegExpExecArray, mapAttributes?: MapAttributesProps) => {
+export type PatternHandler = (match: RegExpExecArray) => {
     isValid: boolean;
     tag: string;
 };

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

@@ -1,11 +1,11 @@
-import { AcceptablePattern, EmojiCollection, EmojiTag, MapAttributesProps } from './types';
+import { AcceptablePattern, EmojiCollection, EmojiTag, TagType } from './types';
 /**
  * Parses the input string and replaces matching patterns with processed tags.
  * This function iterates over predefined regex patterns and replaces each match
  * with a corresponding replacement string generated by pattern handlers.
  *
  * @param {string} input - The input string containing tags and patterns to be replaced.
- * @param {MapAttributesProps} [mapAttributes] - Optional object containing additional attributes or configuration
+ * @param {Array<AcceptablePattern>} acceptableTagPattern - An array of acceptable tag patterns
  *        passed to the pattern handler for tag processing.
  * @returns {string} The modified string with all pattern matches replaced by their corresponding tags.
  *
@@ -18,10 +18,11 @@ import { AcceptablePattern, EmojiCollection, EmojiTag, MapAttributesProps } from
  * Example:
  * ```javascript
  * const input = "Here is some text with a #{shortlink(https://example.com)} pattern.";
- * const result = parseTagStringToTagify(input);
+ * const acceptableTagPattern = ['shortlink'];
+ * const result = parseTagStringToTagify(input, acceptableTagPattern);
  * ```
  */
-export declare const parseTagStringToTagify: (input: string, acceptableTagPattern: Array<AcceptablePattern>, mapAttributes?: MapAttributesProps) => string;
+export declare const parseTagStringToTagify: (input: string, acceptableTagPattern: Array<AcceptablePattern>) => string;
 /**
  * Converts an input string containing JSON-like tags to a formatted string.
  * @param input The input string with JSON-like tags.
@@ -43,3 +44,4 @@ 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 getStyledTags: () => string;
+export declare const isPersonalizeTagType: (type: TagType) => boolean;

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

@@ -1,7 +1,7 @@
 // Libraries
 import stringReplaceToArray from 'string-replace-to-array';
 // Constants
-import { EMOJI, EMOJI_COLLECTIONS, PREFIX_PATTERN_LINE_MESSAGE, TAG_COLOR, TAG_TYPE, } from './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 { iconsViber } from './iconsViber';
 // Utils
 import { acceptablePatternChecking, getCachedRegex, patternHandlers, tagRegexStringPattern, } from './patternHandlers';
@@ -11,7 +11,7 @@ import { acceptablePatternChecking, getCachedRegex, patternHandlers, tagRegexStr
  * with a corresponding replacement string generated by pattern handlers.
  *
  * @param {string} input - The input string containing tags and patterns to be replaced.
- * @param {MapAttributesProps} [mapAttributes] - Optional object containing additional attributes or configuration
+ * @param {Array<AcceptablePattern>} acceptableTagPattern - An array of acceptable tag patterns
  *        passed to the pattern handler for tag processing.
  * @returns {string} The modified string with all pattern matches replaced by their corresponding tags.
  *
@@ -24,10 +24,11 @@ import { acceptablePatternChecking, getCachedRegex, patternHandlers, tagRegexStr
  * Example:
  * ```javascript
  * const input = "Here is some text with a #{shortlink(https://example.com)} pattern.";
- * const result = parseTagStringToTagify(input);
+ * const acceptableTagPattern = ['shortlink'];
+ * const result = parseTagStringToTagify(input, acceptableTagPattern);
  * ```
  */
-export const parseTagStringToTagify = (input, acceptableTagPattern, mapAttributes) => {
+export const parseTagStringToTagify = (input, acceptableTagPattern) => {
     const resultParts = [];
     let lastIndex = 0;
     // Array to store all matches from all patterns with their positions
@@ -45,7 +46,7 @@ export const parseTagStringToTagify = (input, acceptableTagPattern, mapAttribute
         // Iterate over matches of the current pattern
         // eslint-disable-next-line no-cond-assign
         while ((match = regex.exec(input)) !== null) {
-            const { isValid, tag } = handler(match, mapAttributes);
+            const { isValid, tag } = handler(match);
             if (isValid) {
                 matches.push({ startIndex: match.index, endIndex: regex.lastIndex, replacement: tag });
             }
@@ -325,3 +326,4 @@ export const getStyledTags = () => {
     });
     return styledTags.join('');
 };
+export const isPersonalizeTagType = (type) => [CUSTOMER, VISITOR, EVENT, PROMOTION_CODE, OBJECT_WIDGET, CUSTOM_FN].includes(type);

package/es/components/organism/ActivityTimeline/ActivityTimeline.js

@@ -5,10 +5,9 @@ import { StyledNoData, StyldTitle, StyledRoot, TimelineBottom } from './styled';
 import { Flex, Spin } from '../../atoms';
 import { ItemEvent, TimeLineTitle, ItemGroupEvent } from './components';
 import { useInView } from 'react-intersection-observer';
-import { translate, translations } from '@antscorp/antsomi-ui/es/locales';
+import { translate, translations } from '@antscorp/antsomi-locales';
 import { isEmpty } from 'lodash';
 import { differenceInMonths, formatDateTZ, startOfMonth, subMonths, } from '@antscorp/antsomi-ui/es/utils/date';
-import { getTranslateMessage } from '@antscorp/antsomi-ui/es/locales/i18n';
 import { EmptyData } from '../../molecules';
 export const ActivityTimeline = (props) => {
     const { timelines = [], isLoading = false, title = translate(translations._BLOCK_TIMELINE_CUS), timezone = Intl.DateTimeFormat().resolvedOptions().timeZone, objectName = '_THIS_PERSON_UPPERCASE', onFetchMore, eventTracking: eventTrackingProp = [], header, className, } = props;
@@ -92,7 +91,7 @@ export const ActivityTimeline = (props) => {
             return (_jsxs(_Fragment, { children: [header, _jsx(Flex, { style: { height: 240 }, align: "center", justify: "center", children: _jsx(Spin, { indicatorSize: 24 }) })] }));
         }
         if (!timelines.length) {
-            return (_jsxs(_Fragment, { children: [header, _jsx(StyledNoData, { style: { height: 240 }, align: "center", justify: "center", children: _jsx(EmptyData, { showIcon: false, description: getTranslateMessage(translations.noData).toString() }) })] }));
+            return (_jsxs(_Fragment, { children: [header, _jsx(StyledNoData, { align: "center", justify: "center", children: _jsx(EmptyData, { showIcon: false, title: translate(translations._PROFILES_NO_DATA), description: translate(translations._PROFILES_MESSAGE_NO_DATA_TIMELINE).toString() }) })] }));
         }
         return (_jsxs(_Fragment, { children: [header, showMainContent(timelines, objectName), showBottomComponent()] }));
     };

package/es/components/organism/ActivityTimeline/components/ProductCard/styled.js

@@ -14,10 +14,13 @@ export const ImgPanel = styled.div `
   height: 6.25rem;
   position: relative;
   border: 1px solid rgb(230, 230, 230);
+  border-radius: 10px;
+
   @media screen and (max-width: 767px) {
     width: 80px;
     height: 80px;
   }
+
   &:before {
     content: '';
     position: absolute;
@@ -42,9 +45,11 @@ export const ImgPanel = styled.div `
       }
     }
   }
+
   a {
     width: 100%;
     height: 100%;
+
     & > span {
       display: block;
       width: 100%;
@@ -80,15 +85,5 @@ export const LinkExtendTitle = styled(Typography.Link) `
 `;
 export const PlainCard = styled.div `
   font-size: 0.875rem;
-
-  /* font-size: 0.75rem; */
-
   line-height: 1.25;
-  /* &:last-of-type {
-    /* margin-top: 2.375rem;
-    margin-top: 3rem;
-    @media screen and (max-width: 767px) {
-      margin-top: 12px;
-    }
-  } */
 `;

package/es/components/organism/ActivityTimeline/styled.js

@@ -1,11 +1,17 @@
 import { Flex } from 'antd';
 import styled from 'styled-components';
-export const StyledRoot = styled.div ``;
+export const StyledRoot = styled.div `
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+`;
 export const StyldTitle = styled.div `
   font-size: 16px;
   font-weight: bold;
 `;
-export const StyledNoData = styled(Flex) ``;
+export const StyledNoData = styled(Flex) `
+  height: 100%;
+`;
 export const WrapperContainerRedeem = styled.div `
   display: flex;
   justify-content: space-between;

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

@@ -1060,6 +1060,7 @@
     "_TITL_DISPLAY_TIME_AS": "Display time as",
     "_TITL_DISPLAY_FUNCTION_OUTPUT": "Display function output",
     "_TITL_DOMAIN": "Domain",
+    "_TITL_COOKIE_DOMAIN": "Cookie Domain",
     "_TITL_DOWNLOAD_DATA_EXAMPLE": "Download data example",
     "_TITL_DRAG_FILE_HERE": "Drag file here",
     "_TITL_DRAG_IMAGE_HERE": "Drag image here",
@@ -2121,7 +2122,7 @@
     "_PREDICT_MODEL_DESCRIBE_PLACEHOLDER": "Describe your RFM model",
     "_PREDICT_MODEL_BO_DISABLE": "Data-updated of this Business Object has been disabled",
     "_PREDICT_MODEL_CREATE_NEW_RFM": "Create new RFM",
-    "_DES_DELIVERY_INTERVAL": "Delivery Interval Setting",
+    "_DES_DELIVERY_INTERVAL": "Delivery Interval",
     "_DES_BY_NUMBER_RECORD": "By number of record",
     "_DES_BY_DAY": "By day(s)",
     "_DES_BY_HOUR": "By hour(s)",
@@ -2612,12 +2613,12 @@
     "_PROFILES_WIDGET_1": "Customer information",
     "_PROFILES_WIDGET_2": "Item recommendation",
     "_PROFILES_WIDGET_3": "User activity",
-    "_PROFILES_WIDGET_4": "Visitor Information",
+    "_PROFILES_WIDGET_4": "Visitor information",
     "_PROFILES_WIDGET_5": "Extended visualizations",
     "_PROFILES_SETTINGS_TAB": "Data",
     "_PROFILES_SETTINGS_1": "Avatar",
     "_PROFILES_SETTINGS_2": "Full name",
-    "_PROFILES_BTN_ADD_SOCIAL_GR": "Add Social Group",
+    "_PROFILES_BTN_ADD_SOCIAL_GR": "Add social group",
     "_PROFILES_AUDIENCE_INFO_1": "Customer since",
     "_PROFILES_AUDIENCE_INFO_2": "Last activity",
     "_PROFILES_BTN_ADD_ATT": "Add attribute",
@@ -2628,5 +2629,18 @@
     "_PROFILES_BTN_SET_DEFAULT": "Set as default",
     "_PROFILES_DEFAULT_TEMP_TOOLTIP": "Default template",
     "_PROFILES_MESSAGE_NO_TEMP": "You don't have any templates to visualize profiles",
-    "_PROFILES_USER_GUIDE_2": "Click the button to create a template"
+    "_PROFILES_USER_GUIDE_2": "Click the button to create a template",
+    "_PROFILES_MESSAGE_NO_DATA_TIMELINE": "Modify the visualization to configure displayed events",
+    "_PROFILES_MESSAGE_NO_DATA_INFOR": "Modify the visualization to configure displayed attributes",
+    "_PROFILES_MESSAGE_NO_DATA_GROUP": "Please add attributes you want to display",
+    "_PROFILES_ADD_EVENT": "Add event",
+    "_COOKIE_DM_DEFINITION": "What is it?",
+    "_COOKIE_DM_INSTRUCTION": "Instruction",
+    "_COOKIE_DM_DEFINITION_1": "The cookie domain allows you to specify a domain where tracking cookies will be set, ensuring seamless data collection across subdomains. This helps maintain a consistent User ID, enabling accurate cross-subdomain tracking and preventing fragmented customer profiles. ",
+    "_COOKIE_DM_DEFINITION_2": "By ensuring unified data collection, it enhances personalization, improves analytics, and provides a clearer view of customer behavior across your entire web ecosystem.",
+    "_COOKIE_DM_INSTRUCTION_1_SUM": "Identify the Primary Domain: ",
+    "_COOKIE_DM_INSTRUCTION_1_DES_1": "This is the base domain for all subdomains you want to track. ",
+    "_COOKIE_DM_INSTRUCTION_1_DES_2": "Example: {{x}}",
+    "_COOKIE_DM_INSTRUCTION_2_SUM": "Configure the Cookie Domain:",
+    "_COOKIE_DM_INSTRUCTION_2_DES_1": "Input {{x}} to track data across all subdomains (eg: shop.antsomi.com or blog.antsomi.com)"
 }