@antscorp/antsomi-ui 2.0.13 → 2.0.15

package/es/components/organism/FilterSetting/components/common/InputOrSelect/index.js

@@ -1,27 +1,7 @@
-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;
-};
-var _a, _b, _c, _d, _e;
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 /* eslint-disable @typescript-eslint/no-use-before-define */
 // Libraries
-import React, { useState, useEffect, useMemo } from 'react';
+import { useState, useEffect, useMemo } from 'react';
 import styled, { css } from 'styled-components';
 import i18nInstance from '@antscorp/antsomi-ui/es/locales/i18n';
 import { AutoComplete, Input } from 'antd';
@@ -70,7 +50,11 @@ export const InputOrSelect = props => {
             customer_metadata: metaData.customer,
         };
         setIsModalVisible(false);
-        onChangeMultipleValue(Object.assign(Object.assign({}, mapMetaData), { value: null, value_type: valueType }));
+        onChangeMultipleValue({
+            ...mapMetaData,
+            value: null,
+            value_type: valueType,
+        });
     };
     const handleCancel = () => {
         setIsModalVisible(false);
@@ -87,7 +71,10 @@ export const InputOrSelect = props => {
             value_type: 'normal',
             customer_metadata: DEFAULT_CUSTOMER_META_DATA,
             visitor_metadata: DEFAULT_VISITOR_META_DATA,
-            event_metadata: Object.assign(Object.assign({}, DEFAULT_EVENT_META_DATA), { useBo }),
+            event_metadata: {
+                ...DEFAULT_EVENT_META_DATA,
+                useBo,
+            },
         });
     };
     const onDeselect = () => {
@@ -95,11 +82,13 @@ export const InputOrSelect = props => {
             value_type: 'normal',
             customer_metadata: DEFAULT_CUSTOMER_META_DATA,
             visitor_metadata: DEFAULT_VISITOR_META_DATA,
-            event_metadata: Object.assign(Object.assign({}, DEFAULT_EVENT_META_DATA), { useBo }),
+            event_metadata: {
+                ...DEFAULT_EVENT_META_DATA,
+                useBo,
+            },
         });
     };
     const renderInput = (type) => {
-        var _a;
         let element = null;
         if (isModalVisible ||
             (['event', 'visitor', 'customer'].includes(type) &&
@@ -107,35 +96,30 @@ export const InputOrSelect = props => {
                     eventMetadata.item_property_name ||
                     customerMetadata.item_property_name ||
                     visitorMetadata.item_property_name))) {
-            element = (React.createElement("div", { style: {
+            element = (_jsxs("div", { style: {
                     display: 'flex',
                     alignItems: 'center',
                     justifyContent: 'space-between',
                     height: 32,
                     padding: '4px 12px 4px 4px',
-                    borderBottom: `1px solid ${(_a = THEME.token) === null || _a === void 0 ? void 0 : _a.gray5}`,
-                } },
-                React.createElement("div", { style: { width: '100%', cursor: 'pointer' }, onClick: showModal },
-                    React.createElement(Tag, null, eventMetadata.useBo
-                        ? eventMetadata.field_label_bo || eventMetadata.field_code_bo
-                        : (valueType === EVENT.value &&
-                            (eventMetadata.item_property_label || eventMetadata.item_property_name)) ||
-                            (valueType === CUSTOMER.value && customerMetadata.item_property_name) ||
-                            (valueType === VISITOR.value && visitorMetadata.item_property_name))),
-                React.createElement(Icon, { type: "icon-ants-remove", style: { fontSize: 10, color: '#222', cursor: 'pointer' }, onClick: onDeselect })));
+                    borderBottom: `1px solid ${THEME.token?.gray5}`,
+                }, children: [_jsx("div", { style: { width: '100%', cursor: 'pointer' }, onClick: showModal, children: _jsx(Tag, { children: eventMetadata.useBo
+                                ? eventMetadata.field_label_bo || eventMetadata.field_code_bo
+                                : (valueType === EVENT.value &&
+                                    (eventMetadata.item_property_label || eventMetadata.item_property_name)) ||
+                                    (valueType === CUSTOMER.value && customerMetadata.item_property_name) ||
+                                    (valueType === VISITOR.value && visitorMetadata.item_property_name) }) }), _jsx(Icon, { type: "icon-ants-remove", style: { fontSize: 10, color: '#222', cursor: 'pointer' }, onClick: onDeselect })] }));
         }
         else {
-            element = (React.createElement(StyledSelect, { mode: "multiple", options: [{ value: '', label: t(translations.orSelectAField.title) }], notFoundContent: null, onSelect: showModal, style: { width: '100%', borderTop: 'none', borderLeft: 'none', borderRight: 'none' }, onDeselect: onDeselect, autoClearSearchValue: false, searchValue: typeof value === 'string' ? value : '', onSearch: onChangeInput, placeholder: value || t(translations.inputYourValue.title), "$isPlaceholder": !value, dropdownStyle: Object.assign({}, (hideSelectField ? { display: 'none' } : {})) }));
+            element = (_jsx(StyledSelect, { mode: "multiple", options: [{ value: '', label: t(translations.orSelectAField.title) }], notFoundContent: null, onSelect: showModal, style: { width: '100%', borderTop: 'none', borderLeft: 'none', borderRight: 'none' }, onDeselect: onDeselect, autoClearSearchValue: false, searchValue: typeof value === 'string' ? value : '', onSearch: onChangeInput, placeholder: value || t(translations.inputYourValue.title), "$isPlaceholder": !value, dropdownStyle: {
+                    ...(hideSelectField ? { display: 'none' } : {}),
+                } }));
         }
         return element;
     };
