@antscorp/antsomi-ui 2.0.13 → 2.0.15

package/es/components/organism/AlgorithmsSetting/index.js

@@ -1,23 +1,4 @@
-var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
-    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
-    return new (P || (P = Promise))(function (resolve, reject) {
-        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
-        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
-        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-        step((generator = generator.apply(thisArg, _arguments || [])).next());
-    });
-};
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
+import { jsxs as _jsxs, jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
 /* eslint-disable @typescript-eslint/no-use-before-define */
 // Libraries
 import React, { useCallback, useEffect, useMemo, useState } from 'react';
@@ -27,13 +8,24 @@ import produce from 'immer';
 import sortBy from 'lodash/sortBy';
 // Translations
 import { translations } from '@antscorp/antsomi-ui/es/locales/translations';
-// Atoms
-import { Button, Checkbox, Icon, Radio, Divider, RequiredLabel, Space, Text, } from '@antscorp/antsomi-ui/es/components/atoms';
-import { Divider as DividerDot } from '../../molecules/CaptureScreen/styled';
+import { Button } from '@antscorp/antsomi-ui/es/components/atoms/Button';
+import { Checkbox } from '@antscorp/antsomi-ui/es/components/atoms/Checkbox';
+import { Icon } from '@antscorp/antsomi-ui/es/components/atoms/Icon';
+import { Radio } from '@antscorp/antsomi-ui/es/components/atoms/Radio';
+import { Divider } from '@antscorp/antsomi-ui/es/components/atoms/Divider';
+import { RequiredLabel } from '@antscorp/antsomi-ui/es/components/atoms/RequiredLabel';
+import { Space } from '@antscorp/antsomi-ui/es/components/atoms/Space';
+import { Text } from '@antscorp/antsomi-ui/es/components/atoms/Text';
 // Molecules
-import { RadioGroup, SelectMulti, SelectMultiOption, SelectOptionLabel, SelectV2 as Select, InputNumberWithLabel as InputNumber, SelectMultOptGroup, SelectEventAttribute, } from '@antscorp/antsomi-ui/es/components/molecules';
+import { RadioGroup } from '@antscorp/antsomi-ui/es/components/molecules/RadioGroup';
+import { SelectMulti, SelectMultiOption, SelectMultOptGroup, SelectOptionLabel, } from '@antscorp/antsomi-ui/es/components/molecules/SelectMulti';
+import { SelectEventAttribute } from '@antscorp/antsomi-ui/es/components/molecules/SelectEventAttribute';
+import { SelectV2 as Select } from '@antscorp/antsomi-ui/es/components/molecules/SelectV2';
+import { InputNumber } from '@antscorp/antsomi-ui/es/components/molecules/InputNumber';
+import { Divider as DividerDot } from '@antscorp/antsomi-ui/es/components/molecules/CaptureScreen/styled';
+import { SettingWrapper } from '@antscorp/antsomi-ui/es/components/molecules/SettingWrapper';
+import { EditorScript } from '@antscorp/antsomi-ui/es/components/molecules/EditorScript';
 import TabPane from 'antd/es/tabs/TabPane';
-import { SettingWrapper, EditorScript } from '../../molecules';
 // Styled
 import { AlgorithmsSettingWrapper, AlgorithmWrapper, StyledSelect, StyledTabs } from './styled';
 // Constants
@@ -72,19 +64,18 @@ const styleGrid = {
     gap: '0 8px',
 };
 export const AlgorithmsSetting = (props) => {
-    var _a;
     const { data, itemTypeId, isHideRanking, itemTypeName, isShowErrorAlert, journeySettings, onChange, } = props;
     // Translations
     const { t } = i18nInstance;
     // Selectors
-    const ranking = data !== null && data !== void 0 ? data : {};
+    const ranking = data ?? {};
     const { algorithms = {
         sort: 'mix',
         value: [],
         filters: [],
     }, } = ranking;
     const serviceAuth = useSelectServiceAuth();
-    const { url } = serviceAuth, restAuthInfo = __rest(serviceAuth, ["url"]);
+    const { url, ...restAuthInfo } = serviceAuth;
     const mode = useSelectModeView();
     const isCDP = mode === 'CDP';
     // Queries
@@ -102,15 +93,12 @@ export const AlgorithmsSetting = (props) => {
     const [listAlgo, setListAlgo] = useState([]);
     const [expandedAlgoTypes, setExpandAlgoTypes] = useState([]);
     const char = isCDP ? '' : ':';
-    const labelStyle = useMemo(() => {
-        var _a;
-        return ({
-            type: 'secondary',
-            isReverseMask: isCDP,
-            style: { textAlign: 'right', marginRight: isCDP ? 25 : 8 },
-            color: isCDP ? (_a = THEME.token) === null || _a === void 0 ? void 0 : _a.colorText : undefined,
-        });
-    }, [isCDP]);
+    const labelStyle = useMemo(() => ({
+        type: 'secondary',
+        isReverseMask: isCDP,
+        style: { textAlign: 'right', marginRight: isCDP ? 25 : 8 },
+        color: isCDP ? THEME.token?.colorText : undefined,
+    }), [isCDP]);
     useEffect(() => {
         getListAlgorithms(itemTypeName);
         getListFilters();
@@ -135,15 +123,14 @@ export const AlgorithmsSetting = (props) => {
     const listAlgoByTypes = useMemo(() => {
         const initalValue = new Map();
         return sortBy(listAlgo, ({ type }) => type).reduce((acc, algo) => {
-            var _a;
-            const algosByType = (_a = acc.get(algo.type)) !== null && _a !== void 0 ? _a : [];
+            const algosByType = acc.get(algo.type) ?? [];
             algosByType.push(algo);
             return acc.set(algo.type, algosByType);
         }, initalValue);
     }, [listAlgo]);
     // Services
-    const getListAlgorithms = (itemTypeName) => __awaiter(void 0, void 0, void 0, function* () {
-        const { rows } = yield getListAlgorithmsBO(serviceAuth, itemTypeName);
+    const getListAlgorithms = async (itemTypeName) => {
+        const { rows } = await getListAlgorithmsBO(serviceAuth, itemTypeName);
         const initExpanedAlgoTypes = [];
         const listAlgorithms = rows
             .map((item) => {
@@ -160,15 +147,19 @@ export const AlgorithmsSetting = (props) => {
             .filter(Boolean);
         setListAlgo(listAlgorithms);
         setExpandAlgoTypes(initExpanedAlgoTypes.filter((value, index, array) => array.indexOf(value) === index));
-    });
+    };
     // Queries
     const { data: [listAttribute, listAttributeRetarget], isFetching: isLoadingAttribute, } = useGetListAttributeBO({ url: url }, restAuthInfo, {
         itemTypeIds: [itemTypeId],
         options: {
             select(data) {
-                var _a;
                 const { rows = [] } = data || {};
-                const listAttr = ((_a = rows[0]) === null || _a === void 0 ? void 0 : _a.properties.map((item) => (Object.assign(Object.assign({}, item), { value: item.itemPropertyName, label: item.translateLabel, disabled: parseInt(item.status) === 4 })))) || [];
+                const listAttr = rows[0]?.properties.map((item) => ({
+                    ...item,
+                    value: item.itemPropertyName,
+                    label: item.translateLabel,
+                    disabled: parseInt(item.status) === 4,
+                })) || [];
                 return [
                     listAttr,
                     listAttr.filter((each) => each.dataType === 'string' || each.dataType === 'text'),
@@ -176,8 +167,8 @@ export const AlgorithmsSetting = (props) => {
             },
         },
     });
-    const getListFilters = () => __awaiter(void 0, void 0, void 0, function* () {
-        const { rows } = yield getListFiltersBO(serviceAuth);
+    const getListFilters = async () => {
+        const { rows } = await getListFiltersBO(serviceAuth);
         const filters = rows
             .map((item) => ({
             value: item.value,
@@ -191,14 +182,17 @@ export const AlgorithmsSetting = (props) => {
         })
             .map((each) => {
             if (itemTypeName === ITEM_TYPE_NAME.ARTICLE && each.value === 'seen_products') {
-                return Object.assign(Object.assign({}, each), { label: 'Seen Articles' });
+                return {
+                    ...each,
+                    label: 'Seen Articles',
+                };
             }
             return each;
         });
         setListFilter(filters);
-    });
-    const getListCollections = () => __awaiter(void 0, void 0, void 0, function* () {
-        const { rows } = yield getListCollectionsBO(serviceAuth, itemTypeId);
+    };
+    const getListCollections = async () => {
+        const { rows } = await getListCollectionsBO(serviceAuth, itemTypeId);
         const filters = rows.map((item) => ({
             value: item.value,
             id: item.value,
@@ -207,11 +201,14 @@ export const AlgorithmsSetting = (props) => {
             status: parseInt(item.model.status),
         }));
         setListCollection(filters);
-    });
+    };
     // Handlers Algorithms
     const onChangeType = (event) => {
         try {
-            onChange(Object.assign(Object.assign({}, data), { type: event.target.value }));
+            onChange({
+                ...data,
+                type: event.target.value,
+            });
         }
         catch (error) {
             handleError(error, {
@@ -241,9 +238,18 @@ export const AlgorithmsSetting = (props) => {
         try {
             const newListAlgo = produce(data.algorithms.value, (draft) => {
                 const index = draft.findIndex((algo) => algo.value === item.value);
-                draft[index] = Object.assign(Object.assign({}, draft[index]), value);
+                draft[index] = {
+                    ...draft[index],
+                    ...value,
+                };
+            });
+            onChange({
+                ...data,
+                algorithms: {
+                    ...data.algorithms,
+                    value: newListAlgo,
+                },
             });
-            onChange(Object.assign(Object.assign({}, data), { algorithms: Object.assign(Object.assign({}, data.algorithms), { value: newListAlgo }) }));
         }
         catch (error) {
             handleError(error, {
@@ -256,7 +262,13 @@ export const AlgorithmsSetting = (props) => {
     const onRemoveAlgo = (item) => {
         try {
             const newListAlgo = data.algorithms.value.filter(algo => algo.value !== item.value);
-            onChange(Object.assign(Object.assign({}, data), { algorithms: Object.assign(Object.assign({}, data.algorithms), { value: newListAlgo }) }));
+            onChange({
+                ...data,
+                algorithms: {
+                    ...data.algorithms,
+                    value: newListAlgo,
+                },
+            });
         }
         catch (error) {
             handleError(error, {
@@ -272,11 +284,28 @@ export const AlgorithmsSetting = (props) => {
         // set redux selected based on checked items when apply
         const selected = selectedAlgos.map(item => isExistKey(algorithms.value, item)
             ? // checked item
-             Object.assign({}, mapAlgoSelected[item]) : // add new
-         Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({ value: item, quantity: 5 }, (['similarity_bought', 'similarity_seen', 'similarity_cart'].includes(item) && {
-            last: 1,
-        })), (item === 'recency' && { to: 'today', last: 1 })), (item === 'distance' && DEFAULT_DISTANCE_ALGORITHM)), (item === 'retarget_search' && { last: 20 })), (item === 'notify' && { last: 7, interest: undefined })), (item === 'get_top' && { sort_by: undefined, sort_type: 'desc' })), (item === 'trending' && DEFAULT_TRENDING_ALGORITHM)));
-        onChange(Object.assign(Object.assign({}, data), { algorithms: Object.assign(Object.assign({}, data.algorithms), { value: selected }) }));
+                { ...mapAlgoSelected[item] }
+            : // add new
+                {
+                    value: item,
+                    quantity: 5,
+                    ...(['similarity_bought', 'similarity_seen', 'similarity_cart'].includes(item) && {
+                        last: 1,
+                    }),
+                    ...(item === 'recency' && { to: 'today', last: 1 }),
+                    ...(item === 'distance' && DEFAULT_DISTANCE_ALGORITHM),
+                    ...(item === 'retarget_search' && { last: 20 }),
+                    ...(item === 'notify' && { last: 7, interest: undefined }),
+                    ...(item === 'get_top' && { sort_by: undefined, sort_type: 'desc' }),
+                    ...(item === 'trending' && DEFAULT_TRENDING_ALGORITHM),
+                });
+        onChange({
+            ...data,
+            algorithms: {
+                ...data.algorithms,
+                value: selected,
+            },
+        });
     };
     const onChangeDropdownVisible = (isOpen) => {
         setIsShowDropdownSelect(isOpen);
@@ -299,7 +328,13 @@ export const AlgorithmsSetting = (props) => {
                 // check
                 newFilters = [...newFilters, item];
             }
-            onChange(Object.assign(Object.assign({}, data), { algorithms: Object.assign(Object.assign({}, data.algorithms), { filters: newFilters }) }));
+            onChange({
+                ...data,
+                algorithms: {
+                    ...data.algorithms,
+                    filters: newFilters,
+                },
+            });
         }
         catch (error) {
             handleError(error, {
@@ -312,7 +347,10 @@ export const AlgorithmsSetting = (props) => {
     // Handlers Script
     const onBlurScript = (_, editor) => {
         try {
-            onChange(Object.assign(Object.assign({}, data), { custom: editor.getValue() }));
+            onChange({
+                ...data,
+                custom: editor.getValue(),
+            });
         }
         catch (error) {
             handleError(error, {
@@ -324,7 +362,13 @@ export const AlgorithmsSetting = (props) => {
     };
     const onChangeSort = (event) => {
         try {
-            onChange(Object.assign(Object.assign({}, data), { algorithms: Object.assign(Object.assign({}, data.algorithms), { sort: event.target.value }) }));
+            onChange({
+                ...data,
+                algorithms: {
+                    ...data.algorithms,
+                    sort: event.target.value,
+                },
+            });
         }
         catch (error) {
             handleError(error, {
@@ -335,7 +379,6 @@ export const AlgorithmsSetting = (props) => {
         }
     };
     const renderAlgorithmBy = (algo) => {
-        var _a, _b, _c, _d, _e;
         let element = null;
         switch (algo.value) {
             case 'viral_products': {
@@ -346,37 +389,15 @@ export const AlgorithmsSetting = (props) => {
                     field: algo.by,
                     checkDisable: true,
                 });
-                element = (React.createElement(AlgorithmWrapper, { mode: mode },
-                    React.createElement(RequiredLabel, Object.assign({}, labelStyle),
-                        t(translations.by.title).toString(),
-                        char),
-                    React.createElement(Select, { required: true, focused: isShowErrorAlert, disabled: isDisable, showSearch: true, placeholder: t(translations.selectCollection.title).toString(), style: styleNoBorderWFull, value: optionNotExitsValue(listCollection, algo.by), options: buildOptionArchive(listCollection, algo.by), errorArchive: errorMessage, onChange: value => onChangeAlgorithm(algo, { by: value }) })));
+                element = (_jsxs(AlgorithmWrapper, { mode: mode, children: [_jsxs(RequiredLabel, { ...labelStyle, children: [t(translations.by.title).toString(), char] }), _jsx(Select, { required: true, focused: isShowErrorAlert, disabled: isDisable, showSearch: true, placeholder: t(translations.selectCollection.title).toString(), style: styleNoBorderWFull, value: optionNotExitsValue(listCollection, algo.by), options: buildOptionArchive(listCollection, algo.by), errorArchive: errorMessage, onChange: value => onChangeAlgorithm(algo, { by: value }) })] }));
                 break;
             }
             case 'same_category': {
-                element = (React.createElement(AlgorithmWrapper, { mode: mode },
-                    React.createElement(RequiredLabel, Object.assign({}, labelStyle),
-                        t(translations.by.title).toString(),
-                        char),
-                    React.createElement(Select, { required: true, showSearch: true, focused: isShowErrorAlert, placeholder: t(translations.selectCategory.title).toString(), style: styleNoBorderWFull, value: algo.by, options: CATEGORY_OPTIONS, onChange: value => onChangeAlgorithm(algo, { by: value }) })));
+                element = (_jsxs(AlgorithmWrapper, { mode: mode, children: [_jsxs(RequiredLabel, { ...labelStyle, children: [t(translations.by.title).toString(), char] }), _jsx(Select, { required: true, showSearch: true, focused: isShowErrorAlert, placeholder: t(translations.selectCategory.title).toString(), style: styleNoBorderWFull, value: algo.by, options: CATEGORY_OPTIONS, onChange: value => onChangeAlgorithm(algo, { by: value }) })] }));
                 break;
             }
             case 'recency': {
-                element = (React.createElement(React.Fragment, null,
-                    React.createElement(AlgorithmWrapper, { mode: mode },
-                        React.createElement(Text, Object.assign({}, labelStyle),
-                            t(translations.last.title).toString(),
-                            char),
-                        React.createElement("div", { style: { display: 'flex', alignItems: 'center' } },
-                            React.createElement(InputNumber, { value: algo.last, width: 90, onChange: value => onChangeAlgorithm(algo, { last: value }), min: 1, max: 90, required: true }),
-                            React.createElement(Text, { color: isCDP ? (_a = THEME.token) === null || _a === void 0 ? void 0 : _a.colorIcon : undefined, style: { marginLeft: 8 } }, t(translations.days.title).toString()))),
-                    React.createElement(AlgorithmWrapper, { style: { marginTop: 4 }, mode: mode },
-                        React.createElement(Text, Object.assign({}, labelStyle),
-                            t(translations.to.title).toString(),
-                            char),
-                        React.createElement(Radio.Group, { onChange: event => onChangeAlgorithm(algo, { to: event.target.value }), value: algo.to },
-                            React.createElement(Radio, { value: "today" }, t(translations.today.title).toString()),
-                            React.createElement(Radio, { value: "yesterday" }, t(translations.yesterday.title).toString())))));
+                element = (_jsxs(_Fragment, { children: [_jsxs(AlgorithmWrapper, { mode: mode, children: [_jsxs(Text, { ...labelStyle, children: [t(translations.last.title).toString(), char] }), _jsxs("div", { style: { display: 'flex', alignItems: 'center' }, children: [_jsx(InputNumber, { value: algo.last, width: 90, onChange: value => onChangeAlgorithm(algo, { last: value }), min: 1, max: 90, required: true }), _jsx(Text, { color: isCDP ? THEME.token?.colorIcon : undefined, style: { marginLeft: 8 }, children: t(translations.days.title).toString() })] })] }), _jsxs(AlgorithmWrapper, { style: { marginTop: 4 }, mode: mode, children: [_jsxs(Text, { ...labelStyle, children: [t(translations.to.title).toString(), char] }), _jsxs(Radio.Group, { onChange: event => onChangeAlgorithm(algo, { to: event.target.value }), value: algo.to, children: [_jsx(Radio, { value: "today", children: t(translations.today.title).toString() }), _jsx(Radio, { value: "yesterday", children: t(translations.yesterday.title).toString() })] })] })] }));
                 break;
             }
             case 'retarget_search': {
@@ -386,98 +407,53 @@ export const AlgorithmsSetting = (props) => {
                     listAttribute: listAttributeRetarget,
                     field: algo.by,
                 });
-                element = (React.createElement(React.Fragment, null,
-                    React.createElement(AlgorithmWrapper, { mode: mode },
-                        React.createElement(RequiredLabel, Object.assign({}, labelStyle),
-                            t(translations.by.title).toString(),
-                            char),
-                        React.createElement(StyledSelect, Object.assign({ required: true, mode: "multiple", loading: isLoadingAttribute, allowClear: true, showSearch: true, focused: isShowErrorAlert, errorArchive: errorMessage, disabled: isDisable, placeholder: t(translations.selectAField.title).toString(), style: limitWidthStyle, maxTagTextLength: 18, value: algo.by }, (((_b = algo.by) === null || _b === void 0 ? void 0 : _b.length) === MAX_RETARGET_SEARCH_BY && { open: false }), { options: buildOptionAttrArchive(listAttributeRetarget, algo.by), onChange: value => onChangeAlgorithm(algo, { by: value }) }))),
-                    React.createElement(AlgorithmWrapper, { mode: mode },
-                        React.createElement(Text, Object.assign({}, labelStyle),
-                            t(translations.last.title).toString(),
-                            char),
-                        React.createElement("div", { style: { display: 'flex', alignItems: 'center' } },
-                            React.createElement(InputNumber, { value: algo.last, width: 90, onChange: value => onChangeAlgorithm(algo, { last: value }), min: 1, max: 20, required: true }),
-                            React.createElement(Text, { color: isCDP ? (_c = THEME.token) === null || _c === void 0 ? void 0 : _c.colorIcon : undefined, style: { marginLeft: 8 } }, t(translations.keywords.title).toLowerCase())))));
+                element = (_jsxs(_Fragment, { children: [_jsxs(AlgorithmWrapper, { mode: mode, children: [_jsxs(RequiredLabel, { ...labelStyle, children: [t(translations.by.title).toString(), char] }), _jsx(StyledSelect, { required: true, mode: "multiple", loading: isLoadingAttribute, allowClear: true, showSearch: true, focused: isShowErrorAlert, errorArchive: errorMessage, disabled: isDisable, placeholder: t(translations.selectAField.title).toString(), style: limitWidthStyle, maxTagTextLength: 18, value: algo.by, ...(algo.by?.length === MAX_RETARGET_SEARCH_BY && { open: false }), options: buildOptionAttrArchive(listAttributeRetarget, algo.by), onChange: value => onChangeAlgorithm(algo, { by: value }) })] }), _jsxs(AlgorithmWrapper, { mode: mode, children: [_jsxs(Text, { ...labelStyle, children: [t(translations.last.title).toString(), char] }), _jsxs("div", { style: { display: 'flex', alignItems: 'center' }, children: [_jsx(InputNumber, { value: algo.last, width: 90, onChange: value => onChangeAlgorithm(algo, { last: value }), min: 1, max: 20, required: true }), _jsx(Text, { color: isCDP ? THEME.token?.colorIcon : undefined, style: { marginLeft: 8 }, children: t(translations.keywords.title).toLowerCase() })] })] })] }));
                 break;
             }
             case 'similarity_bought':
             case 'similarity_cart':
             case 'similarity_seen':
-                element = (React.createElement(AlgorithmWrapper, { mode: mode },
-                    React.createElement(Text, Object.assign({}, labelStyle),
-                        t(translations.last.title).toString(),
-                        char),
-                    React.createElement("div", { style: { display: 'flex', alignItems: 'center' } },
-                        React.createElement(InputNumber, { value: algo.last, width: 90, onChange: value => onChangeAlgorithm(algo, { last: value }), min: 1, max: 90, required: true }),
-                        React.createElement(Text, { color: isCDP ? (_d = THEME.token) === null || _d === void 0 ? void 0 : _d.colorIcon : undefined, style: { marginLeft: 8 } }, itemTypeName === ITEM_TYPE_NAME.ARTICLE
-                            ? t(translations.articles.title).toString()
-                            : t(translations.products.title).toString()))));
+                element = (_jsxs(AlgorithmWrapper, { mode: mode, children: [_jsxs(Text, { ...labelStyle, children: [t(translations.last.title).toString(), char] }), _jsxs("div", { style: { display: 'flex', alignItems: 'center' }, children: [_jsx(InputNumber, { value: algo.last, width: 90, onChange: value => onChangeAlgorithm(algo, { last: value }), min: 1, max: 90, required: true }), _jsx(Text, { color: isCDP ? THEME.token?.colorIcon : undefined, style: { marginLeft: 8 }, children: itemTypeName === ITEM_TYPE_NAME.ARTICLE
+                                        ? t(translations.articles.title).toString()
+                                        : t(translations.products.title).toString() })] })] }));
                 break;
             case 'similar_content': {
                 const { errorMessage, isDisable } = isCheckStatusAttr(listBO, itemTypeId, SIMILAR_CONTENT_OPTIONS, algo.by);
-                element = (React.createElement(AlgorithmWrapper, { mode: mode },
-                    React.createElement(RequiredLabel, Object.assign({}, labelStyle),
-                        t(translations.by.title).toString(),
-                        char),
-                    React.createElement(StyledSelect, { required: true, mode: "multiple", allowClear: true, showSearch: true, focused: isShowErrorAlert, errorArchive: errorMessage, disabled: isDisable, placeholder: t(translations.selectContent.title).toString(), style: limitWidthStyle, maxTagTextLength: 18, value: algo.by, options: SIMILAR_CONTENT_OPTIONS, onChange: value => onChangeAlgorithm(algo, { by: value }) })));
+                element = (_jsxs(AlgorithmWrapper, { mode: mode, children: [_jsxs(RequiredLabel, { ...labelStyle, children: [t(translations.by.title).toString(), char] }), _jsx(StyledSelect, { required: true, mode: "multiple", allowClear: true, showSearch: true, focused: isShowErrorAlert, errorArchive: errorMessage, disabled: isDisable, placeholder: t(translations.selectContent.title).toString(), style: limitWidthStyle, maxTagTextLength: 18, value: algo.by, options: SIMILAR_CONTENT_OPTIONS, onChange: value => onChangeAlgorithm(algo, { by: value }) })] }));
                 break;
             }
             case 'distance': {
                 const { errorMessage, isDisable } = isCheckStatusAttr(listBO, itemTypeId, listAttribute, algo.by);
-                element = (React.createElement(React.Fragment, null,
-                    React.createElement(AlgorithmWrapper, { mode: mode },
-                        React.createElement(RequiredLabel, Object.assign({}, labelStyle),
-                            t(translations.by.title).toString(),
-                            char),
-                        React.createElement(Select, { required: true, disabled: isDisable, focused: isShowErrorAlert, loading: isLoadingAttribute, showSearch: true, placeholder: t(translations.selectAField.title).toString(), style: limitWidthStyle, value: algo.by, options: buildOptionAttrArchive(listAttribute, algo.by), onChange: value => onChangeAlgorithm(algo, { by: value }), errorArchive: errorMessage })),
-                    React.createElement(AlgorithmWrapper, { mode: mode },
-                        React.createElement("div", null),
-                        React.createElement(Space, { direction: "vertical", size: 10 },
-                            React.createElement(Select, { showSearch: true, defaultValue: OPERATOR_OPTIONS.GREATER_THAN.value, style: limitWidthStyle, value: algo.operator, options: Object.values(OPERATOR_OPTIONS), onChange: value => onChangeAlgorithm(algo, {
-                                    operator: value,
-                                    rangeType: ['value', 'value'],
-                                    rangeValue: [0, 0],
-                                }) }),
-                            isOperatorInRange(algo.operator) ? (React.createElement(React.Fragment, null,
-                                React.createElement("div", { style: styleGrid },
-                                    React.createElement(Select, { defaultValue: COMPARE_TYPE.VALUE.value, style: limitWidthStyle, value: algo.rangeType[0], options: Object.values(COMPARE_TYPE), onChange: value => {
-                                            const toType = algo.rangeType[1];
-                                            const [fromValue, toValue] = algo.rangeValue;
-                                            onChangeAlgorithm(algo, { rangeType: [value, toType] });
-                                            if (fromValue > 100) {
-                                                onChangeAlgorithm(algo, {
-                                                    rangeType: [value, toType],
-                                                    rangeValue: [100, toValue],
-                                                });
-                                            }
-                                        } }),
-                                    React.createElement(InputNumber, { width: "100%", min: 0, max: algo.rangeType[0] === COMPARE_TYPE.PERCENTAGE.value ? 100 : Infinity, required: true, defaultValue: 0, value: algo.rangeValue[0], onChange: value => onChangeAlgorithm(algo, { rangeValue: [value, algo.rangeValue[1]] }) })),
-                                React.createElement("div", { style: styleGrid },
-                                    React.createElement(Select, { defaultValue: COMPARE_TYPE.VALUE.value, style: limitWidthStyle, value: algo.rangeType[1], options: Object.values(COMPARE_TYPE), onChange: value => {
-                                            const fromType = algo.rangeType[0];
-                                            const [fromValue, toValue] = algo.rangeValue;
-                                            onChangeAlgorithm(algo, { rangeType: [fromType, value] });
-                                            if (toValue > 100) {
-                                                onChangeAlgorithm(algo, {
-                                                    rangeType: [fromType, value],
-                                                    rangeValue: [fromValue, 100],
-                                                });
-                                            }
-                                        } }),
-                                    React.createElement(InputNumber, { width: "100%", min: 0, max: algo.rangeType[1] === COMPARE_TYPE.PERCENTAGE.value ? 100 : Infinity, required: true, defaultValue: 0, value: algo.rangeValue[1], onChange: value => onChangeAlgorithm(algo, { rangeValue: [algo.rangeValue[0], value] }) })))) : (React.createElement("div", { style: styleGrid },
-                                React.createElement(Select, { defaultValue: COMPARE_TYPE.VALUE.value, style: limitWidthStyle, value: algo.compareType, options: Object.values(COMPARE_TYPE), onChange: value => {
-                                        onChangeAlgorithm(algo, { compareType: value });
-                                        if (algo.compareValue > 100) {
-                                            onChangeAlgorithm(algo, { compareType: value, compareValue: 100 });
-                                        }
-                                    } }),
-                                React.createElement(InputNumber, { width: "100%", min: 0, max: algo.compareType === COMPARE_TYPE.PERCENTAGE.value ? 100 : Infinity, required: true, defaultValue: 0, value: algo.compareValue, onChange: value => onChangeAlgorithm(algo, { compareValue: value }) }))))),
-                    React.createElement(AlgorithmWrapper, { style: { alignItems: 'baseline' }, mode: mode },
-                        React.createElement(RequiredLabel, Object.assign({}, labelStyle),
-                            t(translations.by.title).toString(),
-                            char),
-                        React.createElement(SelectEventAttribute, { styleWrapper: { maxWidth: MAX_WIDTH }, isShowErrorAlert: isShowErrorAlert, journeySettings: journeySettings, eventMetadata: algo.with || {}, onChange: (eventMetaData, ignoreUndoAction) => onChangeAlgorithm(algo, { with: eventMetaData }, ignoreUndoAction) }))));
+                element = (_jsxs(_Fragment, { children: [_jsxs(AlgorithmWrapper, { mode: mode, children: [_jsxs(RequiredLabel, { ...labelStyle, children: [t(translations.by.title).toString(), char] }), _jsx(Select, { required: true, disabled: isDisable, focused: isShowErrorAlert, loading: isLoadingAttribute, showSearch: true, placeholder: t(translations.selectAField.title).toString(), style: limitWidthStyle, value: algo.by, options: buildOptionAttrArchive(listAttribute, algo.by), onChange: value => onChangeAlgorithm(algo, { by: value }), errorArchive: errorMessage })] }), _jsxs(AlgorithmWrapper, { mode: mode, children: [_jsx("div", {}), _jsxs(Space, { direction: "vertical", size: 10, children: [_jsx(Select, { showSearch: true, defaultValue: OPERATOR_OPTIONS.GREATER_THAN.value, style: limitWidthStyle, value: algo.operator, options: Object.values(OPERATOR_OPTIONS), onChange: value => onChangeAlgorithm(algo, {
+                                                operator: value,
+                                                rangeType: ['value', 'value'],
+                                                rangeValue: [0, 0],
+                                            }) }), isOperatorInRange(algo.operator) ? (_jsxs(_Fragment, { children: [_jsxs("div", { style: styleGrid, children: [_jsx(Select, { defaultValue: COMPARE_TYPE.VALUE.value, style: limitWidthStyle, value: algo.rangeType[0], options: Object.values(COMPARE_TYPE), onChange: value => {
+                                                                const toType = algo.rangeType[1];
+                                                                const [fromValue, toValue] = algo.rangeValue;
+                                                                onChangeAlgorithm(algo, { rangeType: [value, toType] });
+                                                                if (fromValue > 100) {
+                                                                    onChangeAlgorithm(algo, {
+                                                                        rangeType: [value, toType],
+                                                                        rangeValue: [100, toValue],
+                                                                    });
+                                                                }
+                                                            } }), _jsx(InputNumber, { width: "100%", min: 0, max: algo.rangeType[0] === COMPARE_TYPE.PERCENTAGE.value ? 100 : Infinity, required: true, defaultValue: 0, value: algo.rangeValue[0], onChange: value => onChangeAlgorithm(algo, { rangeValue: [value, algo.rangeValue[1]] }) })] }), _jsxs("div", { style: styleGrid, children: [_jsx(Select, { defaultValue: COMPARE_TYPE.VALUE.value, style: limitWidthStyle, value: algo.rangeType[1], options: Object.values(COMPARE_TYPE), onChange: value => {
+                                                                const fromType = algo.rangeType[0];
+                                                                const [fromValue, toValue] = algo.rangeValue;
+                                                                onChangeAlgorithm(algo, { rangeType: [fromType, value] });
+                                                                if (toValue > 100) {
+                                                                    onChangeAlgorithm(algo, {
+                                                                        rangeType: [fromType, value],
+                                                                        rangeValue: [fromValue, 100],
+                                                                    });
+                                                                }
+                                                            } }), _jsx(InputNumber, { width: "100%", min: 0, max: algo.rangeType[1] === COMPARE_TYPE.PERCENTAGE.value ? 100 : Infinity, required: true, defaultValue: 0, value: algo.rangeValue[1], onChange: value => onChangeAlgorithm(algo, { rangeValue: [algo.rangeValue[0], value] }) })] })] })) : (_jsxs("div", { style: styleGrid, children: [_jsx(Select, { defaultValue: COMPARE_TYPE.VALUE.value, style: limitWidthStyle, value: algo.compareType, options: Object.values(COMPARE_TYPE), onChange: value => {
+                                                        onChangeAlgorithm(algo, { compareType: value });
+                                                        if (algo.compareValue > 100) {
+                                                            onChangeAlgorithm(algo, { compareType: value, compareValue: 100 });
+                                                        }
+                                                    } }), _jsx(InputNumber, { width: "100%", min: 0, max: algo.compareType === COMPARE_TYPE.PERCENTAGE.value ? 100 : Infinity, required: true, defaultValue: 0, value: algo.compareValue, onChange: value => onChangeAlgorithm(algo, { compareValue: value }) })] }))] })] }), _jsxs(AlgorithmWrapper, { style: { alignItems: 'baseline' }, mode: mode, children: [_jsxs(RequiredLabel, { ...labelStyle, children: [t(translations.by.title).toString(), char] }), _jsx(SelectEventAttribute, { styleWrapper: { maxWidth: MAX_WIDTH }, isShowErrorAlert: isShowErrorAlert, journeySettings: journeySettings, eventMetadata: algo.with || {}, onChange: (eventMetaData, ignoreUndoAction) => onChangeAlgorithm(algo, { with: eventMetaData }, ignoreUndoAction) })] })] }));
                 break;
             }
             case 'notify': {
@@ -487,19 +463,7 @@ export const AlgorithmsSetting = (props) => {
                     }
                     return true;
                 });
-                element = (React.createElement(React.Fragment, null,
-                    React.createElement(AlgorithmWrapper, { mode: mode },
-                        React.createElement(RequiredLabel, Object.assign({}, labelStyle),
-                            t(translations.interest.title).toString(),
-                            char),
-                        React.createElement(Select, { required: true, showSearch: true, focused: isShowErrorAlert, placeholder: t(translations.selectAnItem.title).toString(), style: styleNoBorderWFull, value: algo.interest, options: optionNotify, onChange: value => onChangeAlgorithm(algo, { interest: value }) })),
-                    React.createElement(AlgorithmWrapper, { mode: mode },
-                        React.createElement(Text, Object.assign({}, labelStyle),
-                            t(translations.last.title).toString(),
-                            char),
-                        React.createElement("div", { style: { display: 'flex', alignItems: 'center' } },
-                            React.createElement(InputNumber, { value: algo.last, width: 90, onChange: value => onChangeAlgorithm(algo, { last: value }), min: 1, max: 90, required: true }),
-                            React.createElement(Text, { color: isCDP ? (_e = THEME.token) === null || _e === void 0 ? void 0 : _e.colorIcon : undefined, style: { marginLeft: 8 } }, t(translations.days.title).toString())))));
+                element = (_jsxs(_Fragment, { children: [_jsxs(AlgorithmWrapper, { mode: mode, children: [_jsxs(RequiredLabel, { ...labelStyle, children: [t(translations.interest.title).toString(), char] }), _jsx(Select, { required: true, showSearch: true, focused: isShowErrorAlert, placeholder: t(translations.selectAnItem.title).toString(), style: styleNoBorderWFull, value: algo.interest, options: optionNotify, onChange: value => onChangeAlgorithm(algo, { interest: value }) })] }), _jsxs(AlgorithmWrapper, { mode: mode, children: [_jsxs(Text, { ...labelStyle, children: [t(translations.last.title).toString(), char] }), _jsxs("div", { style: { display: 'flex', alignItems: 'center' }, children: [_jsx(InputNumber, { value: algo.last, width: 90, onChange: value => onChangeAlgorithm(algo, { last: value }), min: 1, max: 90, required: true }), _jsx(Text, { color: isCDP ? THEME.token?.colorIcon : undefined, style: { marginLeft: 8 }, children: t(translations.days.title).toString() })] })] })] }));
                 break;
             }
             case 'get_top': {
@@ -510,72 +474,29 @@ export const AlgorithmsSetting = (props) => {
                     field: algo.sort_by,
                 });
                 const options = buildOptionAttrArchive(listAttribute.filter(({ isSort }) => isSort === 1), algo.sort_by);
-                element = (React.createElement(React.Fragment, null,
-                    React.createElement(AlgorithmWrapper, { mode: mode },
-                        React.createElement(RequiredLabel, Object.assign({}, labelStyle),
-                            t(translations.with.title).toLowerCase(),
-                            char),
-                        React.createElement(Select, { required: true, showSearch: true, disabled: isDisable, status: errorMessage ? 'error' : '', errorMsg: errorMessage, focused: isShowErrorAlert, placeholder: t(translations.selectAnItem.title).toString(), style: styleNoBorderWFull, value: algo.sort_by, options: options, onChange: value => onChangeAlgorithm(algo, { sort_by: value }) })),
-                    React.createElement(AlgorithmWrapper, { mode: mode },
-                        React.createElement(Text, Object.assign({}, labelStyle),
-                            t(translations.sortBy.title).toLowerCase(),
-                            char),
-                        React.createElement(Select, { showSearch: true, placeholder: t(translations.selectAnItem.title).toString(), style: styleNoBorderWFull, value: algo.sort_type, options: SORT_TYPE_OPTIONS, onChange: value => onChangeAlgorithm(algo, { sort_type: value }) }))));
+                element = (_jsxs(_Fragment, { children: [_jsxs(AlgorithmWrapper, { mode: mode, children: [_jsxs(RequiredLabel, { ...labelStyle, children: [t(translations.with.title).toLowerCase(), char] }), _jsx(Select, { required: true, showSearch: true, disabled: isDisable, status: errorMessage ? 'error' : '', errorMsg: errorMessage, focused: isShowErrorAlert, placeholder: t(translations.selectAnItem.title).toString(), style: styleNoBorderWFull, value: algo.sort_by, options: options, onChange: value => onChangeAlgorithm(algo, { sort_by: value }) })] }), _jsxs(AlgorithmWrapper, { mode: mode, children: [_jsxs(Text, { ...labelStyle, children: [t(translations.sortBy.title).toLowerCase(), char] }), _jsx(Select, { showSearch: true, placeholder: t(translations.selectAnItem.title).toString(), style: styleNoBorderWFull, value: algo.sort_type, options: SORT_TYPE_OPTIONS, onChange: value => onChangeAlgorithm(algo, { sort_type: value }) })] })] }));
                 break;
             }
             case 'trending': {
-                element = (React.createElement(React.Fragment, null,
-                    React.createElement(AlgorithmWrapper, { mode: mode },
-                        React.createElement(RequiredLabel, Object.assign({}, labelStyle),
-                            t(translations.by.title).toLowerCase(),
-                            char),
-                        React.createElement(Select, { required: true, showSearch: true, focused: isShowErrorAlert, placeholder: t(translations.selectAnItem.title).toString(), style: styleNoBorderWFull, value: algo.by, options: ARTICLE_TREND_BY_OPTIONS, onChange: value => onChangeAlgorithm(algo, { by: value }) })),
-                    React.createElement(AlgorithmWrapper, { mode: mode },
-                        React.createElement(RequiredLabel, Object.assign({}, labelStyle),
-                            t(translations.in.title).toLowerCase(),
-                            char),
-                        React.createElement(Select, { required: true, showSearch: true, focused: isShowErrorAlert, placeholder: t(translations.selectAnItem.title).toString(), style: styleNoBorderWFull, value: algo.in, options: ARTICLE_TREND_IN_OPTIONS, onChange: value => onChangeAlgorithm(algo, { in: value }) })),
-                    algo.by === 'compare_with_before' && (React.createElement(AlgorithmWrapper, { mode: mode },
-                        React.createElement("div", null),
-                        React.createElement(Space, { direction: "vertical", size: 10 },
-                            React.createElement(Select, { showSearch: true, defaultValue: OPERATOR_OPTIONS.GREATER_THAN.value, style: limitWidthStyle, value: algo.operator, options: Object.values(OPERATOR_OPTIONS), onChange: value => onChangeAlgorithm(algo, {
-                                    operator: value,
-                                    rangeType: ['value', 'value'],
-                                    rangeValue: [0, 0],
-                                }) }),
-                            isOperatorInRange(algo.operator) ? (React.createElement(React.Fragment, null,
-                                React.createElement("div", { style: styleGrid },
-                                    React.createElement(Select, { defaultValue: COMPARE_TYPE.VALUE.value, style: limitWidthStyle, value: algo.rangeType[0], options: Object.values(COMPARE_TYPE), onChange: value => {
-                                            const [fromValue, toValue] = algo.rangeValue;
-                                            onChangeAlgorithm(algo, {
-                                                rangeType: [value, value],
-                                                rangeValue: [fromValue, toValue],
-                                            });
-                                        } }),
-                                    React.createElement(InputNumber, { width: "100%", min: 0, required: true, defaultValue: 0, value: algo.rangeValue[0], onChange: value => onChangeAlgorithm(algo, { rangeValue: [value, algo.rangeValue[1]] }) })),
-                                React.createElement("div", { style: styleGrid },
-                                    React.createElement(Select, { defaultValue: COMPARE_TYPE.VALUE.value, style: limitWidthStyle, value: algo.rangeType[1], options: Object.values(COMPARE_TYPE), onChange: value => {
-                                            const [fromValue, toValue] = algo.rangeValue;
-                                            onChangeAlgorithm(algo, {
-                                                rangeType: [value, value],
-                                                rangeValue: [fromValue, toValue],
-                                            });
-                                        } }),
-                                    React.createElement(InputNumber, { width: "100%", min: 0, required: true, defaultValue: 0, value: algo.rangeValue[1], onChange: value => onChangeAlgorithm(algo, { rangeValue: [algo.rangeValue[0], value] }) })))) : (React.createElement("div", { style: styleGrid },
-                                React.createElement(Select, { defaultValue: COMPARE_TYPE.VALUE.value, style: limitWidthStyle, value: algo.compareType, options: Object.values(COMPARE_TYPE), onChange: value => {
-                                        onChangeAlgorithm(algo, { compareType: value });
-                                    } }),
-                                React.createElement(InputNumber, { width: "100%", min: 0, required: true, defaultValue: 0, value: algo.compareValue, onChange: value => onChangeAlgorithm(algo, { compareValue: value }) })))))),
-                    React.createElement(AlgorithmWrapper, { mode: mode },
-                        React.createElement(RequiredLabel, Object.assign({}, labelStyle),
-                            t(translations.sortBy.title).toLowerCase(),
-                            char),
-                        React.createElement(Select, { required: true, showSearch: true, focused: isShowErrorAlert, placeholder: t(translations.selectAnItem.title).toString(), style: styleNoBorderWFull, value: algo.sort_by, options: ARTICLE_TREND_SORT_BY_OPTIONS, onChange: value => onChangeAlgorithm(algo, { sort_by: value }) })),
-                    React.createElement(AlgorithmWrapper, { mode: mode },
-                        React.createElement(RequiredLabel, Object.assign({}, labelStyle),
-                            t(translations.sortOrder.title).toLowerCase(),
-                            char),
-                        React.createElement(Select, { required: true, showSearch: true, focused: isShowErrorAlert, placeholder: t(translations.selectAnItem.title).toString(), style: styleNoBorderWFull, value: algo.sort_order, options: SORT_TYPE_OPTIONS, onChange: value => onChangeAlgorithm(algo, { sort_order: value }) }))));
+                element = (_jsxs(_Fragment, { children: [_jsxs(AlgorithmWrapper, { mode: mode, children: [_jsxs(RequiredLabel, { ...labelStyle, children: [t(translations.by.title).toLowerCase(), char] }), _jsx(Select, { required: true, showSearch: true, focused: isShowErrorAlert, placeholder: t(translations.selectAnItem.title).toString(), style: styleNoBorderWFull, value: algo.by, options: ARTICLE_TREND_BY_OPTIONS, onChange: value => onChangeAlgorithm(algo, { by: value }) })] }), _jsxs(AlgorithmWrapper, { mode: mode, children: [_jsxs(RequiredLabel, { ...labelStyle, children: [t(translations.in.title).toLowerCase(), char] }), _jsx(Select, { required: true, showSearch: true, focused: isShowErrorAlert, placeholder: t(translations.selectAnItem.title).toString(), style: styleNoBorderWFull, value: algo.in, options: ARTICLE_TREND_IN_OPTIONS, onChange: value => onChangeAlgorithm(algo, { in: value }) })] }), algo.by === 'compare_with_before' && (_jsxs(AlgorithmWrapper, { mode: mode, children: [_jsx("div", {}), _jsxs(Space, { direction: "vertical", size: 10, children: [_jsx(Select, { showSearch: true, defaultValue: OPERATOR_OPTIONS.GREATER_THAN.value, style: limitWidthStyle, value: algo.operator, options: Object.values(OPERATOR_OPTIONS), onChange: value => onChangeAlgorithm(algo, {
+                                                operator: value,
+                                                rangeType: ['value', 'value'],
+                                                rangeValue: [0, 0],
+                                            }) }), isOperatorInRange(algo.operator) ? (_jsxs(_Fragment, { children: [_jsxs("div", { style: styleGrid, children: [_jsx(Select, { defaultValue: COMPARE_TYPE.VALUE.value, style: limitWidthStyle, value: algo.rangeType[0], options: Object.values(COMPARE_TYPE), onChange: value => {
+                                                                const [fromValue, toValue] = algo.rangeValue;
+                                                                onChangeAlgorithm(algo, {
+                                                                    rangeType: [value, value],
+                                                                    rangeValue: [fromValue, toValue],
+                                                                });
+                                                            } }), _jsx(InputNumber, { width: "100%", min: 0, required: true, defaultValue: 0, value: algo.rangeValue[0], onChange: value => onChangeAlgorithm(algo, { rangeValue: [value, algo.rangeValue[1]] }) })] }), _jsxs("div", { style: styleGrid, children: [_jsx(Select, { defaultValue: COMPARE_TYPE.VALUE.value, style: limitWidthStyle, value: algo.rangeType[1], options: Object.values(COMPARE_TYPE), onChange: value => {
+                                                                const [fromValue, toValue] = algo.rangeValue;
+                                                                onChangeAlgorithm(algo, {
+                                                                    rangeType: [value, value],
+                                                                    rangeValue: [fromValue, toValue],
+                                                                });
+                                                            } }), _jsx(InputNumber, { width: "100%", min: 0, required: true, defaultValue: 0, value: algo.rangeValue[1], onChange: value => onChangeAlgorithm(algo, { rangeValue: [algo.rangeValue[0], value] }) })] })] })) : (_jsxs("div", { style: styleGrid, children: [_jsx(Select, { defaultValue: COMPARE_TYPE.VALUE.value, style: limitWidthStyle, value: algo.compareType, options: Object.values(COMPARE_TYPE), onChange: value => {
+                                                        onChangeAlgorithm(algo, { compareType: value });
+                                                    } }), _jsx(InputNumber, { width: "100%", min: 0, required: true, defaultValue: 0, value: algo.compareValue, onChange: value => onChangeAlgorithm(algo, { compareValue: value }) })] }))] })] })), _jsxs(AlgorithmWrapper, { mode: mode, children: [_jsxs(RequiredLabel, { ...labelStyle, children: [t(translations.sortBy.title).toLowerCase(), char] }), _jsx(Select, { required: true, showSearch: true, focused: isShowErrorAlert, placeholder: t(translations.selectAnItem.title).toString(), style: styleNoBorderWFull, value: algo.sort_by, options: ARTICLE_TREND_SORT_BY_OPTIONS, onChange: value => onChangeAlgorithm(algo, { sort_by: value }) })] }), _jsxs(AlgorithmWrapper, { mode: mode, children: [_jsxs(RequiredLabel, { ...labelStyle, children: [t(translations.sortOrder.title).toLowerCase(), char] }), _jsx(Select, { required: true, showSearch: true, focused: isShowErrorAlert, placeholder: t(translations.selectAnItem.title).toString(), style: styleNoBorderWFull, value: algo.sort_order, options: SORT_TYPE_OPTIONS, onChange: value => onChangeAlgorithm(algo, { sort_order: value }) })] })] }));
                 break;
             }
             default: {
@@ -608,7 +529,6 @@ export const AlgorithmsSetting = (props) => {
     const renderAlgorithmOptions = useMemo(() => {
         const groupOptions = [];
         listAlgoByTypes.forEach((algosByType = [], type) => {
-            var _a;
             // Temporarily hide
             const draftAlgosByType = [...algosByType].filter(({ value }) => !['recent_high_ctrs', 'collaborative_filtering'].includes(value)) || [];
             const numAlgoSelectedByType = draftAlgosByType.reduce((sum, current) => {
@@ -617,121 +537,81 @@ export const AlgorithmsSetting = (props) => {
                 return sum;
             }, 0);
             const isExpaned = expandedAlgoTypes.includes(type);
-            groupOptions.push(React.createElement(SelectMultOptGroup, { label: React.createElement(React.Fragment, null,
-                    !!groupOptions.length && (React.createElement(DividerDot, { style: { margin: '0px 0px 8px', borderTop: '8px' } })),
-                    React.createElement("div", { style: {
-                            display: 'flex',
-                            justifyContent: 'space-between',
-                            alignItems: 'center',
-                            cursor: 'pointer',
-                            color: (_a = THEME.token) === null || _a === void 0 ? void 0 : _a.colorIcon,
-                        }, onClick: () => {
-                            if (isExpaned) {
-                                setExpandAlgoTypes(oldExpand => oldExpand.filter(t => t !== type));
-                                return;
-                            }
-                            setExpandAlgoTypes(oldExpand => [...oldExpand, type]);
-                        } },
-                        React.createElement("div", null, `${type} (${numAlgoSelectedByType}/${draftAlgosByType.length})`),
-                        React.createElement(Icon, { type: "icon-ants-expand-more", size: 16, style: {
-                                transition: 'all 0.15s ease-in',
-                                transform: `rotate(${isExpaned ? 180 : 0}deg)`,
-                            } }))), 
-                // eslint-disable-next-line react/no-array-index-key
-                key: type }, draftAlgosByType.map(algo => (React.createElement(SelectMultiOption, { style: !isExpaned
-                    ? {
-                        transition: 'all 0.15s ease-in',
-                        minHeight: '0px',
-                        maxHeight: '0px',
-                        paddingTop: '0px',
-                        paddingBottom: '0px',
-                        overflow: 'hidden',
-                    }
-                    : { transition: 'all 0.15s ease-in' }, key: algo.value },
-                React.createElement(SelectOptionLabel, { label: algo.label, checked: selectedAlgos.includes(algo.value), onClick: () => onChangeCheckedAlgo(algo.value), disabled: selectedAlgos.length >= 3 && !selectedAlgos.includes(algo.value) }))))));
+            groupOptions.push(_jsx(SelectMultOptGroup, { label: _jsxs(_Fragment, { children: [!!groupOptions.length && (_jsx(DividerDot, { style: { margin: '0px 0px 8px', borderTop: '8px' } })), _jsxs("div", { style: {
+                                display: 'flex',
+                                justifyContent: 'space-between',
+                                alignItems: 'center',
+                                cursor: 'pointer',
+                                color: THEME.token?.colorIcon,
+                            }, onClick: () => {
+                                if (isExpaned) {
+                                    setExpandAlgoTypes(oldExpand => oldExpand.filter(t => t !== type));
+                                    return;
+                                }
+                                setExpandAlgoTypes(oldExpand => [...oldExpand, type]);
+                            }, children: [_jsx("div", { children: `${type} (${numAlgoSelectedByType}/${draftAlgosByType.length})` }), _jsx(Icon, { type: "icon-ants-expand-more", size: 16, style: {
+                                        transition: 'all 0.15s ease-in',
+                                        transform: `rotate(${isExpaned ? 180 : 0}deg)`,
+                                    } })] })] }), children: draftAlgosByType.map(algo => (_jsx(SelectMultiOption, { style: !isExpaned
+                        ? {
+                            transition: 'all 0.15s ease-in',
+                            minHeight: '0px',
+                            maxHeight: '0px',
+                            paddingTop: '0px',
+                            paddingBottom: '0px',
+                            overflow: 'hidden',
+                        }
+                        : { transition: 'all 0.15s ease-in' }, children: _jsx(SelectOptionLabel, { label: algo.label, checked: selectedAlgos.includes(algo.value), onClick: () => onChangeCheckedAlgo(algo.value), disabled: selectedAlgos.length >= 3 && !selectedAlgos.includes(algo.value) }) }, algo.value))) }, type));
         });
         return groupOptions;
     }, [onChangeCheckedAlgo, selectedAlgos, listAlgoByTypes, expandedAlgoTypes]);
     const renderTabContent = () => {
-        var _a, _b, _c;
         try {
             switch (activeTab) {
                 case ALGORITHM_TABS.ALGORITHMS.value:
-                    return (React.createElement(React.Fragment, null,
-                        itemTypeId === PRODUCT_ITEM_TYPE_ID || itemTypeName === ITEM_TYPE_NAME.ARTICLE ? (React.createElement(SettingWrapper, { label: t(translations.sort.title), labelStyle: {
-                                fontWeight: isCDP ? 'normal' : 'bold',
-                                width: isCDP ? LABEL_WIDTH : 'auto',
-                            }, labelColor: isCDP ? (_a = THEME.token) === null || _a === void 0 ? void 0 : _a.colorText : undefined, containerStyle: {
-                                padding: '5px 0px 15px',
-                                justifyContent: isCDP ? 'flex-start' : 'space-between',
-                            } },
-                            React.createElement(RadioGroup, { options: Object.values(SORT_OPTIONS), defaultValue: SORT_OPTIONS.MIX.value, value: algorithms.sort || 'mix', onChange: value => onChangeSort(value) }))) : null,
-                        React.createElement(DragDropContext, { onDragEnd: onDragEndAlgorithms },
-                            React.createElement(Droppable, { droppableId: "algorithms" }, provided => (React.createElement("div", Object.assign({ ref: provided.innerRef }, provided.droppableProps),
-                                algorithms.value.map((algo, index) => (React.createElement(Draggable, { key: algo.value, draggableId: algo.value, index: index }, (provided, snapshot) => {
-                                    var _a, _b, _c;
-                                    return (React.createElement("div", Object.assign({}, provided.draggableProps, { style: Object.assign(Object.assign(Object.assign({}, provided.draggableProps.style), { backgroundColor: (_a = THEME.token) === null || _a === void 0 ? void 0 : _a.bw0 }), (snapshot.isDragging
-                                            ? {
-                                                border: '1px solid #666',
-                                                borderRadius: '2px',
-                                            }
-                                            : {})), ref: provided.innerRef }),
-                                        React.createElement(AlgorithmWrapper, { mode: mode },
-                                            React.createElement("div", { style: {
-                                                    display: 'flex',
-                                                    alignItems: 'center',
-                                                    gap: isCDP ? 12 : 0,
-                                                    justifyContent: isCDP
-                                                        ? 'flex-start'
-                                                        : (algorithms === null || algorithms === void 0 ? void 0 : algorithms.sort) === SORT_OPTIONS.ORDER.value
-                                                            ? 'space-between'
-                                                            : 'flex-end',
-                                                } },
-                                                React.createElement("div", Object.assign({ style: {
-                                                        height: 16,
-                                                        display: (algorithms === null || algorithms === void 0 ? void 0 : algorithms.sort) === SORT_OPTIONS.ORDER.value
-                                                            ? 'block'
-                                                            : 'none',
-                                                    } }, provided.dragHandleProps),
-                                                    React.createElement(Icon, { type: "icon-ants-double-three-dots", size: 16, style: { opacity: 0.4, color: (_b = THEME.token) === null || _b === void 0 ? void 0 : _b.colorIcon } })),
-                                                React.createElement(Text, Object.assign({}, labelStyle, { style: { marginRight: 8, textAlign: 'left' } }), (_c = mapListAlgo[algo.value]) === null || _c === void 0 ? void 0 :
-                                                    _c.label,
-                                                    char)),
-                                            React.createElement(InputNumber, { value: algo.quantity, width: 90, onChange: value => onChangeAlgorithm(algo, { quantity: value }), min: 1, max: 30, required: true }),
-                                            algorithms.value.length > 1 ? (React.createElement(Button, { onClick: () => onRemoveAlgo(algo), type: "text", icon: React.createElement(Icon, { type: "icon-ants-remove-slim", size: 15 }), style: { alignSelf: 'center' } })) : null),
-                                        renderAlgorithmBy(algo),
-                                        index < algorithms.value.length - 1 && !snapshot.isDragging ? (React.createElement(Divider, { dashed: true, style: { margin: '16px 10px' } })) : null));
-                                }))),
-                                provided.placeholder)))),
-                        itemTypeId === PRODUCT_ITEM_TYPE_ID || itemTypeName === ITEM_TYPE_NAME.ARTICLE ? (React.createElement("div", { style: { marginTop: 16 } }, isShowSelect ? (React.createElement(SelectMulti, { open: isShowDropdownSelect, mode: "multiple", label: t(translations.selectAlgorithms.title), placeholder: t(translations.multiSelectAlgorithms.title).toString(), 
-                            // khong dung onChange ma dung onClick cua SelectOptionLabel
-                            // onChange={() => {}}
-                            placement: "topLeft", dropdownRender: menu => (React.createElement(React.Fragment, null,
-                                menu,
-                                React.createElement(Divider, { style: { margin: '8px 0px' } }),
-                                React.createElement("div", { style: { margin: 8, display: 'flex', alignItems: 'center' } },
-                                    React.createElement(Button, { onClick: onApplySelect, disabled: selectedAlgos.length === 0, type: "primary" }, t(translations.apply.title).toString()),
-                                    React.createElement(Button, { onClick: () => onChangeDropdownVisible(false), style: { marginLeft: 8 } }, t(translations.cancel.title).toString())))), 
-                            // or focus + blur
-                            onDropdownVisibleChange: onChangeDropdownVisible }, renderAlgorithmOptions)) : (React.createElement(Button, { type: "text", onClick: onChangeShowSelect, disabled: ranking.algorithms.value.length >= 3 },
-                            "+ ",
-                            t(translations.addAlgorithms.title).toString())))) : null));
+                    return (_jsxs(_Fragment, { children: [itemTypeId === PRODUCT_ITEM_TYPE_ID || itemTypeName === ITEM_TYPE_NAME.ARTICLE ? (_jsx(SettingWrapper, { label: t(translations.sort.title), labelStyle: {
+                                    fontWeight: isCDP ? 'normal' : 'bold',
+                                    width: isCDP ? LABEL_WIDTH : 'auto',
+                                }, labelColor: isCDP ? THEME.token?.colorText : undefined, containerStyle: {
+                                    padding: '5px 0px 15px',
+                                    justifyContent: isCDP ? 'flex-start' : 'space-between',
+                                }, children: _jsx(RadioGroup, { options: Object.values(SORT_OPTIONS), defaultValue: SORT_OPTIONS.MIX.value, value: algorithms.sort || 'mix', onChange: value => onChangeSort(value) }) })) : null, _jsx(DragDropContext, { onDragEnd: onDragEndAlgorithms, children: _jsx(Droppable, { droppableId: "algorithms", children: provided => (_jsxs("div", { ref: provided.innerRef, ...provided.droppableProps, children: [algorithms.value.map((algo, index) => (_jsx(Draggable, { draggableId: algo.value, index: index, children: (provided, snapshot) => (_jsxs("div", { ...provided.draggableProps, style: {
+                                                        ...provided.draggableProps.style,
+                                                        backgroundColor: THEME.token?.bw0,
+                                                        ...(snapshot.isDragging
+                                                            ? {
+                                                                border: '1px solid #666',
+                                                                borderRadius: '2px',
+                                                            }
+                                                            : {}),
+                                                    }, ref: provided.innerRef, children: [_jsxs(AlgorithmWrapper, { mode: mode, children: [_jsxs("div", { style: {
+                                                                        display: 'flex',
+                                                                        alignItems: 'center',
+                                                                        gap: isCDP ? 12 : 0,
+                                                                        justifyContent: isCDP
+                                                                            ? 'flex-start'
+                                                                            : algorithms?.sort === SORT_OPTIONS.ORDER.value
+                                                                                ? 'space-between'
+                                                                                : 'flex-end',
+                                                                    }, children: [_jsx("div", { style: {
+                                                                                height: 16,
+                                                                                display: algorithms?.sort === SORT_OPTIONS.ORDER.value
+                                                                                    ? 'block'
+                                                                                    : 'none',
+                                                                            }, ...provided.dragHandleProps, children: _jsx(Icon, { type: "icon-ants-double-three-dots", size: 16, style: { opacity: 0.4, color: THEME.token?.colorIcon } }) }), _jsxs(Text, { ...labelStyle, style: { marginRight: 8, textAlign: 'left' }, children: [mapListAlgo[algo.value]?.label, char] })] }), _jsx(InputNumber, { value: algo.quantity, width: 90, onChange: value => onChangeAlgorithm(algo, { quantity: value }), min: 1, max: 30, required: true }), algorithms.value.length > 1 ? (_jsx(Button, { onClick: () => onRemoveAlgo(algo), type: "text", icon: _jsx(Icon, { type: "icon-ants-remove-slim", size: 15 }), style: { alignSelf: 'center' } })) : null] }), renderAlgorithmBy(algo), index < algorithms.value.length - 1 && !snapshot.isDragging ? (_jsx(Divider, { dashed: true, style: { margin: '16px 10px' } })) : null] })) }, algo.value))), provided.placeholder] })) }) }), itemTypeId === PRODUCT_ITEM_TYPE_ID || itemTypeName === ITEM_TYPE_NAME.ARTICLE ? (_jsx("div", { style: { marginTop: 16 }, children: isShowSelect ? (_jsx(SelectMulti, { open: isShowDropdownSelect, mode: "multiple", label: t(translations.selectAlgorithms.title), placeholder: t(translations.multiSelectAlgorithms.title).toString(), 
+                                    // khong dung onChange ma dung onClick cua SelectOptionLabel
+                                    // onChange={() => {}}
+                                    placement: "topLeft", dropdownRender: menu => (_jsxs(_Fragment, { children: [menu, _jsx(Divider, { style: { margin: '8px 0px' } }), _jsxs("div", { style: { margin: 8, display: 'flex', alignItems: 'center' }, children: [_jsx(Button, { onClick: onApplySelect, disabled: selectedAlgos.length === 0, type: "primary", children: t(translations.apply.title).toString() }), _jsx(Button, { onClick: () => onChangeDropdownVisible(false), style: { marginLeft: 8 }, children: t(translations.cancel.title).toString() })] })] })), 
+                                    // or focus + blur
+                                    onDropdownVisibleChange: onChangeDropdownVisible, children: renderAlgorithmOptions })) : (_jsxs(Button, { type: "text", onClick: onChangeShowSelect, disabled: ranking.algorithms.value.length >= 3, children: ["+ ", t(translations.addAlgorithms.title).toString()] })) })) : null] }));
                 case ALGORITHM_TABS.FILTERS.value:
-                    return (React.createElement("div", { style: {
+                    return (_jsxs("div", { style: {
                             display: 'grid',
                             gridTemplateColumns: 'repeat(2, minmax(0, 1fr))',
                             rowGap: '20px',
                             columnGap: '40px',
                             alignItems: 'center',
-                        } },
-                        React.createElement(Text, { color: isCDP ? (_b = THEME.token) === null || _b === void 0 ? void 0 : _b.colorText : undefined, style: { fontWeight: 'bold' } }, itemTypeName === ITEM_TYPE_NAME.ARTICLE ? 'Article Filters' : 'Product Filters'),
-                        React.createElement(Text, { color: isCDP ? (_c = THEME.token) === null || _c === void 0 ? void 0 : _c.colorText : undefined, style: { fontWeight: 'bold' } }, "Hide"),
-                        listFilter.map(filter => {
-                            var _a;
-                            return (React.createElement(React.Fragment, { key: filter.value },
-                                React.createElement(Text, { color: isCDP ? (_a = THEME.token) === null || _a === void 0 ? void 0 : _a.colorText : undefined }, filter.label),
-                                React.createElement(Checkbox, { checked: algorithms.filters.includes(filter.value), onChange: () => onChangeFilters(filter.value) })));
-                        })));
+                        }, children: [_jsx(Text, { color: isCDP ? THEME.token?.colorText : undefined, style: { fontWeight: 'bold' }, children: itemTypeName === ITEM_TYPE_NAME.ARTICLE ? 'Article Filters' : 'Product Filters' }), _jsx(Text, { color: isCDP ? THEME.token?.colorText : undefined, style: { fontWeight: 'bold' }, children: "Hide" }), listFilter.map(filter => (_jsxs(React.Fragment, { children: [_jsx(Text, { color: isCDP ? THEME.token?.colorText : undefined, children: filter.label }), _jsx(Checkbox, { checked: algorithms.filters.includes(filter.value), onChange: () => onChangeFilters(filter.value) })] }, filter.value)))] }));
                 default:
                     return '';
             }
@@ -744,19 +624,15 @@ export const AlgorithmsSetting = (props) => {
             });
         }
     };
-    return (React.createElement(AlgorithmsSettingWrapper, { style: { marginTop: isHideRanking ? -20 : 0 } },
-        !isHideRanking && (React.createElement(SettingWrapper, { containerStyle: isCDP ? { justifyContent: 'flex-start' } : {}, label: t(translations.ranking.title), labelStyle: {
-                fontWeight: isCDP ? 'normal' : 'bold',
-                width: isCDP ? LABEL_WIDTH : 'auto',
-            }, labelColor: isCDP ? (_a = THEME.token) === null || _a === void 0 ? void 0 : _a.colorText : undefined },
-            React.createElement(RadioGroup, { options: Object.values(RANKING_TYPE), value: ranking.type, onChange: onChangeType }))),
-        ranking.type === RANKING_TYPE.ALGORITHMS.value ? (React.createElement(StyledTabs, { defaultActiveKey: activeTab, activeKey: activeTab, onChange: onChangeTabs, destroyInactiveTabPane: true }, Object.values(ALGORITHM_TABS)
-            .filter(({ value }) => {
-            if (itemTypeId === PRODUCT_ITEM_TYPE_ID || itemTypeName === ITEM_TYPE_NAME.ARTICLE) {
-                return true;
-            }
-            return value === ALGORITHM_TABS.ALGORITHMS.value;
-        })
-            .map(({ value, label }) => (React.createElement(TabPane, { tab: label, key: value }, renderTabContent()))))) : ranking.type === RANKING_TYPE.CUSTOM.value ? (React.createElement("div", { style: { marginTop: 16 } },
-            React.createElement(EditorScript, { expandModalLabel: t(translations.customCode.title).toString(), value: ranking.custom, onBlur: onBlurScript }))) : null));
+    return (_jsxs(AlgorithmsSettingWrapper, { style: { marginTop: isHideRanking ? -20 : 0 }, children: [!isHideRanking && (_jsx(SettingWrapper, { containerStyle: isCDP ? { justifyContent: 'flex-start' } : {}, label: t(translations.ranking.title), labelStyle: {
+                    fontWeight: isCDP ? 'normal' : 'bold',
+                    width: isCDP ? LABEL_WIDTH : 'auto',
+                }, labelColor: isCDP ? THEME.token?.colorText : undefined, children: _jsx(RadioGroup, { options: Object.values(RANKING_TYPE), value: ranking.type, onChange: onChangeType }) })), ranking.type === RANKING_TYPE.ALGORITHMS.value ? (_jsx(StyledTabs, { defaultActiveKey: activeTab, activeKey: activeTab, onChange: onChangeTabs, destroyInactiveTabPane: true, children: Object.values(ALGORITHM_TABS)
+                    .filter(({ value }) => {
+                    if (itemTypeId === PRODUCT_ITEM_TYPE_ID || itemTypeName === ITEM_TYPE_NAME.ARTICLE) {
+                        return true;
+                    }
+                    return value === ALGORITHM_TABS.ALGORITHMS.value;
+                })
+                    .map(({ value, label }) => (_jsx(TabPane, { tab: label, children: renderTabContent() }, value))) })) : ranking.type === RANKING_TYPE.CUSTOM.value ? (_jsx("div", { style: { marginTop: 16 }, children: _jsx(EditorScript, { expandModalLabel: t(translations.customCode.title).toString(), value: ranking.custom, onBlur: onBlurScript }) })) : null] }));
 };