@antscorp/antsomi-ui 1.3.7-beta.2 → 1.3.7-beta.21

package/es/components/atoms/index.d.ts

@@ -49,8 +49,6 @@ export * from './RateV2';
 export * from './Popover';
 export * from './Iframe';
 export * from './Avatar';
-export * from './NotificationStatus';
-export * from './List';
 export * from './SelectAssociatedTag';
 export * from './List';
 export * from './Upload';

package/es/components/atoms/index.js

@@ -49,8 +49,6 @@ export * from './RateV2';
 export * from './Popover';
 export * from './Iframe';
 export * from './Avatar';
-export * from './NotificationStatus';
-export * from './List';
 export * from './SelectAssociatedTag';
 export * from './List';
 export * from './Upload';

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

@@ -17,15 +17,15 @@ 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, isShortLinkTagType, isCustomTagType, sanitizeTagAttributes, getTagAttributes, applyTagAttributes, getTagContentAttributes, isCaretAtEndOfTextNodeWithNextTag, getCurrentSelectionAndCloneRange, handleEnterWithNextTag, handleTextNodeBackspace, } from './utils';
+import { parseTagStringToTagify, convertInputStringToOriginal, emojiManufacturer, getEmojiTag, isPersonalizeTagType, generateTagContent, unescapeString, hasLineBreak, selectRange, isTagClickable, findURLInTextNodes, getAttributesString, isAnchorNodeChildOfElement, isShortLinkTagType, isCustomTagType, sanitizeTagAttributes, getTagAttributes, applyTagAttributes, getTagContentAttributes, isCaretAtEndOfTextNodeWithNextTag, getCurrentSelectionAndCloneRange, handleEnterWithNextTag, handleTextNodeBackspace, extractTagValues, } from './utils';
 import { acceptablePatternChecking, detectURLRegex, getCachedRegex, getCustomTagId, getPersonalizeTagInfo, getShortLinkTagInfo, patternHandlers, } from './patternHandlers';
 // Constants
 import { DETECT_LINK, EMOJI, PERSONALIZE_PTN, SHORT_LINK, SHORT_LINK_PTN, SHORT_LINK_V2, TAG_TYPE, UNSUBSCRIBE_WHATSAPP, defaultCssVariables, tagifyDefaultProps, TAG_CUSTOM_ATTRIBUTES, } from './constants';
 const { CUSTOM_TAG } = TAG_TYPE;
