@antscorp/antsomi-ui 1.3.5-beta.21 → 1.3.5-beta.211

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

@@ -0,0 +1,767 @@
+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;
+};
+/* eslint-disable @typescript-eslint/no-use-before-define */
+// Libraries
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import i18nInstance from '@antscorp/antsomi-ui/es/locales/i18n';
+import { DragDropContext, Draggable, Droppable } from 'react-beautiful-dnd';
+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';
+// Molecules
+import { RadioGroup, SelectMulti, SelectMultiOption, SelectOptionLabel, SelectV2 as Select, InputNumberWithLabel as InputNumber, SelectMultOptGroup, SelectEventAttribute, } from '@antscorp/antsomi-ui/es/components/molecules';
+import TabPane from 'antd/es/tabs/TabPane';
+import { SettingWrapper, EditorScript } from '../../molecules';
+// Styled
+import { AlgorithmsSettingWrapper, AlgorithmWrapper, StyledSelect, StyledTabs } from './styled';
+// Constants
+import { ALGORITHM_TABS, COMPARE_TYPE, DEFAULT_DISTANCE_ALGORITHM, MAX_RETARGET_SEARCH_BY, OPERATOR_OPTIONS, RANKING_TYPE, SORT_OPTIONS, INTEREST_OPTIONS, CATEGORY_OPTIONS, SORT_TYPE_OPTIONS, SIMILAR_CONTENT_OPTIONS, ARTICLE_TREND_BY_OPTIONS, ARTICLE_TREND_IN_OPTIONS, ARTICLE_TREND_SORT_BY_OPTIONS, EXCLUDE_ARTICLE_FILTER, DEFAULT_TRENDING_ALGORITHM, } from './constants';
+import { ITEM_TYPE_NAME, PRODUCT_ITEM_TYPE_ID, } from '@antscorp/antsomi-ui/es/constants/contentSource';
+import { THEME } from '@antscorp/antsomi-ui/es/constants';
+import { LABEL_WIDTH } from '../ContentSources/constants';
+// Utils
+import { reorder, handleError } from '@antscorp/antsomi-ui/es/utils';
+import { isExistKey, isOperatorInRange } from './utils';
+import { buildOptionAttrArchive, checkStatusAttr } from '../../molecules/AddDynamicContent/utils';
+import { buildOptionArchive, checkStatusCollection, isCheckStatusAttr, optionNotExitsValue, } from '../ContentSources/utils';
+// Services
+import { getListAlgorithmsBO, getListCollectionsBO, getListFiltersBO, } from '@antscorp/antsomi-ui/es/services/MediaTemplateDesign/BusinessObject';
+// Queries
+import { useGetListBO, useGetListAttributeBO, } from '@antscorp/antsomi-ui/es/queries/BusinessObject';
+// Selectors
+import { useSelectModeView, useSelectServiceAuth } from '../ContentSources/provider';
+const PATH = 'src/components/organism/AlgorithmsSetting/index.tsx';
+const styleNoBorderWFull = {
+    width: '100%',
+    borderLeftWidth: '0px',
+    borderRightWidth: '0px',
+    borderTop: '0px',
+};
+const styleGrid = {
+    display: 'grid',
+    gridTemplateColumns: 'repeat(2, minmax(0, 1fr))',
+    alignItems: 'flex-end',
+    gap: '0 8px',
+};
+export const AlgorithmsSetting = (props) => {
+    var _a;
+    const { data, itemTypeId, itemTypeName, isShowErrorAlert, journeySettings, onChange } = props;
+    // Translations
+    const { t } = i18nInstance;
+    // Selectors
+    const ranking = data !== null && data !== void 0 ? data : {};
+    const { algorithms = {
+        sort: 'mix',
+        value: [],
+        filters: [],
+    }, } = ranking;
+    const serviceAuth = useSelectServiceAuth();
+    const { url } = serviceAuth, restAuthInfo = __rest(serviceAuth, ["url"]);
+    const mode = useSelectModeView();
+    const isCDP = mode === 'CDP';
+    // Queries
+    const { data: listBO } = useGetListBO({
+        url: url,
+    }, restAuthInfo);
+    // States
+    const [listFilter, setListFilter] = useState([]);
+    const [listCollection, setListCollection] = useState([]);
+    const [selectedAlgos, setSelectedAlgos] = useState([]);
+    const [isShowSelect, setIsShowSelect] = useState(false);
+    const [isShowDropdownSelect, setIsShowDropdownSelect] = useState(false);
+    // const [activeType, setActiveType] = useState(RANKING_TYPE.ALGORITHMS.value);
+    const [activeTab, setActiveTab] = useState(ALGORITHM_TABS.ALGORITHMS.value);
+    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]);
+    useEffect(() => {
+        getListAlgorithms(itemTypeName);
+        getListFilters();
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [itemTypeName]);
+    useEffect(() => {
+        if (itemTypeId === 1 || itemTypeName === ITEM_TYPE_NAME.ARTICLE) {
+            getListCollections();
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [itemTypeId]);
+    // map algo redux
+    const mapAlgoSelected = useMemo(() => algorithms.value.reduce((acc, cur) => {
+        acc[cur.value] = cur;
+        return acc;
+    }, {}), [algorithms]);
+    // map list algo api
+    const mapListAlgo = useMemo(() => listAlgo.reduce((acc, cur) => {
+        acc[cur.value] = cur;
+        return acc;
+    }, {}), [listAlgo]);
+    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 : [];
+            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 initExpanedAlgoTypes = [];
+        const listAlgorithms = rows
+            .map((item) => {
+            if (item.triggerTypes.includes(journeySettings.triggerType)) {
+                initExpanedAlgoTypes.push(item.type);
+                return {
+                    type: item.type,
+                    value: item.value,
+                    label: item.label,
+                };
+            }
+            return item;
+        })
+            .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 })))) || [];
+                return [
+                    listAttr,
+                    listAttr.filter((each) => each.dataType === 'string' || each.dataType === 'text'),
+                ];
+            },
+        },
+    });
+    const getListFilters = () => __awaiter(void 0, void 0, void 0, function* () {
+        const { rows } = yield getListFiltersBO(serviceAuth);
+        const filters = rows
+            .map((item) => ({
+            value: item.value,
+            label: item.label,
+        }))
+            .filter((filter) => {
+            if (itemTypeName === ITEM_TYPE_NAME.ARTICLE) {
+                return EXCLUDE_ARTICLE_FILTER.includes(filter.value);
+            }
+            return true;
+        })
+            .map((each) => {
+            if (itemTypeName === ITEM_TYPE_NAME.ARTICLE && each.value === 'seen_products') {
+                return Object.assign(Object.assign({}, 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 filters = rows.map((item) => ({
+            value: item.value,
+            id: item.value,
+            label: item.label,
+            disabled: parseInt(item.model.status) === 4,
+            status: parseInt(item.model.status),
+        }));
+        setListCollection(filters);
+    });
+    // Handlers Algorithms
+    const onChangeType = (event) => {
+        try {
+            onChange(Object.assign(Object.assign({}, data), { type: event.target.value }));
+        }
+        catch (error) {
+            handleError(error, {
+                path: PATH,
+                name: onChangeType.name,
+                args: {},
+            });
+        }
+    };
+    const onChangeTabs = (tab) => {
+        setActiveTab(tab);
+    };
+    const onChangeCheckedAlgo = useCallback((val) => {
+        const selected = [...selectedAlgos];
+        const index = selected.findIndex(item => item === val);
+        if (index > -1) {
+            // uncheck
+            selected.splice(index, 1);
+        }
+        else {
+            // check
+            selected.push(val);
+        }
+        setSelectedAlgos(selected);
+    }, [selectedAlgos]);
+    const onChangeAlgorithm = (item, value, ignoreUndoAction) => {
+        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);
+            });
+            onChange(Object.assign(Object.assign({}, data), { algorithms: Object.assign(Object.assign({}, data.algorithms), { value: newListAlgo }) }));
+        }
+        catch (error) {
+            handleError(error, {
+                path: PATH,
+                name: onChangeAlgorithm.name,
+                args: {},
+            });
+        }
+    };
+    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 }) }));
+        }
+        catch (error) {
+            handleError(error, {
+                path: PATH,
+                name: onRemoveAlgo.name,
+                args: {},
+            });
+        }
+    };
+    const onApplySelect = () => {
+        setIsShowSelect(false);
+        setIsShowDropdownSelect(false);
+        // 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 }) }));
+    };
+    const onChangeDropdownVisible = (isOpen) => {
+        setIsShowDropdownSelect(isOpen);
+        // set checked based on redux selected when open & cancel
+        const selected = algorithms.value.map(item => item.value);
+        setSelectedAlgos(selected);
+    };
+    const onChangeShowSelect = () => {
+        setIsShowSelect(true);
+    };
+    // Handlers Filters
+    const onChangeFilters = (item) => {
+        try {
+            let newFilters = [...data.algorithms.filters];
+            if (newFilters.includes(item)) {
+                // uncheck
+                newFilters = newFilters.filter(filter => filter !== item);
+            }
+            else {
+                // check
+                newFilters = [...newFilters, item];
+            }
+            onChange(Object.assign(Object.assign({}, data), { algorithms: Object.assign(Object.assign({}, data.algorithms), { filters: newFilters }) }));
+        }
+        catch (error) {
+            handleError(error, {
+                path: PATH,
+                name: onRemoveAlgo.name,
+                args: {},
+            });
+        }
+    };
+    // Handlers Script
+    const onBlurScript = (_, editor) => {
+        try {
+            onChange(Object.assign(Object.assign({}, data), { custom: editor.getValue() }));
+        }
+        catch (error) {
+            handleError(error, {
+                path: PATH,
+                name: 'onBlurScript',
+                args: {},
+            });
+        }
+    };
+    const onChangeSort = (event) => {
+        try {
+            onChange(Object.assign(Object.assign({}, data), { algorithms: Object.assign(Object.assign({}, data.algorithms), { sort: event.target.value }) }));
+        }
+        catch (error) {
+            handleError(error, {
+                path: PATH,
+                name: 'onChangeSort',
+                args: {},
+            });
+        }
+    };
+    const renderAlgorithmBy = (algo) => {
+        var _a, _b, _c, _d, _e;
+        let element = null;
+        switch (algo.value) {
+            case 'viral_products': {
+                const { errorMessage, isDisable } = checkStatusCollection({
+                    listBO: listBO,
+                    itemTypeId,
+                    listCollection,
+                    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 }) })));
+                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 }) })));
+                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())))));
+                break;
+            }
+            case 'retarget_search': {
+                const { errorMessage, isDisable } = checkStatusAttr({
+                    listBO: listBO,
+                    itemTypeId,
+                    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: { width: '100%' }, 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())))));
+                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()))));
+                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: { width: '100%' }, 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: { width: '100%' }, 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: { width: '100%' }, 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: { width: '100%' }, 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: { width: '100%' }, 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: { width: '100%' }, 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, { isShowErrorAlert: isShowErrorAlert, journeySettings: journeySettings, eventMetadata: algo.with || {}, onChange: (eventMetaData, ignoreUndoAction) => onChangeAlgorithm(algo, { with: eventMetaData }, ignoreUndoAction) }))));
+                break;
+            }
+            case 'notify': {
+                const optionNotify = INTEREST_OPTIONS.filter(opt => {
+                    if (itemTypeName === ITEM_TYPE_NAME.ARTICLE) {
+                        return opt.value === 'wishlist';
+                    }
+                    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())))));
+                break;
+            }
+            case 'get_top': {
+                const { errorMessage, isDisable } = checkStatusAttr({
+                    listBO: listBO,
+                    itemTypeId,
+                    listAttribute,
+                    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 }) }))));
+                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: { width: '100%' }, 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: { width: '100%' }, 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: { width: '100%' }, 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: { width: '100%' }, 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 }) }))));
+                break;
+            }
+            default: {
+                element = null;
+                break;
+            }
+        }
+        return element;
+    };
+    const onDragEndAlgorithms = (result) => {
+        try {
+            const { source, destination } = result;
+            const { index: sourceIndex } = source || {};
+            const { index: destinationIndex } = destination || {};
+            if (destinationIndex != null) {
+                const reorderAlgorithms = reorder(algorithms.value, sourceIndex, destinationIndex);
+                onChange(produce(data, draft => {
+                    draft.algorithms.value = reorderAlgorithms;
+                }));
+            }
+        }
+        catch (error) {
+            handleError(error, {
+                path: PATH,
+                name: 'onDragEndAlgorithms',
+                args: {},
+            });
+        }
+    };
+    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) => {
+                if (selectedAlgos.includes(current.value))
+                    return ++sum;
+                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) }))))));
+        });
+        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), (_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));
+                case ALGORITHM_TABS.FILTERS.value:
+                    return (React.createElement("div", { style: {
+                            display: 'grid',
+                            gridTemplateColumns: 'repeat(2, minmax(0, 1fr))',
+                            rowGap: '20px',
+                            columnGap: '40px',
+                            alignItems: 'center',
+                            padding: '0px 8px 8px',
+                        } },
+                        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) })));
+                        })));
+                default:
+                    return '';
+            }
+        }
+        catch (error) {
+            handleError(error, {
+                path: PATH,
+                name: 'renderTabContent',
+                args: {},
+            });
+        }
+    };
+    return (React.createElement(AlgorithmsSettingWrapper, null,
+        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));
+};