@antscorp/antsomi-ui 1.3.5-beta.840 → 1.3.5-beta.841

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

@@ -1,14 +1,12 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // Libraries
-import { useRef, useEffect, useCallback, useMemo, memo, forwardRef, useImperativeHandle, useLayoutEffect, } from 'react';
+import { useRef, useEffect, useCallback, useMemo, memo, forwardRef, useImperativeHandle, useLayoutEffect, useState, } from 'react';
 import _ from 'lodash';
 import htmlEntities from 'he';
 // Assets
 import iconWarning from '@antscorp/antsomi-ui/es/assets/images/warning-icon.png';
 // Hooks
 import { useDeepCompareMemo } from '@antscorp/antsomi-ui/es/hooks/useDeepCompareMemo';
-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';
 // Components
 import Tagify from '@yaireo/tagify';
@@ -25,8 +23,7 @@ const TagifyInput = forwardRef((props, ref) => {
     // Props
     const { initialValue, escapeHTML, status, readonly, readonlyTag, disabled, maxLength, maxHeight, minWidth, placeholder, isSingleLineText, acceptableTagPattern, mapAttributes, maxPersonalizeTags, name, children, cssTagifyVariables, onTagClick, onChange, } = props;
     // States
-    const [inputTypeDebounce, , setInputTyping] = useDebounce(initialValue, 550);
-    const [isLineBreakDebounce, , setIsLineBreak] = useDebounce(hasLineBreak(initialValue), 250);
+    const [isLineBreak, setIsLineBreak] = useState(hasLineBreak(initialValue));
     // Refs
     const inputRef = useRef(null);
     const tagifyRef = useRef(null);
@@ -179,6 +176,135 @@ const TagifyInput = forwardRef((props, ref) => {
             console.warn('Error while injecting tag at caret', error);
         }
     }, [onAdjustSelectionIfNeeded, onSelectionAfterInjection]);
+    /**
+     * Updates the window selection to highlight a specified range of text within a given node.
+     * */
+    const updateWindowSelection = useCallback((node, start, end) => {
+        if (!node || !_.isNumber(start) || !_.isNumber(end))
+            return false;
+        if (node) {
+            try {
+                const range = document.createRange();
+                const textNodeLength = node.textContent?.length;
+                if (textNodeLength && start <= textNodeLength && end <= textNodeLength) {
+                    range?.setStart(node, start);
+                    range?.setEnd(node, end);
+                    const selection = window.getSelection();
+                    selection?.removeAllRanges();
+                    selection?.addRange(range);
+                    return onSyncSelectionStateTagify();
+                }
+                throw new Error('Invalid start/end position');
+            }
+            catch (error) {
+                // eslint-disable-next-line no-console
+                console.error(error);
+                return false;
+            }
+        }
+        return false;
+    }, [onSyncSelectionStateTagify]);
+    const replaceURLsWithTags = useCallback((nodesURl, lastRange) => {
+        try {
+            if (!tagifyRef.current) {
+                throw new Error('Tagify instance is not initialized');
+            }
+            // Replace all URLs in the given nodes
+            nodesURl.forEach((textNode) => {
+                const newTags = [];
+                const textContent = textNode.textContent || '';
+                if (textContent) {
+                    let match;
+                    // Reset the regex's lastIndex before each execution
+                    detectURLRegex.lastIndex = 0;
+                    // eslint-disable-next-line no-cond-assign
+                    while ((match = detectURLRegex.exec(textContent)) !== null) {
+                        const url = match[0];
+                        const start = match.index;
+                        const end = start + url.length;
+                        const newTag = {
+                            url,
+                            range: [start, end],
+                        };
+                        // add new valid URL to tags
+                        newTags.push(newTag);
+                    }
+                    if (newTags.length > 0) {
+                        // Sort tags by their position in reverse order
+                        // starting from the back avoids messing up earlier parts of the document
+                        newTags.sort((a, b) => b.range[0] - a.range[0]);
+                        // Add tags one by one, adjusting the selection for each
+                        newTags.forEach(tag => {
+                            const [start, end] = tag.range;
+                            if (tagifyRef.current) {
+                                const isUpdated = updateWindowSelection(textNode, start, end);
+                                if (isUpdated) {
+                                    const newTag = tagifyRef.current.createTagElem({
+                                        value: tag.url,
+                                        label: tag.url,
+                                        type: DETECT_LINK,
+                                    });
+                                    // Inject the new detect link tag
+                                    tagifyRef.current.injectAtCaret(newTag);
+                                }
+                            }
+                        });
+                    }
+                }
+            });
+            const selection = window.getSelection();
+            if (selection) {
+                if (lastRange instanceof Range) {
+                    // Need to restore the selection after execution all process to replace URL to Tag
+                    // to maintain valid caret
+                    selection.removeAllRanges();
+                    selection.addRange(lastRange);
+                }
+                else {
+                    // In case lost the selection not need to restore
+                    // Reset the selection to clear and prepare the valid caret to add the next tag at fn: "onAddNewTag"
+                    selection?.removeAllRanges();
+                    onSyncSelectionStateTagify();
+                }
+            }
+        }
+        catch (error) {
+            // eslint-disable-next-line no-console
+            console.error('Error while replacing URL with tag', error);
+        }
+    }, [onSyncSelectionStateTagify, updateWindowSelection]);
+    /**
+     * Detects URLs within the text nodes of a specified input element and replaces them with tags.
+     *
+     * This function scans through all child nodes of the input element, looking for text nodes that contain URLs.
+     * When URLs are found, it creates tags for each URL and injects them into the input element, updating the selection
+     * as necessary to ensure the DOM structure remains intact.
+     * */
+    const detectReplaceURLToTag = useCallback(() => {
+        const isSupportShortlink = acceptablePatternChecking(SHORT_LINK_PTN, acceptableTagPattern);
+        if (!tagifyRef.current || !isSupportShortlink)
+            return;
+        try {
+            const { input: inputElement } = tagifyRef.current.DOM;
+            if (inputElement) {
+                const selection = window.getSelection();
+                const cacheLastRange = selection?.getRangeAt && selection?.rangeCount && selection?.getRangeAt(0);
+                const minLengthValidURL = 8; // -> Because of valid URL should be "https://"
+                // Get all child nodes that are of type TEXT_NODE and contain an URL
+                const nodesURL = findURLInTextNodes(inputElement, minLengthValidURL);
+                // Starting from the back to avoid messing up earlier parts of the DOM
+                const reversedNodes = nodesURL?.toReversed() || [];
+                // Process URL to Tag
+                if (reversedNodes && reversedNodes.length > 0) {
+                    replaceURLsWithTags(reversedNodes, cacheLastRange);
+                }
+            }
+        }
+        catch (error) {
+            // eslint-disable-next-line no-console
+            console.log(error);
+        }
+    }, [acceptableTagPattern, replaceURLsWithTags]);
     const placeCaretAfterNode = useCallback((node) => {
         if (!tagifyRef.current) {
             throw new Error('Tagify instance is not initialized');
@@ -286,35 +412,43 @@ const TagifyInput = forwardRef((props, ref) => {
             onTagClick(event.detail);
         }
     }, [onTagClick]);
+    // Used to trigger change data real time
     const onTagifyTyping = useCallback((event) => {
-        if (event.detail) {
-            const { tagify } = event.detail;
-            const inputValue = tagify.getInputValue();
-            setInputTyping(inputValue);
-        }
-    }, [setInputTyping]);
-    const onTagifyRemoved = useCallback((event) => {
         if (event.detail) {
             const { tagify } = event.detail;
             const inputValue = tagify.getInputValue();
             const convertedValue = convertInputStringToOriginal(inputValue);
+            // Tracking if the tagify input is line break
+            setIsLineBreak(hasLineBreak(convertedValue));
+            // Update URL to tag to show hint in the tooltip with tag
+            if (convertedValue) {
+                detectReplaceURLToTag();
+            }
             onOutputData(convertedValue);
         }
-    }, [onOutputData]);
+    }, [onOutputData, detectReplaceURLToTag]);
     /**
      * Used to cover more case
-     * e.g: User select all data -> backspace -> remove all data in UI but [The Tagify lib do not trigger out anything]
+     * e.g: User select all data -> backspace -> remove all data in UI but the on input event [onTagifyTyping] not trigger
      */
-    const onTagifyBlur = useCallback((event) => {
+    const onTagifyChanged = useCallback((event) => {
+        if (event.detail) {
+            const { DOM, settings } = event.detail.tagify;
+            const { hasNoTags, empty } = settings.classNames;
+            const { classList } = DOM.scope;
+            if (classList.contains(empty) && classList.contains(hasNoTags)) {
+                onOutputData('');
+            }
+        }
+    }, [onOutputData]);
+    const onTagifyRemoved = useCallback((event) => {
         if (event.detail) {
             const { tagify } = event.detail;
             const inputValue = tagify.getInputValue();
             const convertedValue = convertInputStringToOriginal(inputValue);
-            if (!_.isEqual(initialValue, convertedValue)) {
-                onOutputData(convertedValue);
-            }
+            onOutputData(convertedValue);
         }
-    }, [initialValue, onOutputData]);
+    }, [onOutputData]);
     const customizeTag = useCallback((tagData, tagify) => {
         const { value, collection, label, type } = tagData;
         const { settings } = tagify;
@@ -477,134 +611,6 @@ const TagifyInput = forwardRef((props, ref) => {
             }
         }
     }, []);
-    /**
-     * Updates the window selection to highlight a specified range of text within a given node.
-     * */
-    const updateWindowSelection = useCallback((node, start, end) => {
-        if (!node || !_.isNumber(start) || !_.isNumber(end))
-            return false;
-        if (node) {
-            try {
-                const range = document.createRange();
-                const textNodeLength = node.textContent?.length;
-                if (textNodeLength && start <= textNodeLength && end <= textNodeLength) {
-                    range?.setStart(node, start);
-                    range?.setEnd(node, end);
-                    const selection = window.getSelection();
-                    selection?.removeAllRanges();
-                    selection?.addRange(range);
-                    return onSyncSelectionStateTagify();
-                }
-                throw new Error('Invalid start/end position');
-            }
-            catch (error) {
-                // eslint-disable-next-line no-console
-                console.error(error);
-                return false;
-            }
-        }
-        return false;
-    }, [onSyncSelectionStateTagify]);
-    const replaceURLsWithTags = useCallback((nodesURl, lastRange) => {
-        try {
-            if (!tagifyRef.current) {
-                throw new Error('Tagify instance is not initialized');
-            }
-            // Replace all URLs in the given nodes
-            nodesURl.forEach((textNode) => {
-                const newTags = [];
-                const textContent = textNode.textContent || '';
-                if (textContent) {
-                    let match;
-                    // Reset the regex's lastIndex before each execution
-                    detectURLRegex.lastIndex = 0;
-                    // eslint-disable-next-line no-cond-assign
-                    while ((match = detectURLRegex.exec(textContent)) !== null) {
-                        const url = match[0];
-                        const start = match.index;
-                        const end = start + url.length;
-                        const newTag = {
-                            url,
-                            range: [start, end],
-                        };
-                        // add new valid URL to tags
-                        newTags.push(newTag);
-                    }
-                    if (newTags.length > 0) {
-                        // Sort tags by their position in reverse order
-                        // starting from the back avoids messing up earlier parts of the document
-                        newTags.sort((a, b) => b.range[0] - a.range[0]);
-                        // Add tags one by one, adjusting the selection for each
-                        newTags.forEach(tag => {
-                            const [start, end] = tag.range;
-                            if (tagifyRef.current) {
-                                const isUpdated = updateWindowSelection(textNode, start, end);
-                                if (isUpdated) {
-                                    const newTag = tagifyRef.current.createTagElem({
-                                        value: tag.url,
-                                        label: tag.url,
-                                        type: DETECT_LINK,
-                                    });
-                                    // Inject the new detect link tag
-                                    tagifyRef.current.injectAtCaret(newTag);
-                                }
-                            }
-                        });
-                    }
-                }
-            });
-            const selection = window.getSelection();
-            if (selection) {
-                if (lastRange instanceof Range) {
-                    // Need to restore the selection after execution all process to replace URL to Tag
-                    // to maintain valid caret
-                    selection.removeAllRanges();
-                    selection.addRange(lastRange);
-                }
-                else {
-                    // In case lost the selection not need to restore
-                    // Reset the selection to clear and prepare the valid caret to add the next tag at fn: "onAddNewTag"
-                    selection?.removeAllRanges();
-                    onSyncSelectionStateTagify();
-                }
-            }
-        }
-        catch (error) {
-            // eslint-disable-next-line no-console
-            console.error('Error while replacing URL with tag', error);
-        }
-    }, [onSyncSelectionStateTagify, updateWindowSelection]);
-    /**
-     * Detects URLs within the text nodes of a specified input element and replaces them with tags.
-     *
-     * This function scans through all child nodes of the input element, looking for text nodes that contain URLs.
-     * When URLs are found, it creates tags for each URL and injects them into the input element, updating the selection
-     * as necessary to ensure the DOM structure remains intact.
-     * */
-    const detectReplaceURLToTag = useCallback(() => {
-        if (!tagifyRef.current)
-            return;
-        try {
-            const { input: inputElement } = tagifyRef.current.DOM;
-            if (inputElement) {
-                const selection = window.getSelection();
-                const cacheLastRange = selection?.getRangeAt && selection?.rangeCount && selection?.getRangeAt(0);
-                const minLengthValidURL = 8; // -> Because of valid URL should be "https://"
-                // Get all child nodes that are of type TEXT_NODE and contain an URL
-                const nodesURL = findURLInTextNodes(inputElement, minLengthValidURL);
-                // Starting from the back to avoid messing up earlier parts of the DOM
-                const reversedNodes = nodesURL?.toReversed() || [];
-                // Process URL to Tag
-                if (reversedNodes && reversedNodes.length > 0) {
-                    replaceURLsWithTags(reversedNodes, cacheLastRange);
-                }
-            }
-        }
-        catch (error) {
-            // eslint-disable-next-line no-console
-            console.log(error);
-        }
-    }, [replaceURLsWithTags]);
     // Initialization tagify
     useLayoutEffect(() => {
         initializeTagify();
@@ -669,41 +675,31 @@ const TagifyInput = forwardRef((props, ref) => {
     // Listen to Tagify events
     useEffect(() => {
         const { current: tagifyInstance } = tagifyRef || {};
+        let onInputTagifyDebounce;
         if (tagifyInstance) {
+            onInputTagifyDebounce = _.debounce(onTagifyTyping, 350);
             tagifyInstance.on('click', onTagItemClick);
-            tagifyInstance.on('input', onTagifyTyping);
+            tagifyInstance.on('input', onInputTagifyDebounce);
             tagifyInstance.on('remove', onTagifyRemoved);
-            tagifyInstance.on('blur', onTagifyBlur);
+            tagifyInstance.on('change', onTagifyChanged);
         }
         // Off listen to Tagify events
         return () => {
             if (tagifyInstance) {
                 tagifyInstance.off('click', onTagItemClick);
-                tagifyInstance.off('input', onTagifyTyping);
                 tagifyInstance.off('remove', onTagifyRemoved);
-                tagifyInstance.off('blur', onTagifyBlur);
+                tagifyInstance.off('change', onTagifyChanged);
+                if (onInputTagifyDebounce) {
+                    tagifyInstance.off('input', onInputTagifyDebounce);
+                }
             }
         };
-    }, [onTagItemClick, onTagifyTyping, onTagifyRemoved, onTagifyBlur]);
-    useUpdateEffect(() => {
-        const convertedValue = convertInputStringToOriginal(inputTypeDebounce);
-        // Tracking if the tagify input is line break
-        setIsLineBreak(hasLineBreak(convertedValue));
-        onOutputData(convertedValue);
-    }, [inputTypeDebounce]);
-    // Update URL to tag to show hint in the tooltip with tag
-    useDeepCompareEffect(() => {
-        const isSupportShortlink = acceptablePatternChecking(SHORT_LINK_PTN, acceptableTagPattern);
-        if (inputTypeDebounce && isSupportShortlink) {
-            detectReplaceURLToTag();
-        }
-    }, [inputTypeDebounce, acceptableTagPattern, detectReplaceURLToTag]);
-    // 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]);
+    }, [onTagItemClick, onTagifyTyping, onTagifyRemoved, onTagifyChanged]);
+    // At the first render, need to update URL to tag to show hint in the tooltip with tag
+    useEffect(() => {
+        detectReplaceURLToTag();
+    }, [detectReplaceURLToTag]);
+    // CAVEAT: Some case need to "FORCE" sync the original values to Tagify instance
     useEffect(() => {
         if (tagifyRef.current) {
             const { DOM, settings } = tagifyRef.current;
@@ -725,9 +721,13 @@ const TagifyInput = forwardRef((props, ref) => {
                     makeValidLabelTags(mapAttributes);
                 }
             }
+            else if (!classList.contains(empty) && initialValue === '') {
+                // Removes all tags and resets the original input tag's value property if the initial value back to is empty string
+                tagifyRef.current.removeAllTags();
+            }
         }
     }, [initialValue, mapAttributes, escapeHTML, acceptableTagPattern, makeValidLabelTags]);
-    return (_jsxs(TagifyWrapper, { ref: tagifyWrapperRef, "$cssTagifyVariables": cssVariablesMemoized, className: "tagify-container", id: "tagify-container", "data-test": "tagify-wrapper", "$status": status, "$maxHeight": maxHeight, "$minWidth": minWidth, "$tagifyFullWidth": isLineBreakDebounce, "$placeholder": placeholder, "$isSingleLineText": isSingleLineText, "$tagInvalidIcon": iconWarning, 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, "$tagifyFullWidth": isLineBreak, "$placeholder": placeholder, "$isSingleLineText": isSingleLineText, "$tagInvalidIcon": iconWarning, 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

@@ -40,6 +40,9 @@ export declare const TAG_TYPE: {
     readonly CUSTOMER: "customer";
     readonly VISITOR: "visitor";
     readonly EVENT: "event";
+    readonly JOURNEY: "journey_attr";
+    readonly CAMPAIGN: "campaign_attr";
+    readonly VARIANT: "variant_attr";
     readonly OBJECT_WIDGET: "objectWidget";
     readonly PROMOTION_CODE: "promotion_code";
     readonly CUSTOM_FN: "custom";
@@ -48,7 +51,7 @@ export declare const TAG_TYPE: {
     readonly DETECT_LINK: "detect_link";
     readonly CONTENT_SOURCE_GROUP: "groups";
 };
-export declare const CUSTOMER: "customer", VISITOR: "visitor", EVENT: "event", 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: "journey_attr", CAMPAIGN: "campaign_attr", VARIANT: "variant_attr", 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 SHORT_LINK_TYPE: {
     readonly INDIVIDUAL: "shortlink";
     readonly GENERAL: "shortlink_static";
@@ -62,6 +65,9 @@ export declare const TAG_COLOR: {
     };
     readonly visitor: "#e8feca";
     readonly event: "#fecaca";
+    readonly journey_attr: "#FAFAAF";
+    readonly campaign_attr: "#FBCBE8";
+    readonly variant_attr: "#FFD8DB";
     readonly promotion_code: "#d8cafe";
     readonly objectWidget: "#cafedd";
     readonly custom: "#bbefbe";

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

@@ -53,6 +53,9 @@ export const TAG_TYPE = {
     CUSTOMER: 'customer',
     VISITOR: 'visitor',
     EVENT: 'event',
+    JOURNEY: 'journey_attr',
+    CAMPAIGN: 'campaign_attr',
+    VARIANT: 'variant_attr',
     OBJECT_WIDGET: 'objectWidget',
     PROMOTION_CODE: 'promotion_code',
     CUSTOM_FN: 'custom',
@@ -61,7 +64,7 @@ export const TAG_TYPE = {
     DETECT_LINK: 'detect_link',
     CONTENT_SOURCE_GROUP: 'groups',
 };
-export const { CUSTOMER, VISITOR, EVENT, 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, OBJECT_WIDGET, CONTENT_SOURCE_GROUP, } = TAG_TYPE;
 export const SHORT_LINK_TYPE = {
     INDIVIDUAL: 'shortlink', // Individual link
     GENERAL: 'shortlink_static', // General link
@@ -75,6 +78,9 @@ export const TAG_COLOR = {
     },
     [VISITOR]: '#e8feca',
     [EVENT]: '#fecaca',
+    [JOURNEY]: '#FAFAAF',
+    [CAMPAIGN]: '#FBCBE8',
+    [VARIANT]: '#FFD8DB',
     [PROMOTION_CODE]: '#d8cafe',
     [OBJECT_WIDGET]: '#cafedd',
     [CUSTOM_FN]: '#bbefbe',

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

@@ -1,10 +1,11 @@
 // Libraries
 import stringReplaceToArray from 'string-replace-to-array';
 // Constants
-import { CONTENT_SOURCE_GROUP, CUSTOMER, CUSTOM_FN, EMOJI_COLLECTIONS, EVENT, OBJECT_WIDGET, PREFIX_PATTERN_LINE_MESSAGE, PROMOTION_CODE, READONLY_TAG, TAG_TYPE, VISITOR, } from './constants';
+import { EMOJI_COLLECTIONS, PREFIX_PATTERN_LINE_MESSAGE, READONLY_TAG, TAG_TYPE, } from './constants';
 import { iconsViber } from './iconsViber';
 // Utils
 import { acceptablePatternChecking, detectURLRegex, getCachedRegex, patternHandlers, tagRegexStringPattern, } from './patternHandlers';
+const { CUSTOMER, VISITOR, EVENT, JOURNEY, CAMPAIGN, VARIANT, PROMOTION_CODE, CUSTOM_FN, OBJECT_WIDGET, CONTENT_SOURCE_GROUP, } = TAG_TYPE;
 /*
  * Custom error type for JSON parse errors
  */
@@ -392,6 +393,9 @@ export const isPersonalizeTagType = (type) => [
     CUSTOMER,
     VISITOR,
     EVENT,
+    JOURNEY,
+    CAMPAIGN,
+    VARIANT,
     PROMOTION_CODE,
     OBJECT_WIDGET,
     CUSTOM_FN,

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/es/locales/ja/google-sheet.json

@@ -925,7 +925,7 @@
     "_TAB_INFORMATION_FIELD": "情報フィールド",
     "_TAB_JOURNEY": "旅",
     "_TAB_METRIC": "メトリック",
-    "_TAB_MODEL_DIAGRAM": "図",
+    "_TAB_MODEL_DIAGRAM": "ダイアグラム",
     "_TAB_MODEL_FIELD": "フィールド",
     "_TAB_OBECT_REFERENCE": "オブジェクトリファレンス",
     "_TAB_OBJECT_ATTRIBUTE": "属性",
@@ -1717,7 +1717,7 @@
     "_TITL_VERSION": "バージョン",
     "_TAB_DELIVERY_LOG": "配信ログ",
     "_TAB_DETAIL": "詳細",
-    "_TAB_DIAGRAM": "図",
+    "_TAB_DIAGRAM": "ダイアグラム",
     "_CODE_BUILD_CONTENT_ERROR": "ビルドコンテンツエラー",
     "_CODE_MISSING_RECEIVER": "受信機がありません",
     "_CODE_DESTINATION_FREQUENCY_CAPPING": "宛先フリークエンシー キャップに違反する",
@@ -2288,7 +2288,7 @@
     "_CHANNEL_DES_WEB_NOTI": "リアルタイムのメッセージを送信して Web サイト訪問者を引きつけ、タイムリーなインタラクションとコンバージョンを促進します",
     "_CHANNEL_DES_APP_NOTI": "即時通知をモバイル アプリのみに送信し、即時のエンゲージメントとインタラクションを促進します",
     "_CHANNEL_DES_EMAIL": "パーソナライズされたメッセージをユーザーの受信箱に直接配信し、ターゲットを絞ったコンテンツでのエンゲージメントとコンバージョンを促進します。",
-    "_CHANNEL_DES_SMS": "直接的かつ即時のコミュニケーションを提供し、ユーザーのモバイル デバイスに到達して即時のエンゲージメントとインタラクションを実現します。",
+    "_CHANNEL_DES_SMS": "直接的かつ即時的なコミュニケーションを提供し、ユーザーのモバイルデバイスに到達して即時のエンゲージメントとインタラクションを実現します。",
     "_CHANNEL_DES_SMART_INB": "プッシュ通知のコンテンツを一元管理して管理とエンゲージメントを合理化",
     "_CHANNEL_DES_FB_MESS": "直接的な会話型のコミュニケーションを提供し、使い慣れたソーシャル メディア プラットフォームでユーザーを惹きつけます",
     "_CHANNEL_DES_VIBER": "ダイレクト メッセージング機能を提供し、安全で使い慣れたソーシャル メディア プラットフォームでユーザーを魅了します。",
@@ -2432,7 +2432,7 @@
     "_OBJ_DES_WEB_1": "没入型のブラウジング体験に合わせてコンテンツを調整することで、セッションが長くなり、エンゲージメント指標が向上します",
     "_OBJ_DES_WEB_2": "より多くのコンバージョンと売上を促進するために、ユーザーの興味やニーズに合った製品やコンテンツをユーザーに提示します。",
     "_OBJ_DES_WEB_3": "視聴者とのより深いつながりを育み、ロイヤルティと維持率を高めます",
-    "_OBJ_DES_WEB_4": "それぞれの訪問者のインタラクションの価値を最大化するために、ユニークでパーソナライズされたオファーを提供します",
+    "_OBJ_DES_WEB_4": "それぞれの訪問者のインタラクションの価値を最大化するために、独自のパーソナライズされたオファーを提供します",
     "_OBJ_DES_WEB_5": "ユーザーインタラクションを分析してコンテンツを洗練し、戦略をセグメント化し、Web サイトのレイアウトを最適化します。",
     "_OBJ_DES_WEB_NOTI_1": "タイムリーな更新、プロモーション、アラートでユーザーに即座に連絡します",
     "_OBJ_DES_WEB_NOTI_2": "新しいコンテンツ、製品リリース、または期間限定オファーをユーザーに通知することで、Web サイトへのトラフィックを促進します。",
@@ -2440,12 +2440,12 @@
     "_OBJ_DES_WEB_NOTI_4": "ユーザーの興味や好みに合わせた関連性の高い有益な通知を送信することで、ユーザーの関心とリピートを維持します。",
     "_OBJ_DES_WEB_NOTI_5": "アカウント、トランザクション更新などの関連情報をユーザーのブラウザに直接配信します。",
     "_OBJ_DES_APP_NOTI_1": "タイムリーな更新、プロモーション、アラートでユーザーに即座に連絡します",
-    "_OBJ_DES_APP_NOTI_2": "価値のある通知でユーザーを誘導することで、ユーザーがアプリを積極的に操作するよう促します。",
+    "_OBJ_DES_APP_NOTI_2": "貴重な通知でユーザーを誘導することで、ユーザーがアプリを積極的に操作するよう促します。",
     "_OBJ_DES_APP_NOTI_3": "パーソナライズされたオファーやリマインダーを配信してユーザーの行動を促す",
     "_OBJ_DES_APP_NOTI_4": "ユーザーの興味や好みに合わせた関連性の高い有益な通知を送信することで、ユーザーの関心を維持し、さらに戻ってくるようにします。",
     "_OBJ_DES_APP_NOTI_5": "アカウント、トランザクション更新などの関連情報をユーザーのブラウザに直接配信します。",
     "_OBJ_DES_EMAIL_1": "魅力的なコンテンツと電子メールの行動喚起 (CTA) でユーザーを Web サイトに誘導します",
-    "_OBJ_DES_EMAIL_2": "貴重なコンテンツとインセンティブを提供してサインアップや問い合わせを促進することで見込み顧客を獲得します。",
+    "_OBJ_DES_EMAIL_2": "貴重なコンテンツやインセンティブを提供してサインアップや問い合わせを促進することで見込み顧客を獲得します。",
     "_OBJ_DES_EMAIL_3": "ターゲットを絞ったコンテンツと自動化された電子メール シーケンスを使用して、セールス ファネルを通じてリードを誘導します。",
     "_OBJ_DES_EMAIL_4": "関連するアップデート、オファー、限定コンテンツで顧客の関心とロイヤルティを維持します",
     "_OBJ_DES_EMAIL_5": "製品やサービスを紹介して売上とコンバージョンを促進する",
@@ -2457,7 +2457,7 @@
     "_OBJ_DES_SMS_5": "注文確認、出荷通知、アカウント更新をリアルタイムで提供します",
     "_OBJ_DES_SMART_INB_1": "通知を集約し、ユーザーがメッセージを 1 か所で簡単に表示および管理できるようにします。",
     "_OBJ_DES_SMART_INB_2": "プラットフォーム間で通知にアクセスし、通知を操作するためのシームレスで直感的なインターフェイスを提供します。",
-    "_OBJ_DES_SMART_INB_3": "通知によるタイムリーな応答と対話を促進し、ユーザー エンゲージメントと満足度を最大化します",
+    "_OBJ_DES_SMART_INB_3": "通知によるタイムリーな応答と対話を促進し、ユーザー エンゲージメントと満足度を最大化します。",
     "_OBJ_DES_SMART_INB_4": "Web プッシュやアプリ プッシュなどのさまざまなチャネルからの通知を統合し、ユーザーとの一貫性のある一貫したコミュニケーションを確保します。",
     "_OBJ_DES_FB_MESS_1": "ターゲットを絞ったプロモーションやオファーをブロードキャストして、エンゲージメントと販売を促進します",
     "_OBJ_DES_FB_MESS_2": "鮮やかなメッセージ テンプレートを使用してタイムリーで関連性のある更新を提供します",
@@ -2472,23 +2472,23 @@
     "_OBJ_DES_ZALO_1": "ターゲットを絞ったプロモーションやオファーをブロードキャストして、エンゲージメントと販売を促進します",
     "_OBJ_DES_ZALO_2": "インタラクティブな要素を使用して販売目標到達プロセスをガイドし、リードと見込み顧客を育成します。",
     "_OBJ_DES_ZALO_3": "タイムリーなコミュニケーションを確保するために、注文確認、配送の最新情報、または予約のリマインダーを送信します。",
-    "_OBJ_DES_ZALO_4": "重要なお知らせ、アップデート、ニュースをユーザーと共有して最新情報を入手します。",
+    "_OBJ_DES_ZALO_4": "重要なお知らせ、アップデート、ニュースをユーザーと共有して常に最新情報を入手します。",
     "_OBJ_DES_ZALO_5": "一貫性があり、有益で魅力的なコンテンツを通じてブランド アイデンティティと価値を強化する",
     "_OBJ_DES_WHATSAPP_1": "ターゲットを絞ったプロモーションやオファーをブロードキャストして、エンゲージメントと販売を促進します",
     "_OBJ_DES_WHATSAPP_2": "鮮やかなメッセージ テンプレートを使用してタイムリーで関連性のある更新を提供します",
     "_OBJ_DES_WHATSAPP_3": "インタラクティブな要素を使用して販売目標到達プロセスをガイドし、リードと見込み顧客を育成します。",
     "_OBJ_DES_WHATSAPP_4": "予定や予約のリマインダーと確認を送信してノーショーを減らします",
-    "_OBJ_DES_WHATSAPP_5": "重要なお知らせ、アップデート、ニュースをユーザーと共有して最新情報を入手します。",
+    "_OBJ_DES_WHATSAPP_5": "重要なお知らせ、アップデート、ニュースをユーザーと共有して常に最新情報を入手します。",
     "_OBJ_DES_TELEGRAM_1": "ターゲットを絞ったプロモーションやオファーをブロードキャストして、エンゲージメントと販売を促進します",
     "_OBJ_DES_TELEGRAM_2": "鮮やかなメッセージ テンプレートを使用してタイムリーで関連性のある更新を提供します",
     "_OBJ_DES_TELEGRAM_3": "インタラクティブなテンプレート要素を使用してセールスファネルを誘導し、リードと見込み顧客を育成します。",
     "_OBJ_DES_TELEGRAM_4": "予定や予約のリマインダーと確認を送信してノーショーを減らします",
-    "_OBJ_DES_TELEGRAM_5": "重要なお知らせ、アップデート、ニュースをユーザーと共有して最新情報を入手します。",
+    "_OBJ_DES_TELEGRAM_5": "重要なお知らせ、アップデート、ニュースをユーザーと共有して常に最新情報を入手します。",
     "_OBJ_DES_LINE_1": "ターゲットを絞ったプロモーションやオファーをブロードキャストして、エンゲージメントと販売を促進します",
     "_OBJ_DES_LINE_2": "Line のリッチ メニューを利用して、メッセージ内のインタラクティブなオプションとナビゲーションをユーザーに提供します",
     "_OBJ_DES_LINE_3": "インタラクティブなテンプレート要素を使用してセールスファネルを誘導し、リードと見込み顧客を育成します。",
     "_OBJ_DES_LINE_4": "予定や予約のリマインダーと確認を送信してノーショーを減らします",
-    "_OBJ_DES_LINE_5": "重要なお知らせ、アップデート、ニュースをユーザーと共有して最新情報を入手します。",
+    "_OBJ_DES_LINE_5": "重要なお知らせ、アップデート、ニュースをユーザーと共有して常に最新情報を入手します。",
     "_OBJ_DES_FILE_TRANSFER_1": "さまざまなシステム間での大規模なデータセットの共有を自動化し、より迅速かつ正確なデータ処理を実現します。",
     "_OBJ_DES_FILE_TRANSFER_2": "マーケティング資料やキャンペーン資産をチームメンバーや外部関係者に簡単に配布し、より良いコラボレーションとコミュニケーションを促進します。",
     "_OBJ_DES_FILE_TRANSFER_3": "ファイル転送をマーケティングオートメーションに統合して時間と人的リソースを節約する",
@@ -2497,22 +2497,22 @@
     "_OBJ_DES_ORCHES_3": "チャネル全体でターゲットを絞ったメッセージを送信することで、購入者のジャーニーを見込み顧客に導き、コンバージョンを促進し、販売機会を最大化します。",
     "_OBJ_DES_ORCHES_4": "チャネルの好みや行動に基づいて特定の視聴者セグメントに合わせてキャンペーンを調整し、共感を呼び、コンバージョンにつながるパーソナライズされたエクスペリエンスを提供します。",
     "_OBJ_DES_ORCHES_5": "すべてのチャネルにわたって包括的な分析を取得し、データ主導の意思決定と継続的なキャンペーンの改善を強化して、最適な結果と ROI を実現します。",
-    "_WEBPER_TEMP_OBJ_DES_POP_1": "潜在顧客からの情報、または既存顧客からのレビューやフィードバックを収集してデータを充実させます",
+    "_WEBPER_TEMP_OBJ_DES_POP_1": "潜在的な顧客からの情報、または既存の顧客からのレビューやフィードバックを収集してデータを充実させます",
     "_WEBPER_TEMP_OBJ_DES_POP_2": "限定セール、期間限定プロモーション、見逃せないおすすめ商品を紹介することで、収益を飛躍的に高めます。",
     "_WEBPER_TEMP_OBJ_DES_POP_3": "追加購入を促すために補完的な製品やアップグレードを提案する",
-    "_WEBPER_TEMP_OBJ_DES_POP_4": "ためらう訪問者をさらに滞在させ、さらに探索したくなる魅力的なオファーで出口をチャンスに変えます。",
+    "_WEBPER_TEMP_OBJ_DES_POP_4": "躊躇する訪問者をさらに滞在させ、さらに探索したくなる魅力的なオファーで出口をチャンスに変えます。",
     "_WEBPER_TEMP_OBJ_DES_POP_5": "重要なニュースやイベントを視聴者に直接ブロードキャストして最新情報を提供します",
     "_WEBPER_TEMP_OBJ_DES_POP_6": "Cookie の使用についてユーザーの同意を得ることで、視聴者の安心とプライバシー規制の遵守を確保します。",
-    "_WEBPER_TEMP_OBJ_DES_POP_7": "CDP 365 のデータを利用して、パーソナライズされた製品の推奨事項を表示し、各訪問者の興味や過去のやり取りに合わせて調整できます。",
-    "_WEBPER_TEMP_OBJ_DES_POP_8": "ターゲットを絞ったオファー、インセンティブ、またはリマインダーを使用して、躊躇する買い物客を購入を完了させるよう促します。",
+    "_WEBPER_TEMP_OBJ_DES_POP_7": "CDP 365 からのデータを利用して、パーソナライズされた製品の推奨事項を表示し、各訪問者の興味や過去のやり取りに合わせて調整できます。",
+    "_WEBPER_TEMP_OBJ_DES_POP_8": "ターゲットを絞ったオファー、インセンティブ、またはリマインダーを使用して、躊躇している買い物客に購入を完了させるよう促します。",
     "_WEBPER_TEMP_OBJ_DES_POP_9": "ソーシャル メディア プラットフォームでコミュニティを拡大し、ブランドの存在感を高めます",
     "_WEBPER_TEMP_OBJ_DES_POP_10": "参加者と興奮を促進する注目を集めるイベント プロモーションで成功への舞台を整えます。",
     "_WEBPER_TEMP_OBJ_DES_POP_11": "魅力的な運ゲーやインタラクティブなコンテンツで興奮を呼び起こし、エンゲージメントを高め、ユーザーを何度もリピートさせ続ける",
-    "_WEBPER_TEMP_OBJ_DES_POP_12": "新しいユーザーを支援し、提供された回答に基づいてパーソナライズされた推奨事項を提供します",
+    "_WEBPER_TEMP_OBJ_DES_POP_12": "新規ユーザーを支援し、提供された回答に基づいてパーソナライズされた推奨事項を提供します",
     "_WEBPER_TEMP_OBJ_DES_POP_13": "直接リンクまたは QR コードを介してモバイル アプリをダウンロードしてスキャンするようユーザーに奨励します。",
     "_WEBPER_TEMP_OBJ_DES_FLOAT_1": "リード獲得フォームを含めて、訪問者にニュースレター、プロモーション、その他のマーケティング資料への登録を促します。",
     "_WEBPER_TEMP_OBJ_DES_FLOAT_2": "カウントダウンタイマー付きの特別セールや限定プロモーションで視聴者の目を引き、さらに探索するよう促します。",
-    "_WEBPER_TEMP_OBJ_DES_FLOAT_3": "訪問者がスクロールしても表示され続けるバナーを使用して、重要なニュースが確実に注目されるようにし、最新情報を前面と中央に保ちます。",
+    "_WEBPER_TEMP_OBJ_DES_FLOAT_3": "訪問者がスクロールしても表示され続けるバナーを使用して、重要なニュースを確実に目に留まり、更新情報を前面と中央に保ちます。",
     "_WEBPER_TEMP_OBJ_DES_FLOAT_4": "あなたのブランドに対するフレンドリーな意見を確立するために、初めて Web サイトを閲覧する訪問者を歓迎します。",
     "_WEBPER_TEMP_OBJ_DES_FLOAT_5": "ソーシャル メディア プラットフォームでコミュニティを拡大することで、ブランドの存在感を高めます。",
     "_WEBPER_TEMP_OBJ_DES_FLOAT_6": "ブランドロゴを目立つように表示することでアイデンティティを強化し、ブランド認知度を向上させます",
@@ -2524,7 +2524,7 @@
     "_WEBPER_TEMP_OBJ_DES_FULLSCR_6": "直接リンクまたは QR コードを介してモバイル アプリをダウンロードしてスキャンするようユーザーに奨励します。",
     "_WEBPER_TEMP_OBJ_DES_FULLSCR_7": "顧客の生活に価値を付加し、単なる購入を超えてブランドと関わるよう促すために、詳細な情報と関連チュートリアルを提供します。",
     "_WEBPER_TEMP_OBJ_DES_INLINE_1": "購読フォームや登録プロンプトを通じてユーザー情報を取得する",
-    "_WEBPER_TEMP_OBJ_DES_INLINE_2": "CDP 365 のデータを利用して、パーソナライズされた製品の推奨事項を表示し、各訪問者の興味や過去のやり取りに合わせて調整できます。",
+    "_WEBPER_TEMP_OBJ_DES_INLINE_2": "CDP 365 からのデータを利用して、パーソナライズされた製品の推奨事項を表示し、各訪問者の興味や過去のやり取りに合わせて調整できます。",
     "_WEBPER_TEMP_OBJ_DES_INLINE_3": "魅力的な運ゲーやインタラクティブなコンテンツで興奮を呼び起こし、エンゲージメントを高め、ユーザーを何度もリピートさせます。",
     "_WEBPER_TEMP_OBJ_DES_INLINE_4": "アンケート、投票、フィードバック フォームを組み込んで、貴重な洞察を収集し、交流を促進します。",
     "_WEBPER_TEMP_OBJ_DES_INLINE_5": "顧客のレビュー、評価、お客様の声などの社会的証明要素を紹介して、購入の意思決定に影響を与える信頼と信用を構築します。",
@@ -2532,11 +2532,11 @@
     "_WEBPER_TEMP_OBJ_DES_SLIDEIN_1": "購読フォーム、登録プロンプト、またはゲート付きコンテンツのオファーを通じて、電子メール アドレスや連絡先の詳細などのユーザー情報を取得します。",
     "_WEBPER_TEMP_OBJ_DES_SLIDEIN_2": "直前の取引やコンテンツの推奨を提供して、ユーザーに滞在してさらに探索するよう促します。",
     "_WEBPER_TEMP_OBJ_DES_SLIDEIN_3": "今後のコンテンツ、製品の発売、イベントを予告して、視聴者の期待と興奮を高め、Web サイトへのトラフィックを促進します。",
-    "_WEBPER_TEMP_OBJ_DES_SLIDEIN_4": "アンケート、投票、またはフィードバック フォームを組み込んで、貴重な洞察を収集し、交流を促進します。",
+    "_WEBPER_TEMP_OBJ_DES_SLIDEIN_4": "アンケート、投票、フィードバック フォームを組み込んで貴重な洞察を収集し、交流を促進します。",
     "_WEBPER_TEMP_OBJ_DES_SLIDEIN_5": "顧客のレビュー、評価、お客様の声などの社会的証明要素を紹介して、購入の意思決定に影響を与える信頼と信用を構築します。",
     "_WEBPER_TEMP_OBJ_DES_SLIDEIN_6": "期間限定のオファー、カウントダウンタイマー、フラッシュセール通知を提示することで、緊迫感を醸成し、即時行動を促します。",
-    "_WEBPER_TEMP_OBJ_DES_SLIDEIN_7": "ターゲットを絞ったオファー、インセンティブ、またはリマインダーを使用して、躊躇する買い物客を購入を完了させるよう促します。",
-    "_WEBPER_TEMP_OBJ_DES_SLIDEIN_8": "顧客からの問い合わせの必要性を減らし、ショッピング体験の全体的な満足度を向上させるために、顧客が遭遇する可能性のある一般的な懸念事項や問題のトラブルシューティングに対処する",
+    "_WEBPER_TEMP_OBJ_DES_SLIDEIN_7": "ターゲットを絞ったオファー、インセンティブ、またはリマインダーを使用して、躊躇している買い物客に購入を完了させるよう促します。",
+    "_WEBPER_TEMP_OBJ_DES_SLIDEIN_8": "顧客からの問い合わせの必要性を減らし、ショッピング体験の全体的な満足度を向上させるために、顧客が遭遇する可能性のある一般的な懸念事項や問題のトラブルシューティングに対処します。",
     "_WEBPER_TEMP_OBJ_DES_SLIDEIN_9": "登録や出欠確認のオプションを提供して、ウェビナー、ワークショップ、イベントに参加するようユーザーを招待し、参加とエンゲージメントを促進します。",
     "_LINE_MESS_OBJ_DES_1": "各ユーザーの好み、行動、過去のやり取りに基づいてメッセージをカスタマイズする",
     "_LINE_MESS_OBJ_DES_2": "画像、ビデオ、ステッカーなどのマルチメディア コンテンツでメッセージを充実させます",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@antscorp/antsomi-ui",
-  "version": "1.3.5-beta.840",
+  "version": "1.3.5-beta.841",
   "description": "An enterprise-class UI design language and React UI library.",
   "sideEffects": [
     "dist/*",