@antscorp/antsomi-ui 1.3.5-beta.92 → 1.3.5-beta.921

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

@@ -0,0 +1,638 @@
+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';
+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';
+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 } 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';
+// 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 MAX_WIDTH = 150;
+const limitWidthStyle = {
+    width: '100%',
+    maxWidth: `${MAX_WIDTH}px`,
+};
+const styleNoBorderWFull = {
+    width: '100%',
+    maxWidth: `${MAX_WIDTH}px`,
+    borderLeftWidth: '0px',
+    borderRightWidth: '0px',
+    borderTop: '0px',
+};
+const styleGrid = {
+    display: 'grid',
+    gridTemplateColumns: 'repeat(2, minmax(0, 165px))',
+    alignItems: 'flex-end',
+    gap: '0 8px',
+};
+export const AlgorithmsSetting = (props) => {
+    const { data, itemTypeId, isHideRanking, itemTypeName, isShowErrorAlert, journeySettings, applyFor, onChange, } = props;
+    // Translations
+    const { t } = i18nInstance;
+    // Selectors
+    const ranking = data ?? {};
+    const { algorithms = {
+        sort: 'mix',
+        value: [],
+        filters: [],
+    }, } = ranking;
+    const serviceAuth = useSelectServiceAuth();
+    const { url, ...restAuthInfo } = serviceAuth;
+    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(() => ({
+        type: 'secondary',
+        isReverseMask: isCDP,
+        style: { textAlign: 'right', marginRight: isCDP ? 25 : 8 },
+        color: isCDP ? THEME.token?.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) => {
+            const algosByType = acc.get(algo.type) ?? [];
+            algosByType.push(algo);
+            return acc.set(algo.type, algosByType);
+        }, initalValue);
+    }, [listAlgo]);
+    // Services
+    const getListAlgorithms = async (itemTypeName) => {
+        const { rows } = await getListAlgorithmsBO(serviceAuth, { itemTypeName, applyFor });
+        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) {
+                const { rows = [] } = data || {};
+                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'),
+                ];
+            },
+        },
+    });
+    const getListFilters = async () => {
+        const { rows } = await 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 {
+                    ...each,
+                    label: 'Seen Articles',
+                };
+            }
+            return each;
+        });
+        setListFilter(filters);
+    };
+    const getListCollections = async () => {
+        const { rows } = await 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({
+                ...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] = {
+                    ...draft[index],
+                    ...value,
+                };
+            });
+            onChange({
+                ...data,
+                algorithms: {
+                    ...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({
+                ...data,
+                algorithms: {
+                    ...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
+                { ...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);
+        // 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({
+                ...data,
+                algorithms: {
+                    ...data.algorithms,
+                    filters: newFilters,
+                },
+            });
+        }
+        catch (error) {
+            handleError(error, {
+                path: PATH,
+                name: onRemoveAlgo.name,
+                args: {},
+            });
+        }
+    };
+    // Handlers Script
+    const onBlurScript = (_, editor) => {
+        try {
+            onChange({
+                ...data,
+                custom: editor.getValue(),
+            });
+        }
+        catch (error) {
+            handleError(error, {
+                path: PATH,
+                name: 'onBlurScript',
+                args: {},
+            });
+        }
+    };
+    const onChangeSort = (event) => {
+        try {
+            onChange({
+                ...data,
+                algorithms: {
+                    ...data.algorithms,
+                    sort: event.target.value,
+                },
+            });
+        }
+        catch (error) {
+            handleError(error, {
+                path: PATH,
+                name: 'onChangeSort',
+                args: {},
+            });
+        }
+    };
+    const renderAlgorithmBy = (algo) => {
+        let element = null;
+        switch (algo.value) {
+            case 'viral_products': {
+                const { errorMessage, isDisable } = checkStatusCollection({
+                    listBO: listBO,
+                    itemTypeId,
+                    listCollection,
+                    field: algo.by,
+                    checkDisable: true,
+                });
+                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 = (_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 = (_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': {
+                const { errorMessage, isDisable } = checkStatusAttr({
+                    listBO: listBO,
+                    itemTypeId,
+                    listAttribute: listAttributeRetarget,
+                    field: algo.by,
+                });
+                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 = (_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 = (_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 = (_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': {
+                const optionNotify = INTEREST_OPTIONS.filter(opt => {
+                    if (itemTypeName === ITEM_TYPE_NAME.ARTICLE) {
+                        return opt.value === 'wishlist';
+                    }
+                    return true;
+                });
+                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': {
+                const { errorMessage, isDisable } = checkStatusAttr({
+                    listBO: listBO,
+                    itemTypeId,
+                    listAttribute,
+                    field: algo.sort_by,
+                });
+                const options = buildOptionAttrArchive(listAttribute.filter(({ isSort }) => isSort === 1), algo.sort_by);
+                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 = (_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: {
+                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) => {
+            // 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(_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 = () => {
+        try {
+            switch (activeTab) {
+                case ALGORITHM_TABS.ALGORITHMS.value:
+                    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 (_jsxs("div", { style: {
+                            display: 'grid',
+                            gridTemplateColumns: 'repeat(2, minmax(0, 1fr))',
+                            rowGap: '20px',
+                            columnGap: '40px',
+                            alignItems: 'center',
+                        }, 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 '';
+            }
+        }
+        catch (error) {
+            handleError(error, {
+                path: PATH,
+                name: 'renderTabContent',
+                args: {},
+            });
+        }
+    };
+    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] }));
+};