-    return (React.createElement(React.Fragment, null,
-        renderInput(valueType),
-        errorMsg ? (React.createElement(Text, { color: "#ff4d4f", style: { marginLeft: 8, marginTop: 5 } }, errorMsg)) : null,
-        React.createElement(ModalSelect, { isModalVisible: isModalVisible, valueType: valueType, eventMetadata: eventMetadata, customerMetadata: customerMetadata, visitorMetadata: visitorMetadata, handleOk: handleOk, handleCancel: handleCancel, businessObject: businessObject, boFieldOptions: boFieldOptions, defaultIsBo: useBo, onError: errorMsg => setErrorMsg(errorMsg) })));
+    return (_jsxs(_Fragment, { children: [renderInput(valueType), errorMsg ? (_jsx(Text, { color: "#ff4d4f", style: { marginLeft: 8, marginTop: 5 }, children: errorMsg })) : null, _jsx(ModalSelect, { isModalVisible: isModalVisible, valueType: valueType, eventMetadata: eventMetadata, customerMetadata: customerMetadata, visitorMetadata: visitorMetadata, handleOk: handleOk, handleCancel: handleCancel, businessObject: businessObject, boFieldOptions: boFieldOptions, defaultIsBo: useBo, onError: errorMsg => setErrorMsg(errorMsg) })] }));
 };
 export const ModalSelect = props => {
-    var _a, _b;
     // Props
     const { isModalVisible, handleOk, handleCancel, valueType, customerMetadata, visitorMetadata, eventMetadata, boFieldOptions, businessObject, defaultIsBo, onError, } = props;
     // Translations
@@ -145,11 +129,14 @@ export const ModalSelect = props => {
     const [metaData, setMetaData] = useState({
         customer: customerMetadata,
         visitor: visitorMetadata,
-        event: Object.assign(Object.assign({}, eventMetadata), { useBo: (_a = eventMetadata.useBo) !== null && _a !== void 0 ? _a : defaultIsBo }),
+        event: {
+            ...eventMetadata,
+            useBo: eventMetadata.useBo ?? defaultIsBo,
+        },
     });
     const [tempValueType, setTempValueType] = useState(valueType === 'normal' ? 'event' : valueType);
     const serviceAuth = useSelectServiceAuth();
-    const { url = '' } = serviceAuth, restAuthInfo = __rest(serviceAuth, ["url"]);
+    const { url = '', ...restAuthInfo } = serviceAuth;
     // Selectors
     const { data: dynamicContentAttributes } = useGetDynamicContentAttr({ url }, restAuthInfo);
     const [expandedKeys, setExpandedKeys] = useState([]);
@@ -191,11 +178,13 @@ export const ModalSelect = props => {
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [eventAttrErrorMessage, boAttrErrorMessage, valueType]);
     useDeepCompareEffect(() => {
-        var _a;
         setMetaData({
             customer: customerMetadata,
             visitor: visitorMetadata,
-            event: Object.assign(Object.assign({}, eventMetadata), { useBo: (_a = eventMetadata.useBo) !== null && _a !== void 0 ? _a : defaultIsBo }),
+            event: {
+                ...eventMetadata,
+                useBo: eventMetadata.useBo ?? defaultIsBo,
+            },
         });
     }, [customerMetadata, visitorMetadata, eventMetadata]);
     useEffect(() => {
@@ -205,10 +194,13 @@ export const ModalSelect = props => {
     }, [valueType, isModalVisible]);
     useEffect(() => {
         getListEvents();
-        setMetaData(metaData => {
-            var _a;
-            return (Object.assign(Object.assign({}, metaData), { [tempValueType]: Object.assign(Object.assign({}, metaData[tempValueType]), { useBo: (_a = eventMetadata.useBo) !== null && _a !== void 0 ? _a : defaultIsBo }) }));
-        });
+        setMetaData(metaData => ({
+            ...metaData,
+            [tempValueType]: {
+                ...metaData[tempValueType],
+                useBo: eventMetadata.useBo ?? defaultIsBo,
+            },
+        }));
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [tempValueType]);
     useEffect(() => {
@@ -236,10 +228,13 @@ export const ModalSelect = props => {
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [currentMetaData.insight_property_ids]);
     // Services
-    const getListEvents = () => __awaiter(void 0, void 0, void 0, function* () {
+    const getListEvents = async () => {
         try {
-            setLoading(Object.assign(Object.assign({}, loading), { isLoadingEvent: true }));
-            const { rows } = yield getListAllEvents({ url }, restAuthInfo);
+            setLoading({
+                ...loading,
+                isLoadingEvent: true,
+            });
+            const { rows } = await getListAllEvents({ url }, restAuthInfo);
             setListEvent(rows);
         }
         catch (error) {
@@ -247,57 +242,100 @@ export const ModalSelect = props => {
             console.log('error', error);
         }
         finally {
-            setLoading(Object.assign(Object.assign({}, loading), { isLoadingEvent: false }));
+            setLoading({
+                ...loading,
+                isLoadingEvent: false,
+            });
         }
-    });
-    const getListSources = (_c) => __awaiter(void 0, [_c], void 0, function* ({ event_action_id, event_category_id }) {
-        setLoading(Object.assign(Object.assign({}, loading), { isLoadingSource: true }));
-        const { rows } = yield getListSourceByEvent({
+    };
+    const getListSources = async ({ event_action_id, event_category_id }) => {
+        setLoading({
+            ...loading,
+            isLoadingSource: true,
+        });
+        const { rows } = await getListSourceByEvent({
             url,
             eventActionId: event_action_id,
             eventCategoryId: event_category_id,
         }, restAuthInfo);
         setListSourceByEvent(rows);
-        setLoading(Object.assign(Object.assign({}, loading), { isLoadingSource: false }));
-    });
-    const getListAttribute = (_d) => __awaiter(void 0, [_d], void 0, function* ({ insight_property_ids, event_action_id, event_category_id, signal, }) {
+        setLoading({
+            ...loading,
+            isLoadingSource: false,
+        });
+    };
+    const getListAttribute = async ({ insight_property_ids, event_action_id, event_category_id, signal, }) => {
         if (!insight_property_ids ||
             (Array.isArray(insight_property_ids) && insight_property_ids.length === 0)) {
-            setLoading(Object.assign(Object.assign({}, loading), { isLoadingAttrs: false }));
+            setLoading({
+                ...loading,
+                isLoadingAttrs: false,
+            });
             return;
         }
-        setLoading(Object.assign(Object.assign({}, loading), { isLoadingAttrs: true }));
-        const { rows } = yield getListAttributesEvent(serviceAuth, {
+        setLoading({
+            ...loading,
+            isLoadingAttrs: true,
+        });
+        const { rows } = await getListAttributesEvent(serviceAuth, {
             sourceId: insight_property_ids,
             eventActionId: event_action_id,
             eventCategoryId: event_category_id,
             signal, // AbortController
         });
         setListEventAttr(rows);
-        setLoading(Object.assign(Object.assign({}, loading), { isLoadingAttrs: false }));
-        const treeAttrs = rows.map((attr) => (Object.assign({ value: attr.eventPropertyName, title: attr.eventPropertyDisplay, isLeaf: attr.items ? attr.items.length === 0 : true, selectable: attr.items ? attr.items.length === 0 : true }, (attr.items &&
-            attr.items.length && {
-            children: attr.items.map((childAttr) => ({
-                value: `${childAttr.itemTypeId}.${childAttr.itemPropertyName}`,
-                title: childAttr.translateLabel,
-                status: childAttr.status,
-                isLeaf: true,
-            })),
-        }))));
+        setLoading({
+            ...loading,
+            isLoadingAttrs: false,
+        });
+        const treeAttrs = rows.map((attr) => ({
+            value: attr.eventPropertyName,
+            title: attr.eventPropertyDisplay,
+            isLeaf: attr.items ? attr.items.length === 0 : true,
+            selectable: attr.items ? attr.items.length === 0 : true,
+            ...(attr.items &&
+                attr.items.length && {
+                children: attr.items.map((childAttr) => ({
+                    value: `${childAttr.itemTypeId}.${childAttr.itemPropertyName}`,
+                    title: childAttr.translateLabel,
+                    status: childAttr.status,
+                    isLeaf: true,
+                })),
+            }),
+        }));
         setTreeEventAttr(treeAttrs);
-    });
+    };
     const onChangeFieldType = (e) => {
         const { value } = e.target;
         if (value) {
-            setMetaData(metaData => (Object.assign(Object.assign({}, metaData), { event: Object.assign(Object.assign({}, metaData.event), { useBo: value === 'bo' }) })));
+            setMetaData(metaData => ({
+                ...metaData,
+                event: {
+                    ...metaData.event,
+                    useBo: value === 'bo',
+                },
+            }));
         }
     };
     const onChangeEvent = (val) => {
         const selected = listEvent.find(item => item.value === val);
         if (selected) {
-            setMetaData(metaData => (Object.assign(Object.assign({}, metaData), { event: Object.assign(Object.assign({}, metaData.event), { event_action_id: selected.eventActionId, event_category_id: selected.eventCategoryId, event_tracking_name: selected.eventTrackingName, 
+            setMetaData(metaData => ({
+                ...metaData,
+                event: {
+                    ...metaData.event,
+                    event_action_id: selected.eventActionId,
+                    event_category_id: selected.eventCategoryId,
+                    event_tracking_name: selected.eventTrackingName,
                     // resets
-                    insight_property_ids: null, item_type_id: null, item_type_name: null, item_property_name: null, item_property_label: null, event_property_syntax: null }) })));
+                    insight_property_ids: null,
+                    item_type_id: null,
+                    item_type_name: null,
+                    item_property_name: null,
+                    item_property_label: null,
+                    event_property_syntax: null,
+                },
+            }));
             setTreeEventAttr([]);
             setListEventAttr([]);
         }
@@ -308,29 +346,69 @@ export const ModalSelect = props => {
             setTreeEventAttr([]);
             setListEventAttr([]);
         }
-        setMetaData(metaData => (Object.assign(Object.assign({}, metaData), { event: Object.assign(Object.assign({}, metaData.event), { insight_property_ids: sourcesSelected.map(source => source.insightPropertyId), 
+        setMetaData(metaData => ({
+            ...metaData,
+            event: {
+                ...metaData.event,
+                insight_property_ids: sourcesSelected.map(source => source.insightPropertyId),
                 // resets
-                item_type_id: null, item_type_name: null, item_property_name: null, item_property_label: null, event_property_syntax: null }) })));
+                item_type_id: null,
+                item_type_name: null,
+                item_property_name: null,
+                item_property_label: null,
+                event_property_syntax: null,
+            },
+        }));
     };
     const onChangeAttribute = (val) => {
         const [attribute, item] = val.split('.');
         if (!item) {
             const selected = listEventAttr.find(attr => attr.value === attribute);
             if (selected) {
-                setMetaData(metaData => (Object.assign(Object.assign({}, metaData), { event: Object.assign(Object.assign({}, metaData.event), { item_type_id: null, item_type_name: null, item_property_name: selected.eventPropertyName, item_property_label: selected.label, event_property_syntax: selected.eventPropertySyntax, useBo: false }) })));
+                setMetaData(metaData => ({
+                    ...metaData,
+                    event: {
+                        ...metaData.event,
+                        item_type_id: null,
+                        item_type_name: null,
+                        item_property_name: selected.eventPropertyName,
+                        item_property_label: selected.label,
+                        event_property_syntax: selected.eventPropertySyntax,
+                        useBo: false,
+                    },
+                }));
             }
         }
         else {
             const selectedAttribute = listEventAttr.find(attr => +attr.itemTypeId === +attribute);
             const selected = selectedAttribute.items.find((attr) => attr.itemPropertyName === item);
             if (selected) {
-                setMetaData(metaData => (Object.assign(Object.assign({}, metaData), { event: Object.assign(Object.assign({}, metaData.event), { item_type_id: selected.itemTypeId, item_type_name: selected.itemTypeName, item_property_name: selected.itemPropertyName, item_property_label: selected.translateLabel, event_property_syntax: selected.eventPropertySyntax, useBo: false }) })));
+                setMetaData(metaData => ({
+                    ...metaData,
+                    event: {
+                        ...metaData.event,
+                        item_type_id: selected.itemTypeId,
+                        item_type_name: selected.itemTypeName,
+                        item_property_name: selected.itemPropertyName,
+                        item_property_label: selected.translateLabel,
+                        event_property_syntax: selected.eventPropertySyntax,
+                        useBo: false,
+                    },
+                }));
             }
         }
     };
     const onSelect = (item) => {
         if (item.isBo) {
-            setMetaData(metaData => (Object.assign(Object.assign({}, metaData), { event: Object.assign(Object.assign({}, metaData.event), { field_code_bo: item.value, field_label_bo: item.label, useBo: true }) })));
+            setMetaData(metaData => ({
+                ...metaData,
+                event: {
+                    ...metaData.event,
+                    field_code_bo: item.value,
+                    field_label_bo: item.label,
+                    useBo: true,
+                },
+            }));
         }
         else {
             if (item.isLeaf) {
@@ -371,14 +449,14 @@ export const ModalSelect = props => {
         }
     };
     const onChangeDynamicContentAttr = (value) => {
-        setMetaData(metaData => {
-            var _a, _b;
-            return (Object.assign(Object.assign({}, metaData), { [tempValueType]: {
-                    item_type_id: (_a = VALUE_TYPE[tempValueType.toUpperCase()]) === null || _a === void 0 ? void 0 : _a.id,
-                    item_type_name: (_b = VALUE_TYPE[tempValueType.toUpperCase()]) === null || _b === void 0 ? void 0 : _b.name,
-                    item_property_name: value,
-                } }));
-        });
+        setMetaData(metaData => ({
+            ...metaData,
+            [tempValueType]: {
+                item_type_id: VALUE_TYPE[tempValueType.toUpperCase()]?.id,
+                item_type_name: VALUE_TYPE[tempValueType.toUpperCase()]?.name,
+                item_property_name: value,
+            },
+        }));
     };
     const onCancel = () => {
         setMetaData({
@@ -394,59 +472,45 @@ export const ModalSelect = props => {
         : currentMetaData.item_type_id
             ? `${currentMetaData.item_type_id}.${currentMetaData.item_property_name}`
             : currentMetaData.item_property_name) || undefined;
-    return (React.createElement(Modal, { title: t(translations.selectAttributeCapitalize.title).toString(), width: 545, visible: isModalVisible, onOk: () => handleOk({
+    return (_jsxs(Modal, { title: t(translations.selectAttributeCapitalize.title).toString(), width: 545, visible: isModalVisible, onOk: () => handleOk({
             valueType: tempValueType,
             metaData,
         }), onCancel: onCancel, destroyOnClose: true, footer: [
-            React.createElement(Button, { key: "submit", type: "primary", onClick: () => handleOk({
+            _jsx(Button, { type: "primary", onClick: () => handleOk({
                     valueType: tempValueType,
                     metaData,
-                }), disabled: handleDisableSubmit() }, t(translations.apply.title).toString()),
-            React.createElement(Button, { key: "back", onClick: onCancel }, t(translations.cancel.title).toString()),
-        ] },
-        businessObject && boFieldOptions && boFieldOptions.length ? (React.createElement(RadioGroup, { value: currentMetaData.useBo ? 'bo' : 'event', onChange: onChangeFieldType, style: { gap: 25 }, options: [
-                {
-                    value: 'bo',
-                    label: t(translations.fromBo.title).toString(),
-                },
-                {
-                    value: 'event',
-                    label: t(translations.fromEvent.title).toString(),
-                },
-            ] })) : null,
-        currentMetaData.useBo && businessObject && boFieldOptions ? (React.createElement(RowSelect, null,
-            React.createElement(Text, { style: { textAlign: 'left' } }, t(translations.selectBo.title).toString()),
-            React.createElement(Input, { value: businessObject ? businessObject.itemTypeDisplay || businessObject.itemTypeName : '', onChange: () => { }, style: {
-                    borderTop: 'none',
-                    borderRight: 'none',
-                    borderLeft: 'none',
-                    fontSize: 12,
-                    pointerEvents: 'none',
-                } }),
-            React.createElement(Text, { style: { textAlign: 'left' } }, t(translations.selectAttribute.title).toString()),
-            React.createElement(Select, { value: attributeValue, options: boFieldOptions, onChange: (value, item) => onSelect({
-                    value,
-                    isBo: true,
-                    label: item.label || '',
-                    isLeaf: true,
-                }), placeholder: t(translations.selectAnItem.title).toString(), showSearch: true }))) : (React.createElement(RowSelect, null,
-            React.createElement(Text, { style: { textAlign: 'left' } }, t(translations.dynamicContent.modal.label.contentSource).toString()),
-            React.createElement(Select, { showSearch: true, placeholder: "Select an item", defaultValue: EVENT.value, value: tempValueType || undefined, onChange: v => setTempValueType(v), options: Object.values(VALUE_TYPE).map(({ value, label }) => ({ value, label })) }),
-            [CUSTOMER.value, VISITOR.value].includes(tempValueType || '') ? (React.createElement(React.Fragment, null,
-                React.createElement(Text, { style: { textAlign: 'left' } }, t(translations.dynamicContent.modal.label.attribute).toString()),
-                React.createElement(Select, { status: boAttrErrorMessage ? 'error' : '', errorMsg: boAttrErrorMessage, showSearch: true, placeholder: "Select an item", options: (_b = buildOptionAttrArchive((dynamicContentAttributes || {})[tempValueType], currentMetaData.item_property_name || undefined)) === null || _b === void 0 ? void 0 : _b.map(attribute => ({
-                        value: attribute.value,
-                        label: get(attribute, `label.${language === null || language === void 0 ? void 0 : language.toUpperCase()}`, attribute.defaultLabel),
-                    })), value: currentMetaData.item_property_name || undefined, onChange: onChangeDynamicContentAttr }))) : (React.createElement(React.Fragment, null,
-                React.createElement(Text, { style: { textAlign: 'left' } }, t(translations.selectEvent.title).toString()),
-                React.createElement(Select, { showSearch: true, placeholder: "Select an item", value: currentMetaData.event_tracking_name || undefined, loading: loading.isLoadingEvent, onChange: v => onChangeEvent(v), options: listEvent.map(event => ({ value: event.value, label: event.label })) }),
-                React.createElement(Text, { style: { textAlign: 'left' } }, t(translations.inAnySourceOf.title).toString()),
-                React.createElement(Select, { mode: "multiple", showSearch: true, placeholder: "Select an item", value: currentMetaData.insight_property_ids || undefined, loading: loading.isLoadingSource, options: listSourceByEvent.map(event => ({
-                        value: event.value,
-                        label: event.label,
-                    })), onChange: v => onChangeSource(v) }),
-                React.createElement(Text, { style: { textAlign: 'left' } }, t(translations.selectEventAttribute.title).toString()),
-                React.createElement(TreeSelect, { showSearch: true, value: attributeValue || undefined, placeholder: t(translations.selectEventAttribute.title).toString(), treeData: treeEventAttr.map(attr => (Object.assign(Object.assign({}, attr), { children: buildOptionAttrArchive(attr.children || [], attributeValue || undefined) }))), loading: loading.isLoadingAttrs, onChange: onChangeAttribute, status: eventAttrErrorMessage ? 'error' : '' })))))));
+                }), disabled: handleDisableSubmit(), children: t(translations.apply.title).toString() }, "submit"),
+            _jsx(Button, { onClick: onCancel, children: t(translations.cancel.title).toString() }, "back"),
+        ], children: [businessObject && boFieldOptions && boFieldOptions.length ? (_jsx(RadioGroup, { value: currentMetaData.useBo ? 'bo' : 'event', onChange: onChangeFieldType, style: { gap: 25 }, options: [
+                    {
+                        value: 'bo',
+                        label: t(translations.fromBo.title).toString(),
+                    },
+                    {
+                        value: 'event',
+                        label: t(translations.fromEvent.title).toString(),
+                    },
+                ] })) : null, currentMetaData.useBo && businessObject && boFieldOptions ? (_jsxs(RowSelect, { children: [_jsx(Text, { style: { textAlign: 'left' }, children: t(translations.selectBo.title).toString() }), _jsx(Input, { value: businessObject ? businessObject.itemTypeDisplay || businessObject.itemTypeName : '', onChange: () => { }, style: {
+                            borderTop: 'none',
+                            borderRight: 'none',
+                            borderLeft: 'none',
+                            fontSize: 12,
+                            pointerEvents: 'none',
+                        } }), _jsx(Text, { style: { textAlign: 'left' }, children: t(translations.selectAttribute.title).toString() }), _jsx(Select, { value: attributeValue, options: boFieldOptions, onChange: (value, item) => onSelect({
+                            value,
+                            isBo: true,
+                            label: item.label || '',
+                            isLeaf: true,
+                        }), placeholder: t(translations.selectAnItem.title).toString(), showSearch: true })] })) : (_jsxs(RowSelect, { children: [_jsx(Text, { style: { textAlign: 'left' }, children: t(translations.dynamicContent.modal.label.contentSource).toString() }), _jsx(Select, { showSearch: true, placeholder: "Select an item", defaultValue: EVENT.value, value: tempValueType || undefined, onChange: v => setTempValueType(v), options: Object.values(VALUE_TYPE).map(({ value, label }) => ({ value, label })) }), [CUSTOMER.value, VISITOR.value].includes(tempValueType || '') ? (_jsxs(_Fragment, { children: [_jsx(Text, { style: { textAlign: 'left' }, children: t(translations.dynamicContent.modal.label.attribute).toString() }), _jsx(Select, { status: boAttrErrorMessage ? 'error' : '', errorMsg: boAttrErrorMessage, showSearch: true, placeholder: "Select an item", options: buildOptionAttrArchive((dynamicContentAttributes || {})[tempValueType], currentMetaData.item_property_name || undefined)?.map(attribute => ({
+                                    value: attribute.value,
+                                    label: get(attribute, `label.${language?.toUpperCase()}`, attribute.defaultLabel),
+                                })), value: currentMetaData.item_property_name || undefined, onChange: onChangeDynamicContentAttr })] })) : (_jsxs(_Fragment, { children: [_jsx(Text, { style: { textAlign: 'left' }, children: t(translations.selectEvent.title).toString() }), _jsx(Select, { showSearch: true, placeholder: "Select an item", value: currentMetaData.event_tracking_name || undefined, loading: loading.isLoadingEvent, onChange: v => onChangeEvent(v), options: listEvent.map(event => ({ value: event.value, label: event.label })) }), _jsx(Text, { style: { textAlign: 'left' }, children: t(translations.inAnySourceOf.title).toString() }), _jsx(Select, { mode: "multiple", showSearch: true, placeholder: "Select an item", value: currentMetaData.insight_property_ids || undefined, loading: loading.isLoadingSource, options: listSourceByEvent.map(event => ({
+                                    value: event.value,
+                                    label: event.label,
+                                })), onChange: v => onChangeSource(v) }), _jsx(Text, { style: { textAlign: 'left' }, children: t(translations.selectEventAttribute.title).toString() }), _jsx(TreeSelect, { showSearch: true, value: attributeValue || undefined, placeholder: t(translations.selectEventAttribute.title).toString(), treeData: treeEventAttr.map(attr => ({
+                                    ...attr,
+                                    children: buildOptionAttrArchive(attr.children || [], attributeValue || undefined),
+                                })), loading: loading.isLoadingAttrs, onChange: onChangeAttribute, status: eventAttrErrorMessage ? 'error' : '' })] }))] }))] }));
 };
 ModalSelect.defaultProps = {
     valueType: EVENT.value,
@@ -474,7 +538,7 @@ export const StyledDropdown = styled.div `
   .antsomi-select-tree
     .antsomi-select-tree-treenode:not(.antsomi-select-tree .antsomi-select-tree-treenode-disabled)
     .antsomi-select-tree-title {
-    font-size: ${(_a = THEME.token) === null || _a === void 0 ? void 0 : _a.fontSize}px;
+    font-size: ${THEME.token?.fontSize}px;
     ${props => props.$isSearching
     ? css `
             font-weight: 500;
@@ -486,30 +550,27 @@ export const StyledDropdown = styled.div `
     align-items: center;
   }
 `;
-export const StyledSelect = styled(Select) `
+export const StyledSelect = styled(props => _jsx(Select, { ...props })) `
   .antsomi-select-selection-search {
     width: fit-content !important;
   }
 
   .antsomi-select-selection-placeholder {
-    ${props => {
-    var _a;
-    return !props.$isPlaceholder
-        ? css `
+    ${props => !props.$isPlaceholder
+    ? css `
             color: rgba(0, 0, 0, 0.85);
-            font-size: ${(_a = THEME.token) === null || _a === void 0 ? void 0 : _a.fontSize}px;
+            font-size: ${THEME.token?.fontSize}px;
           `
-        : `
-        `;
-}}
+    : `
+        `}
   }
 `;
 export const StyledTreeSelect = styled(TreeSelect) `
-  font-size: ${(_b = THEME.token) === null || _b === void 0 ? void 0 : _b.fontSize}px;
+  font-size: ${THEME.token?.fontSize}px;
   width: 100%;
   &:hover {
     .antsomi-select-selector {
-      border-color: ${(_c = THEME.token) === null || _c === void 0 ? void 0 : _c.gray5} !important;
+      border-color: ${THEME.token?.gray5} !important;
     }
   }
 
@@ -517,13 +578,13 @@ export const StyledTreeSelect = styled(TreeSelect) `
     border-top: 0 !important;
     border-right: 0 !important;
     border-left: 0 !important;
-    border-bottom: 1px solid ${(_d = THEME.token) === null || _d === void 0 ? void 0 : _d.gray5};
+    border-bottom: 1px solid ${THEME.token?.gray5};
 
     // padding-right: 12px;
   }
   .antsomi-select-selection-overflow-item.antsomi-select-selection-overflow-item-rest {
     .antsomi-select-selection-item {
-      color: ${(_e = THEME.token) === null || _e === void 0 ? void 0 : _e.blue4};
+      color: ${THEME.token?.blue4};
       background: #e6f7ff;
       border-color: #91d5ff;
     }

package/es/components/organism/FilterSetting/components/common/InputSelectMulti/ColumnSuggestion/index.js

@@ -1,6 +1,4 @@
-/* eslint-disable @typescript-eslint/no-use-before-define */
-// Libraries
-import React from 'react';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import styled from 'styled-components';
 // Atoms
 import { Tooltip, Icon, Text } from '@antscorp/antsomi-ui/es/components/atoms';
@@ -9,24 +7,17 @@ export const ColumnSuggestion = props => {
     const showContent = (childs, extend) => {
         const result = [];
         childs.forEach((item) => {
-            result.push(React.createElement(Tooltip, { title: item },
-                React.createElement(ListItem, null,
-                    React.createElement(TextField, null, item),
-                    React.createElement(Icon, { onClick: () => onChange(item), type: "icon-ants-remove-slim", size: 10, style: { cursor: 'pointer' } }))));
+            result.push(_jsx(Tooltip, { title: item, children: _jsxs(ListItem, { children: [_jsx(TextField, { children: item }), _jsx(Icon, { onClick: () => onChange(item), type: "icon-ants-remove-slim", size: 10, style: { cursor: 'pointer' } })] }) }));
         });
-        extend === null || extend === void 0 ? void 0 : extend.forEach((element) => {
-            result.push(React.createElement(Tooltip, { title: element },
-                React.createElement(ListItem, null,
-                    React.createElement(TextField, null, element),
-                    React.createElement(Icon, { size: 10, type: "icon-ants-flag" }),
-                    React.createElement(Icon, { onClick: () => onChangeRemoveExtend(element), type: "icon-ants-remove-slim", size: 10, style: { cursor: 'pointer' } }))));
+        extend?.forEach((element) => {
+            result.push(_jsx(Tooltip, { title: element, children: _jsxs(ListItem, { children: [_jsx(TextField, { children: element }), _jsx(Icon, { size: 10, type: "icon-ants-flag" }), _jsx(Icon, { onClick: () => onChangeRemoveExtend(element), type: "icon-ants-remove-slim", size: 10, style: { cursor: 'pointer' } })] }) }));
         });
         if (result.length > 0) {
-            return React.createElement(List, null, result);
+            return _jsx(List, { children: result });
         }
         return null;
     };
-    return React.createElement(WrapperContent, null, showContent(data, extendValue));
+    return _jsx(WrapperContent, { children: showContent(data, extendValue) });
 };
 export const WrapperContent = styled.div `
   width: 100%;