-const { PREPARING_ST, INVALID_TAG, MESSAGE_TAG, FORCE_SHOW_TOOLTIP, ERROR_TAG, WARNING_TAG } = TAG_CUSTOM_ATTRIBUTES;
+const { PREPARING_ST, INVALID_TAG, MESSAGE_TAG, FORCE_SHOW_TOOLTIP } = TAG_CUSTOM_ATTRIBUTES;
 const TagifyInput = forwardRef((props, ref) => {
     // Props
-    const { initialValue, escapeHTML, status, readonly, readonlyTag, readonlyText, realtime, disabled, maxLength, maxHeight, minWidth, placeholder, minWidthPlaceholder, isSingleLineText, acceptableTagPattern, tagProperties, mapAttributes = {}, mapErrorAttributes = {}, maxPersonalizeTags, name, children, cssTagifyVariables, onTagClick, onTagRemove, onChange, onRestoreTagProperty, } = props;
+    const { initialValue, escapeHTML, status, readonly, readonlyTag, readonlyText, realtime, disabled, maxLength, maxHeight, minWidth, placeholder, minWidthPlaceholder, isSingleLineText, acceptableTagPattern, tagProperties, mapAttributes = {}, mapErrorAttributes = {}, maxPersonalizeTags, name, children, cssTagifyVariables, disableEditableIfContainsTags, onTagClick, onAddTag, onTagRemove, onChange, onRestoreTagProperty, onBlur, } = props;
     // States
     const [isLineBreak, setIsLineBreak] = useState(hasLineBreak(initialValue));
     const [tooltipRefresher, setTooltipRefresher] = useState(1);
@@ -456,6 +456,7 @@ const TagifyInput = forwardRef((props, ref) => {
             }
             setLabelTagRefreshness(prev => prev + 1);
         },
+        getInputValues: () => extractTagValues(tagifyRef.current),
     }), [acceptableTagPattern, escapeHTML, onInjectTagAtCaret, placeCaretAfterNode]);
     const onTagItemClick = useCallback((event) => {
         event.stopPropagation();
@@ -471,7 +472,7 @@ const TagifyInput = forwardRef((props, ref) => {
     }, [onTagClick]);
     const onTagifyRemoveTag = useCallback((event) => {
         if (event.detail && onTagRemove) {
-            onTagRemove(event.detail);
+            onTagRemove(event.detail, extractTagValues(event.detail.tagify));
         }
     }, [onTagRemove]);
     // Used to trigger replace URL detection and line break
@@ -638,7 +639,7 @@ const TagifyInput = forwardRef((props, ref) => {
                         if (!isAccepted)
                             return;
                         const { url, shortener, label } = tagData;
-                        const { label: tagLabel, type: tagType, status, statusMsg, } = getShortLinkTagInfo({
+                        const { label: tagLabel, status, statusMsg, } = getShortLinkTagInfo({
                             type,
                             label,
                             shortener,
@@ -767,17 +768,6 @@ const TagifyInput = forwardRef((props, ref) => {
             });
         }
     }, [maxLength, customizeTag]);
-    useEffect(() => {
-        if (!tagifyRef.current)
-            return;
-        const inputEl = tagifyRef.current.DOM.input;
-        if (readonlyText) {
-            inputEl.setAttribute('contenteditable', 'false');
-        }
-        else {
-            inputEl.setAttribute('contenteditable', 'true');
-        }
-    }, [readonlyText]);
     const onTagifyWrapperClick = useCallback(event => {
         event.preventDefault();
         event.stopPropagation();
@@ -789,6 +779,22 @@ const TagifyInput = forwardRef((props, ref) => {
                 return;
             const { classList } = DOM?.scope;
             const { classNames } = settings;
+            if (disableEditableIfContainsTags) {
+                // Empty input is always editable
+                const isEmpty = classList.contains(classNames.empty);
+                let shouldBeEditable = isEmpty;
+                // If not empty, check if input contains restricted tags
+                if (!isEmpty) {
+                    const { listTags } = extractTagValues(tagifyRef.current);
+                    const hasRestrictedTag = listTags.some(tag => disableEditableIfContainsTags.includes(tag.type));
+                    shouldBeEditable = !hasRestrictedTag;
+                }
+                // Apply contenteditable attribute
+                DOM.input.setAttribute('contenteditable', shouldBeEditable ? 'true' : 'false');
+                // Exit early if input should not be editable
+                if (!shouldBeEditable)
+                    return;
+            }
             if (!classList.contains(classNames.focus) && DOM?.input) {
                 try {
                     const { lastChild } = DOM?.input;
@@ -824,6 +830,12 @@ const TagifyInput = forwardRef((props, ref) => {
                 }
             }
         }
+    }, [disableEditableIfContainsTags]);
+    const onContentEditable = useCallback((editable) => {
+        if (!tagifyRef.current)
+            return;
+        const inputEl = tagifyRef.current.DOM.input;
+        inputEl.setAttribute('contenteditable', editable ? 'true' : 'false');
     }, []);
     // Initialization tagify
     useLayoutEffect(() => {
@@ -834,6 +846,11 @@ const TagifyInput = forwardRef((props, ref) => {
             }
         };
     }, [initializeTagify]);
+    useEffect(() => {
+        if (typeof readonlyText !== 'boolean')
+            return;
+        onContentEditable(!readonlyText);
+    }, [readonlyText, onContentEditable]);
     useEffect(() => {
         if (tagifyRef.current && tagLength && _.isFunction(onTagRemove)) {
             // Because the remove tag event is not triggered when the tag is removed with Backspace or drag selection tags
@@ -864,8 +881,11 @@ const TagifyInput = forwardRef((props, ref) => {
                     try {
                         node.dataset.__removed_by_mutation = 'true';
                         const tagData = tagifyRef.current?.getSetTagData(node);
-                        if (tagData && tagData.type === CUSTOM_TAG && !tagData?.__removed) {
-                            onTagRemove({ data: tagData });
+                        if (tagifyRef.current &&
+                            tagData &&
+                            tagData.type === CUSTOM_TAG &&
+                            !tagData?.__removed) {
+                            onTagRemove({ data: tagData }, extractTagValues(tagifyRef.current));
                         }
                     }
                     catch (error) {
@@ -977,6 +997,10 @@ const TagifyInput = forwardRef((props, ref) => {
             tagifyInstance.on('change', onTagifyChangedDebounce);
             tagifyInstance.on('remove', onTagifyRemoveTag);
             tagifyInstance.on('keydown', onKeyDown);
+            if (onAddTag)
+                tagifyInstance.on('add', onAddTag);
+            if (onBlur)
+                tagifyInstance.on('blur', onBlur);
         }
         // Off listen to Tagify events
         return () => {
@@ -986,9 +1010,15 @@ const TagifyInput = forwardRef((props, ref) => {
                 tagifyInstance.off('change', onTagifyChangedDebounce);
                 tagifyInstance.off('remove', onTagifyRemoveTag);
                 tagifyInstance.off('keydown', onKeyDown);
+                if (onAddTag)
+                    tagifyInstance.off('add', onAddTag);
+                if (onBlur)
+                    tagifyInstance.off('blur', onBlur);
             }
         };
     }, [
+        onAddTag,
+        onBlur,
         onTagItemClick,
         onInputTagifyDebounce,
         onTagifyChangedDebounce,

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

@@ -15,6 +15,10 @@ export type TagStatus = (typeof TAG_STATUS)[keyof typeof TAG_STATUS];
 export type MapAttributesProps = Record<string, Record<string, any>>;
 export type StatusType = 'error' | 'success' | 'warning';
 export type BackgroundColorPersonalizeType = Exclude<keyof typeof TAG_COLOR, 'detect_link' | 'emoji' | 'shortlink'>;
+export interface TagValues {
+    listTags: TagDataCustomize[];
+    value: string;
+}
 /**
  * Interface defining the properties for the Tagify input component.
  * Provides configuration options and event handlers to manage Tagify's behavior and appearance.
@@ -134,11 +138,16 @@ export interface TagifyInputProps {
      * Receives the tag detail as parameter, allowing custom actions on tag click.
      */
     onTagClick?: (tagDetail: Tagify.ClickEventData<TagDataCustomize>) => void;
+    /**
+     * Event handler triggered when a tag is added.
+     * Receives the tag detail as parameter, allowing custom actions on tag addition.
+     */
+    onAddTag?: (event: CustomEvent<Tagify.AddEventData<TagDataCustomize>>) => void;
     /**
      * Event handler triggered when a tag is removed.
      * Receives the tag detail as parameter, allowing custom actions on tag removal.
      */
-    onTagRemove?: (tagDetail: Tagify.RemoveEventData<TagDataCustomize>) => void;
+    onTagRemove?: (tagDetail: Tagify.RemoveEventData<TagDataCustomize>, values: TagValues) => void;
     /**
      * Event handler triggered when the input value changes.
      * Receives the updated input value as a string, allowing for controlled component updates.
@@ -146,6 +155,11 @@ export interface TagifyInputProps {
      * @default () => {}
      */
     onChange: (inputValue: string) => void;
+    /**
+     * Event handler triggered when the input value is blurred.
+     * Receives the updated input value as a string, allowing for controlled component updates.
+     */
+    onBlur?: (event: CustomEvent<Tagify.BlurEventData<TagDataCustomize>>) => void;
     /**
      * Event handler triggered when found mismatch tag properties.
      * Receives an array of tag properties that were restored (e.g., via undo operation).
@@ -155,12 +169,17 @@ export interface TagifyInputProps {
      * Defines whether the input text is read but not the whole tags.
      */
     readonlyText?: boolean;
+    /**
+     * Tags that, when present in input, make the entire input non-editable
+     */
+    disableEditableIfContainsTags?: TagType[];
 }
 export interface TagifyInputRef {
     onAddNewTag: (newTag: TagDataCustomize | string) => void;
     onReplaceTag: (currentTagEle: HTMLElement, newTag: TagDataCustomize) => void;
     onReload: (newValue: string) => void;
     onLabelTagRefreshness: () => void;
+    getInputValues: () => TagValues;
 }
 export type EmojiCollection = (typeof EMOJI_COLLECTIONS)[keyof typeof EMOJI_COLLECTIONS];
 export type ShortLinkType = (typeof SHORT_LINK_TYPE)[keyof typeof SHORT_LINK_TYPE];

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

@@ -1,6 +1,6 @@
 /// <reference types="yaireo__tagify" />
 import Tagify from '@yaireo/tagify';
-import { AcceptablePattern, TagAttribute, EmojiCollection, EmojiTag, TagDataCustomize, TagProperty, TagType } from './types';
+import { AcceptablePattern, TagAttribute, EmojiCollection, EmojiTag, TagDataCustomize, TagProperty, TagType, TagValues } from './types';
 /**
  * Parses the input string and replaces matching patterns with processed tags.
  * This function iterates over predefined regex patterns and replaces each match
@@ -202,3 +202,5 @@ export declare const getCurrentSelectionAndCloneRange: () => {
 };
 export declare const handleTextNodeBackspace: (range: Range) => void;
 export declare const handleEnterWithNextTag: (range: Range) => void;
+export declare const removeInvisibleChars: (str: string) => string;
+export declare const extractTagValues: (tagify: Tagify<TagDataCustomize>) => TagValues;

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

@@ -796,3 +796,12 @@ export const handleEnterWithNextTag = (range) => {
         return;
     insertZeroWidthSpaceBeforeTag(currentNode);
 };
+export const removeInvisibleChars = (str) => str.replace(/[\r\n\u200B-\u200D\uFEFF]/g, '');
+export const extractTagValues = (tagify) => {
+    if (!tagify)
+        return { listTags: [], value: '' };
+    return {
+        listTags: tagify.getCleanValue(),
+        value: tagify.getInputValue(),
+    };
+};

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

@@ -9,7 +9,7 @@ import { translate, translations } from '@antscorp/antsomi-locales';
 import { isEmpty } from 'lodash';
 import { differenceInMonths, formatUTCDateTZ, startOfMonth, subMonths, } from '@antscorp/antsomi-ui/es/utils/date';
 import { getPortalTimeZone } from '@antscorp/antsomi-ui/es/utils/portal';
-import { EmptyData } from '../../molecules';
+import { EmptyData } from '../../molecules/EmptyData';
 import clsx from 'clsx';
 export const ActivityTimeline = (props) => {
     const { timelines = [], isLoading = false, title = translate(translations._BLOCK_TIMELINE_CUS), timezone = getPortalTimeZone(), objectName = '_THIS_PERSON_UPPERCASE', onFetchMore, eventTracking: eventTrackingProp = [], header, className, } = props;
@@ -84,10 +84,10 @@ export const ActivityTimeline = (props) => {
                         lastRef(el);
                     }
                 };
-                if (item.data.totalActivityCount === 1) {
+                if (item.data?.totalActivityCount === 1) {
                     result.push(_jsx(ItemEvent, { ref: setRef, keyItem: key, item: item, objectName: customerName, eventTracking: eventTracking }, key));
                 }
-                else if (item.data.totalActivityCount > 1) {
+                else if (item.data?.totalActivityCount > 1) {
                     result.push(_jsx(ItemGroupEvent, { ref: setRef, keyItem: key, item: item, objectName: customerName, eventTracking: eventTracking }, key));
                 }
             });

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

@@ -21,7 +21,13 @@ export const ItemEvent = forwardRef((props, ref) => {
     const { etype: eType } = item;
     const renderSingleEvent = (dataEvent) => {
         const dataActivity = dataEvent.data.firstActivities;
-        const { titleEvent: title, fullContentEvent = '', infoEvent, validateExtra, perShow, limitShowSlide, } = getInfoEvent(eType, dataActivity[0], eventTracking, objectName, appConfig);
+        const { titleEvent: title, fullContentEvent = '', infoEvent, validateExtra, perShow, limitShowSlide, } = getInfoEvent({
+            eType,
+            itemEvent: dataActivity[0],
+            eventTracking,
+            customerName: objectName,
+            config: appConfig,
+        });
         return (_jsxs(TimelineSection, { title: title, bgIcon: infoEvent.backgroundIcon, iconName: infoEvent.iconName, children: [_jsx(List, { type: "timeline", children: _jsxs(ListItem, { children: [_jsx(ListItemTimeLine, { children: _jsx(ListItemTitle, { ellipsis: { tooltip: true }, children: htmlParse(fullContentEvent) }) }), _jsx(ListItemTime, { ellipsis: { tooltip: true }, children: formatDateHeader(dataActivity[0].trackedDateTimeUTC) })] }) }), infoEvent.showRedeem && validateExtra.loyalty_card ? (_jsxs(WrapperContainerRedeem, { children: [_jsx(CardMember, { info: validateExtra.loyalty_card }), checkShowRedeem(validateExtra) && (_jsx(Redeem, { point: safeParse(validateExtra.point, 'N/A'), redeemType: safeParse(validateExtra.point_type, 'N/A') }))] })) : (infoEvent.showRedeem &&
                     checkShowRedeem(validateExtra) && (_jsx(Redeem, { point: safeParse(validateExtra.point, 'N/A'), redeemType: safeParse(validateExtra.point_type, 'N/A') }))), dataActivity[0].items.length > 0 && dataActivity[0].items[0].item_type === 'product' && (_jsx(ListItemContent, { children: _jsx(ActionHistory, { revenue: infoEvent.showRevenue
                             ? `${safeParse(validateExtra.revenue, '--') === '--'

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

@@ -45,12 +45,24 @@ export const ItemGroupEvent = forwardRef((props, ref) => {
     const { etype: eType } = item;
     const renderGroupEvent = (dataEvent) => {
         const dataActivity = dataEvent.data.firstActivities;
-        const { titleEvent: title, infoEvent: infoEventLast } = getInfoEvent(eType, dataActivity[0], eventTracking, objectName, appConfig);
+        const { titleEvent: title, infoEvent: infoEventLast } = getInfoEvent({
+            eType,
+            itemEvent: dataActivity[0],
+            eventTracking,
+            customerName: objectName,
+            config: appConfig,
+        });
         const rearTitle = translate(translations._EVENT_DES_PERFORM_OTHER_EVENT, 'and performed other {{x}} actions', { x: dataActivity.length - 1 });
         if (isEmpty(dataActivity))
             return null;
         return (_jsx(TimelineSection, { title: `${title}, ${rearTitle}`, bgIcon: infoEventLast.backgroundIcon, iconName: infoEventLast.iconName ? infoEventLast.iconName : 'cus web', children: _jsx(List, { type: "timeline", loadMore: true, limit: 5, noPaddingBottom: true, children: dataActivity.map((itemEvent, index) => {
-                    const { titleEvent, fullContentEvent = '', infoEvent, validateExtra, perShow, limitShowSlide, } = getInfoEvent(eType, itemEvent, eventTracking, objectName, appConfig);
+                    const { titleEvent, fullContentEvent = '', infoEvent, validateExtra, perShow, limitShowSlide, } = getInfoEvent({
+                        eType,
+                        itemEvent,
+                        eventTracking,
+                        customerName: objectName,
+                        config: appConfig,
+                    });
                     return (_jsxs(React.Fragment, { children: [_jsxs(ListItem, { children: [_jsx(ListItemTimeLine, { children: _jsx(ListItemTitle, { ellipsis: { tooltip: true }, children: htmlParse(fullContentEvent) }) }), _jsx(ListItemTime, { ellipsis: { tooltip: true }, children: formatDateHeader(itemEvent.trackedDateTimeUTC, timezone) })] }), infoEvent.showRedeem && validateExtra.loyalty_card ? (_jsxs(WrapperContainerRedeem, { children: [_jsx(CardMember, { info: validateExtra.loyalty_card }), checkShowRedeem(validateExtra) && (_jsx(Redeem, { point: safeParse(validateExtra.point, 'N/A'), redeemType: safeParse(validateExtra.point_type, 'N/A') }))] })) : (infoEvent.showRedeem &&
                                 checkShowRedeem(validateExtra) && (_jsx(Redeem, { point: safeParse(validateExtra.point, 'N/A'), redeemType: safeParse(validateExtra.point_type, 'N/A') }))), itemEvent.items.length > 0 && itemEvent.items[0].item_type === 'product' && (_jsx(ListItemContent, { children: _jsx(ActionHistory, { revenue: infoEvent.showRevenue
                                         ? `${safeParse(validateExtra.revenue, '--') === '--'

package/es/components/organism/ActivityTimeline/constants.d.ts

@@ -210,7 +210,7 @@ export declare const MAP_LIST_INFO_EVENT: {
     readonly 'view page': {
         readonly eventType: "view page";
         readonly iconCode: "_EVENT_VIEW_PAGE";
-        readonly translateCode: "_EVENT_DES_VIEW_PAGE";
+        readonly translateCode: "_EVENT_DES_VIEW_PAGE_NEW";
         readonly showSlideImageAndPrice: false;
         readonly showQuantity: false;
         readonly showRevenue: false;
@@ -353,7 +353,7 @@ export declare const MAP_LIST_INFO_EVENT: {
     readonly 'view pageview': {
         readonly eventType: "view pageview";
         readonly iconCode: "_EVENT_VIEW_PAGE";
-        readonly translateCode: "_EVENT_DES_VIEW_PAGE";
+        readonly translateCode: "_EVENT_DES_VIEW_PAGE_NEW";
         readonly showSlideImageAndPrice: false;
         readonly showQuantity: false;
         readonly showRevenue: false;
@@ -366,7 +366,7 @@ export declare const MAP_LIST_INFO_EVENT: {
     readonly 'view screenview': {
         readonly eventType: "view screenview";
         readonly iconCode: "";
-        readonly translateCode: "_EVENT_VIEW_SCREEN";
+        readonly translateCode: "_EVENT_VIEW_SCREEN_NEW";
         readonly showSlideImageAndPrice: false;
         readonly showQuantity: false;
         readonly showRevenue: false;
@@ -690,7 +690,7 @@ export declare const DATA_EVENT: {
     } | {
         readonly eventType: "view page";
         readonly iconCode: "_EVENT_VIEW_PAGE";
-        readonly translateCode: "_EVENT_DES_VIEW_PAGE";
+        readonly translateCode: "_EVENT_DES_VIEW_PAGE_NEW";
         readonly showSlideImageAndPrice: false;
         readonly showQuantity: false;
         readonly showRevenue: false;
@@ -822,7 +822,7 @@ export declare const DATA_EVENT: {
     } | {
         readonly eventType: "view pageview";
         readonly iconCode: "_EVENT_VIEW_PAGE";
-        readonly translateCode: "_EVENT_DES_VIEW_PAGE";
+        readonly translateCode: "_EVENT_DES_VIEW_PAGE_NEW";
         readonly showSlideImageAndPrice: false;
         readonly showQuantity: false;
         readonly showRevenue: false;
@@ -834,7 +834,7 @@ export declare const DATA_EVENT: {
     } | {
         readonly eventType: "view screenview";
         readonly iconCode: "";
-        readonly translateCode: "_EVENT_VIEW_SCREEN";
+        readonly translateCode: "_EVENT_VIEW_SCREEN_NEW";
         readonly showSlideImageAndPrice: false;
         readonly showQuantity: false;
         readonly showRevenue: false;
@@ -1164,7 +1164,7 @@ export declare const DATA_EVENT: {
         readonly 'view page': {
             readonly eventType: "view page";
             readonly iconCode: "_EVENT_VIEW_PAGE";
-            readonly translateCode: "_EVENT_DES_VIEW_PAGE";
+            readonly translateCode: "_EVENT_DES_VIEW_PAGE_NEW";
             readonly showSlideImageAndPrice: false;
             readonly showQuantity: false;
             readonly showRevenue: false;
@@ -1307,7 +1307,7 @@ export declare const DATA_EVENT: {
         readonly 'view pageview': {
             readonly eventType: "view pageview";
             readonly iconCode: "_EVENT_VIEW_PAGE";
-            readonly translateCode: "_EVENT_DES_VIEW_PAGE";
+            readonly translateCode: "_EVENT_DES_VIEW_PAGE_NEW";
             readonly showSlideImageAndPrice: false;
             readonly showQuantity: false;
             readonly showRevenue: false;
@@ -1320,7 +1320,7 @@ export declare const DATA_EVENT: {
         readonly 'view screenview': {
             readonly eventType: "view screenview";
             readonly iconCode: "";
-            readonly translateCode: "_EVENT_VIEW_SCREEN";
+            readonly translateCode: "_EVENT_VIEW_SCREEN_NEW";
             readonly showSlideImageAndPrice: false;
             readonly showQuantity: false;
             readonly showRevenue: false;

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

@@ -224,7 +224,7 @@ export const MAP_LIST_INFO_EVENT = {
     'view page': {
         eventType: 'view page',
         iconCode: '_EVENT_VIEW_PAGE',
-        translateCode: '_EVENT_DES_VIEW_PAGE',
+        translateCode: '_EVENT_DES_VIEW_PAGE_NEW',
         showSlideImageAndPrice: false,
         showQuantity: false,
         showRevenue: false,
@@ -367,7 +367,7 @@ export const MAP_LIST_INFO_EVENT = {
     'view pageview': {
         eventType: 'view pageview',
         iconCode: '_EVENT_VIEW_PAGE',
-        translateCode: '_EVENT_DES_VIEW_PAGE',
+        translateCode: '_EVENT_DES_VIEW_PAGE_NEW',
         showSlideImageAndPrice: false,
         showQuantity: false,
         showRevenue: false,
@@ -380,7 +380,7 @@ export const MAP_LIST_INFO_EVENT = {
     'view screenview': {
         eventType: 'view screenview',
         iconCode: '',
-        translateCode: '_EVENT_VIEW_SCREEN',
+        translateCode: '_EVENT_VIEW_SCREEN_NEW',
         showSlideImageAndPrice: false,
         showQuantity: false,
         showRevenue: false,