@antscorp/antsomi-ui 2.0.13 → 2.0.15

package/es/components/molecules/AddDynamicContent/AddDynamicContent.js

@@ -1,44 +1,38 @@
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 /* eslint-disable no-case-declarations */
 /* eslint-disable @typescript-eslint/no-use-before-define */
 // Libraries
-import React, { useCallback, useEffect, useLayoutEffect, useMemo, useState } from 'react';
-import { omit, isEmpty, flatMapDeep, set, get, isNaN } from 'lodash';
 import { useQueryClient } from '@tanstack/react-query';
+import { flatMapDeep, get, isEmpty, isNaN, omit, set } from 'lodash';
+import { useCallback, useEffect, useLayoutEffect, useMemo, useState } from 'react';
 // Hooks
 import { useDeepCompareEffect, useDeepCompareMemo } from '@antscorp/antsomi-ui/es/hooks';
 // Components
+import { Button } from '@antscorp/antsomi-ui/es/components/atoms/Button';
+import { Checkbox } from '@antscorp/antsomi-ui/es/components/atoms/Checkbox';
+import { Spin } from '@antscorp/antsomi-ui/es/components/atoms/Spin';
+import { Text } from '@antscorp/antsomi-ui/es/components/atoms/Text';
+import { Form, Select, TreeSelect } from 'antd';
 import { TreeNode } from 'rc-tree-select';
-import { Button, Checkbox, Text, Spin } from '../../atoms';
-import { TreeSelect, Form, Select } from 'antd';
 // Locales
 import i18nInstance from '@antscorp/antsomi-ui/es/locales/i18n';
 import { translations } from '@antscorp/antsomi-ui/es/locales/translations';
 // Query
-import { useGetDynamicContentAttr, useGetListPromotionPool, useGetListEventAttr, useGetListPromotionCodeAttr, useGetListBO, useGetListAllEvents, useGetListSourceByEvent, useGetListAttributeBO, useGetCustomFunction, useAddSavedCSFunction, useUpdateCSFunction, } from '@antscorp/antsomi-ui/es/queries';
+import { useAddSavedCSFunction, useGetCustomFunction, useGetDynamicContentAttr, useGetListAllEvents, useGetListAttributeBO, useGetListBO, useGetListEventAttr, useGetListPromotionCodeAttr, useGetListPromotionPool, useGetListSourceByEvent, useUpdateCSFunction, } from '@antscorp/antsomi-ui/es/queries';
 import { useGetEventTrackingAttributes } from '@antscorp/antsomi-ui/es/queries/ThirdParty';
 // Queries config
 import { QUERY_KEYS } from '@antscorp/antsomi-ui/es/constants/queries';
-import { dateExample } from './components/FormatDatetime';
+// Types
 import DisplayFormat from './components/DisplayFormat';
+import { dateExample } from './components/FormatDatetime';
 // Constants
-import { DYNAMIC_CONTENT_SETTING_KEY, DYNAMIC_CONTENT_TYPE, DYNAMIC_CONTENT_ATTR_DF_TYPE, DATA_TYPE, ATTRIBUTE_TYPE, } from './constants';
+import { ATTRIBUTE_TYPE, DATA_TYPE, DYNAMIC_CONTENT_ATTR_DF_TYPE, DYNAMIC_CONTENT_SETTING_KEY, DYNAMIC_CONTENT_TYPE, } from './constants';
 // Utils
 import { handleError } from '@antscorp/antsomi-ui/es/utils';
-import { formatDatetimeDF, formatNumberDF, getAvailableAttrs, getStringFormatDateDF, regexCSType, serilizeBOAttr, serializeCSSelectedString, serilizeDynamicContentAttr, serilizeEventAttr, serilizePromotionPool, buildOptionAttrArchive, checkStatusAttr, serializeLabelToCode, buildMappingFields, CUSTOM_TYPE, } from './utils';
+import { buildMappingFields, buildOptionAttrArchive, checkStatusAttr, CUSTOM_TYPE, formatDatetimeDF, formatNumberDF, getAvailableAttrs, getStringFormatDateDF, regexCSType, serializeCSSelectedString, serializeLabelToCode, serilizeBOAttr, serilizeDynamicContentAttr, serilizeEventAttr, serilizePromotionPool, } from './utils';
 // Style
-import { InputSuggestion, ModalCustom } from './styled';
 import { EditorScript } from '../EditorScript';
+import { InputSuggestion, ModalCustom } from './styled';
 const getMembers = (member) => {
     if (!member.children || !member.children.length) {
         return member;
@@ -106,7 +100,7 @@ export const AddDynamicContent = props => {
     // defaultSettings
     const [defaultAttrDFSetings, setDefaultAttrDFSetings] = useState(null);
     // Variables
-    const [eventActionId, eventCategoryId] = (selectedEventSource === null || selectedEventSource === void 0 ? void 0 : selectedEventSource.split(':').map(Number)) || [];
+    const [eventActionId, eventCategoryId] = selectedEventSource?.split(':').map(Number) || [];
     // Selection Options states
     const [listDynamicContentTypes, setListDynamicContentTypes] = useState(defaultDynamicTypes);
     const [listCustomerAttributes, setListCustomerAttributes] = useState([]);
@@ -157,7 +151,7 @@ export const AddDynamicContent = props => {
                 handleError(error, {
                     path: PATH,
                     name: 'useGetListAttributeBO',
-                    args: error === null || error === void 0 ? void 0 : error.message,
+                    args: error?.message,
                 });
             },
             enabled: !!itemTypeId,
@@ -176,7 +170,7 @@ export const AddDynamicContent = props => {
             handleError(error, {
                 path: PATH,
                 name: 'useGetDynamicContentAttr',
-                args: error === null || error === void 0 ? void 0 : error.message,
+                args: error?.message,
             });
         },
     });
@@ -203,7 +197,7 @@ export const AddDynamicContent = props => {
                 handleError(error, {
                     path: PATH,
                     name: 'useGetListSourceBO',
-                    args: error === null || error === void 0 ? void 0 : error.message,
+                    args: error?.message,
                 });
             },
         },
@@ -228,7 +222,7 @@ export const AddDynamicContent = props => {
                 handleError(error, {
                     path: PATH,
                     name: 'useGetListEventBySource',
-                    args: error === null || error === void 0 ? void 0 : error.message,
+                    args: error?.message,
                 });
             },
             select: (data) => {
@@ -247,7 +241,7 @@ export const AddDynamicContent = props => {
             handleError(error, {
                 path: PATH,
                 name: 'useGetListEventAttr',
-                args: error === null || error === void 0 ? void 0 : error.message,
+                args: error?.message,
             });
         },
         select: (data) => serilizeEventAttr(data, language, additionalAttrProperties),
@@ -264,7 +258,7 @@ export const AddDynamicContent = props => {
             handleError(error, {
                 path: PATH,
                 name: 'useGetListPromotionPool',
-                args: error === null || error === void 0 ? void 0 : error.message,
+                args: error?.message,
             });
         },
     });
@@ -273,7 +267,7 @@ export const AddDynamicContent = props => {
             setHasError({ [DYNAMIC_CONTENT_SETTING_KEY.ATTRIBUTE]: false });
         },
         select: (data) => data
-            .filter((attr) => +(attr === null || attr === void 0 ? void 0 : attr.status) === 1)
+            .filter((attr) => +attr?.status === 1)
             .map((attr) => ({
             label: attr.propertyDisplayMultilang[language] ||
                 attr.propertyDisplayMultilang[get(attr, "propertyDisplayMultilang['DEFAULT_LANG']", 'EN')],
@@ -289,7 +283,7 @@ export const AddDynamicContent = props => {
             handleError(error, {
                 path: PATH,
                 name: 'useGetPromotionCodeAttr',
-                args: error === null || error === void 0 ? void 0 : error.message,
+                args: error?.message,
             });
         },
     });
@@ -308,12 +302,11 @@ export const AddDynamicContent = props => {
             return selectedAttr.type === ATTRIBUTE_TYPE.ITEM;
         }
         return false;
-    }, [selectedAttr, selectedDynamicContentType, eventTrackingAttributes === null || eventTrackingAttributes === void 0 ? void 0 : eventTrackingAttributes.mainObjects]);
+    }, [selectedAttr, selectedDynamicContentType, eventTrackingAttributes?.mainObjects]);
     const itemTypeName = useMemo(() => {
-        var _a;
         let draftItemTypeName = '';
         if (itemTypeId) {
-            draftItemTypeName = ((_a = listBO === null || listBO === void 0 ? void 0 : listBO.find((bo) => bo.id === itemTypeId)) === null || _a === void 0 ? void 0 : _a.name) || '';
+            draftItemTypeName = listBO?.find((bo) => bo.id === itemTypeId)?.name || '';
         }
         return draftItemTypeName;
     }, [itemTypeId, listBO]);
@@ -330,7 +323,10 @@ export const AddDynamicContent = props => {
             });
         });
         if (isShowCustomFunction) {
-            temp.push(Object.assign(Object.assign({}, CUSTOM_TYPE), { index: temp.length }));
+            temp.push({
+                ...CUSTOM_TYPE,
+                index: temp.length,
+            });
         }
         setListDynamicContentTypes(temp);
     }, [contentSources.groups, isShowCustomFunction]);
@@ -338,7 +334,11 @@ export const AddDynamicContent = props => {
         if (Array.isArray(customFunction) && customFunction.length) {
             const temp = [];
             customFunction.forEach(item => {
-                temp.push(Object.assign(Object.assign({}, item), { label: item.template_name, value: item.template_name }));
+                temp.push({
+                    ...item,
+                    label: item.template_name,
+                    value: item.template_name,
+                });
             });
             setlistCustomTemplates(temp);
         }
@@ -376,11 +376,10 @@ export const AddDynamicContent = props => {
         }
     }, [selectedEventSource, listSources, form, selectedDynamicContentType]);
     useDeepCompareEffect(() => {
-        var _a, _b;
         if (listEventAttributes &&
             selectedDynamicContentType === DYNAMIC_CONTENT_TYPE.EVENT_ATTRIBUTE.value) {
-            const initEventAttr = ((_a = listEventAttributes[0]) === null || _a === void 0 ? void 0 : _a.children.length)
-                ? getAvailableAttrs((_b = listEventAttributes[0]) === null || _b === void 0 ? void 0 : _b.children)[0]
+            const initEventAttr = listEventAttributes[0]?.children.length
+                ? getAvailableAttrs(listEventAttributes[0]?.children)[0]
                 : listEventAttributes[0];
             if (form.getFieldValue(DYNAMIC_CONTENT_SETTING_KEY.ATTRIBUTE)) {
                 const eventAttr = form.getFieldValue(DYNAMIC_CONTENT_SETTING_KEY.ATTRIBUTE);
@@ -448,20 +447,19 @@ export const AddDynamicContent = props => {
             listBO: listBO,
             itemTypeId: itemTypeId || 0,
             listAttribute: listTmp,
-            field: selectedAttr === null || selectedAttr === void 0 ? void 0 : selectedAttr.value,
+            field: selectedAttr?.value,
         });
         setActionArchive(isDisable);
         setErrorMessageAttr(errorMessage);
     }, [selectedAttr]);
     useEffect(() => {
-        var _a;
         if (!visible) {
             return;
         }
-        if ((_a = Object.keys(Object.assign({}, defaultData))) === null || _a === void 0 ? void 0 : _a.length) {
-            let draftDefaultData = Object.assign({}, defaultData);
+        if (Object.keys({ ...defaultData })?.length) {
+            let draftDefaultData = { ...defaultData };
             if (draftDefaultData.type !== 'custom') {
-                if (triggerEvent === null || triggerEvent === void 0 ? void 0 : triggerEvent.eventActionId) {
+                if (triggerEvent?.eventActionId) {
                     draftDefaultData = omit(draftDefaultData, ['event', 'source']);
                 }
                 form.setFieldsValue(draftDefaultData);
@@ -485,7 +483,7 @@ export const AddDynamicContent = props => {
                         key = DYNAMIC_CONTENT_SETTING_KEY.DYNAMIC_CONTENT_DATETIME_ATTR_FORMAT_SETTINGS;
                     }
                     if (key && defaultAttr[key]) {
-                        const _b = defaultAttr[key], { type } = _b, settingValues = __rest(_b, ["type"]);
+                        const { type, ...settingValues } = defaultAttr[key];
                         form.setFieldsValue({
                             [DYNAMIC_CONTENT_SETTING_KEY.DISPLAY_FORMAT_TYPE]: type,
                         });
@@ -582,7 +580,7 @@ export const AddDynamicContent = props => {
                 ['datetime', 'number'].includes(selectedAttr.dataType)) {
                 /* when change select  if attr selected is previous selected default attr, set settings as default settings */
                 if (!settings &&
-                    (defaultAttrDFSetings === null || defaultAttrDFSetings === void 0 ? void 0 : defaultAttrDFSetings.itemPropertyName) === selectedAttr.value) {
+                    defaultAttrDFSetings?.itemPropertyName === selectedAttr.value) {
                     // Visitor and Customer don't have additional field
                     let equalDefaultAttr = true;
                     // Event need check additional field source, event by soucre
@@ -610,13 +608,13 @@ export const AddDynamicContent = props => {
                 }
                 // *********** //
                 // Numberic Attribute DF
-                if ((selectedAttr === null || selectedAttr === void 0 ? void 0 : selectedAttr.dataType) === 'number') {
-                    settings = settings !== null && settings !== void 0 ? settings : initNumberDFSettings;
+                if (selectedAttr?.dataType === 'number') {
+                    settings = settings ?? initNumberDFSettings;
                     formatedDFValue = formatNumberDF(1234.56789, selectedDFType, settings);
                 }
                 // Datatime Attribute DF
-                if ((selectedAttr === null || selectedAttr === void 0 ? void 0 : selectedAttr.dataType) === 'datetime') {
-                    settings = settings !== null && settings !== void 0 ? settings : Object.assign(Object.assign({}, initDatetimeDFSettings), { language });
+                if (selectedAttr?.dataType === 'datetime') {
+                    settings = settings ?? { ...initDatetimeDFSettings, language };
                     formatedDFValue = formatDatetimeDF(dateExample, settings);
                 }
                 if (!attrDFOptions.length) {
@@ -629,12 +627,12 @@ export const AddDynamicContent = props => {
         if (dataType && ['datetime', 'number'].includes(dataType) && dynamicType === 'custom') {
             // Numberic Attribute DF
             if (dataType === 'number') {
-                settings = settings !== null && settings !== void 0 ? settings : initNumberDFSettings;
+                settings = settings ?? initNumberDFSettings;
                 formatedDFValue = formatNumberDF(1234.56789, selectedDFType, settings);
             }
             // Datatime Attribute DF
             if (dataType === 'datetime') {
-                settings = settings !== null && settings !== void 0 ? settings : Object.assign(Object.assign({}, initDatetimeDFSettings), { language });
+                settings = settings ?? { ...initDatetimeDFSettings, language };
                 formatedDFValue = formatDatetimeDF(dateExample, settings);
             }
             if (!attrDFOptions.length) {
@@ -694,16 +692,39 @@ export const AddDynamicContent = props => {
         const format = dataTmp[0].output_format.config;
         switch (dataFormat) {
             case 'currency': {
-                setAttrDFSettings(Object.assign(Object.assign({}, initNumberDFSettings), { grouping: format.group || ',', decimal: format.decimal, decimalPlaces: format.decimalPlace, isCompact: format.isCompactNumber || false, currencyCode: format.currency || 'USD', prefixType: format.prefixType || 'code' }));
+                setAttrDFSettings({
+                    ...initNumberDFSettings,
+                    grouping: format.group || ',',
+                    decimal: format.decimal,
+                    decimalPlaces: format.decimalPlace,
+                    isCompact: format.isCompactNumber || false,
+                    currencyCode: format.currency || 'USD',
+                    prefixType: format.prefixType || 'code',
+                });
                 break;
             }
             case 'number':
             case 'percentage': {
-                setAttrDFSettings(Object.assign(Object.assign({}, initNumberDFSettings), { grouping: format.group || ',', decimal: format.decimal, decimalPlaces: format.decimalPlace, isCompact: format.isCompactNumber || false }));
+                setAttrDFSettings({
+                    ...initNumberDFSettings,
+                    grouping: format.group || ',',
+                    decimal: format.decimal,
+                    decimalPlaces: format.decimalPlace,
+                    isCompact: format.isCompactNumber || false,
+                });
                 break;
             }
             case 'date_and_time': {
-                setAttrDFSettings(Object.assign(Object.assign({}, initDatetimeDFSettings), { language, hasDateFormat: format.date.check || true, hasTimeFormat: format.time.check || true, dateParseOption: format.date.value || 'medium', timeParseOption: format.time.value || 'medium', dateParseFormat: format.format || 'MM/DD/YYYY', timeParseFormat: `${format.time.timeFormat || 12}hour` }));
+                setAttrDFSettings({
+                    ...initDatetimeDFSettings,
+                    language,
+                    hasDateFormat: format.date.check || true,
+                    hasTimeFormat: format.time.check || true,
+                    dateParseOption: format.date.value || 'medium',
+                    timeParseOption: format.time.value || 'medium',
+                    dateParseFormat: format.format || 'MM/DD/YYYY',
+                    timeParseFormat: `${format.time.timeFormat || 12}hour`,
+                });
                 break;
             }
             case 'raw_string': {
@@ -720,7 +741,6 @@ export const AddDynamicContent = props => {
             return;
         }
         form.validateFields().then((values) => {
-            var _a;
             values = omit(values, 'dfType');
             if (onOk) {
                 const type = form.getFieldValue(DYNAMIC_CONTENT_SETTING_KEY.DYNAMIC_CONTENT_TYPE);
@@ -778,11 +798,15 @@ export const AddDynamicContent = props => {
                     if (!showIndex) {
                         values = omit(values, 'index');
                     }
-                    const config = Object.assign({}, attrDFSettings);
+                    const config = {
+                        ...attrDFSettings,
+                    };
                     if (dataType === 'datetime') {
                         config.dateFormatString = getStringFormatDateDF(attrDFSettings);
                     }
-                    onOk(Object.assign(Object.assign({}, values), { customFunction: {
+                    onOk({
+                        ...values,
+                        customFunction: {
                             outputFormat: {
                                 type: displayFormat,
                                 config,
@@ -792,29 +816,36 @@ export const AddDynamicContent = props => {
                             templateType: 'custom',
                             customFunction: functionCustom,
                             outputDataType: dataType,
-                        }, attribute: {
+                        },
+                        attribute: {
                             label: perName,
                             value: serializeLabelToCode(perName),
-                        }, mappingFields: `#{custom.${serializeLabelToCode(perName)}}` }));
+                        },
+                        mappingFields: `#{custom.${serializeLabelToCode(perName)}}`,
+                    });
                 }
                 else {
                     let key = '';
                     const otherField = {};
                     const selectedAttr = form.getFieldValue(DYNAMIC_CONTENT_SETTING_KEY.ATTRIBUTE);
-                    if ((selectedAttr === null || selectedAttr === void 0 ? void 0 : selectedAttr.dataType) === 'number') {
+                    if (selectedAttr?.dataType === 'number') {
                         key = DYNAMIC_CONTENT_SETTING_KEY.DYNAMIC_CONTENT_NUMBERIC_ATTR_FORMAT_SETTINGS;
                     }
-                    if ((selectedAttr === null || selectedAttr === void 0 ? void 0 : selectedAttr.dataType) === 'datetime') {
+                    if (selectedAttr?.dataType === 'datetime') {
                         key = DYNAMIC_CONTENT_SETTING_KEY.DYNAMIC_CONTENT_DATETIME_ATTR_FORMAT_SETTINGS;
                         otherField.dateFormatString = getStringFormatDateDF(attrDFSettings);
                     }
                     if (key && showDisplayFormat) {
-                        values[DYNAMIC_CONTENT_SETTING_KEY.ATTRIBUTE][key] = Object.assign(Object.assign(Object.assign({}, attrDFSettings), otherField), { type: selectedDFType });
+                        values[DYNAMIC_CONTENT_SETTING_KEY.ATTRIBUTE][key] = {
+                            ...attrDFSettings,
+                            ...otherField,
+                            type: selectedDFType,
+                        };
                     }
                     // Handle Merge tag for event attributes
                     if (values.type === DYNAMIC_CONTENT_TYPE.EVENT_ATTRIBUTE.value) {
                         if (values.index != null && !get(values, 'attribute.itemTypeName', null)) {
-                            const itemTypeName = ((_a = listBO === null || listBO === void 0 ? void 0 : listBO.find(({ id }) => get(eventTrackingAttributes, 'mainObjects', []).some(({ itemTypeId }) => itemTypeId === id))) === null || _a === void 0 ? void 0 : _a.name) || null;
+                            const itemTypeName = listBO?.find(({ id }) => get(eventTrackingAttributes, 'mainObjects', []).some(({ itemTypeId }) => itemTypeId === id))?.name || null;
                             if (itemTypeName) {
                                 set(values, 'attribute.itemTypeName', itemTypeName);
                             }
@@ -828,7 +859,10 @@ export const AddDynamicContent = props => {
                         values = omit(values, 'index');
                     }
                     const mappingFields = buildMappingFields(values);
-                    onOk(Object.assign(Object.assign({}, values), (mappingFields && { mappingFields })));
+                    onOk({
+                        ...values,
+                        ...(mappingFields && { mappingFields }),
+                    });
                 }
             }
         });
@@ -853,7 +887,6 @@ export const AddDynamicContent = props => {
         setsaveAsTemplate(!saveAsTemplate);
     };
     const handleFormValuesChanges = (changedValues, _allValues) => {
-        var _a;
         const [fieldName, fieldValue] = Object.entries(changedValues)[0];
         switch (fieldName) {
             case DYNAMIC_CONTENT_SETTING_KEY.DYNAMIC_CONTENT_TYPE:
@@ -872,7 +905,7 @@ export const AddDynamicContent = props => {
                         setHasError({ [DYNAMIC_CONTENT_SETTING_KEY.ATTRIBUTE]: isErrorDynamicContentAttr });
                         break;
                     case fieldValue === DYNAMIC_CONTENT_TYPE.EVENT_ATTRIBUTE.value:
-                        if (!(listEvents === null || listEvents === void 0 ? void 0 : listEvents.length))
+                        if (!listEvents?.length)
                             break;
                         form.setFieldsValue({
                             [DYNAMIC_CONTENT_SETTING_KEY.EVENT]: listEvents[0].value,
@@ -881,11 +914,11 @@ export const AddDynamicContent = props => {
                         setHasError({ [DYNAMIC_CONTENT_SETTING_KEY.ATTRIBUTE]: isErrorEventAttr });
                         break;
                     case fieldValue === CUSTOM_TYPE.value:
-                        if (!(listEvents === null || listEvents === void 0 ? void 0 : listEvents.length))
+                        if (!listEvents?.length)
                             break;
                         let formatedDFValue = '';
                         let settings = attrDFSettings;
-                        settings = settings !== null && settings !== void 0 ? settings : initNumberDFSettings;
+                        settings = settings ?? initNumberDFSettings;
                         formatedDFValue = formatNumberDF(1234.56789, selectedDFType, settings);
                         setFormatedAttr(formatedDFValue);
                         setAttrDFSettings(settings);
@@ -901,7 +934,7 @@ export const AddDynamicContent = props => {
                         if (!listPromotionCodeAttributes || !listPromotionPools)
                             break;
                         form.setFieldsValue({
-                            [DYNAMIC_CONTENT_SETTING_KEY.PROMOTION_POOL]: (_a = listPromotionPools[0]) === null || _a === void 0 ? void 0 : _a.value,
+                            [DYNAMIC_CONTENT_SETTING_KEY.PROMOTION_POOL]: listPromotionPools[0]?.value,
                             [DYNAMIC_CONTENT_SETTING_KEY.ATTRIBUTE]: getAvailableAttrs(listPromotionCodeAttributes)[0],
                         });
                         setHasError({ [DYNAMIC_CONTENT_SETTING_KEY.ATTRIBUTE]: isErrorListPromotionCodeAttr });
@@ -934,12 +967,12 @@ export const AddDynamicContent = props => {
                         if (!listEventAttributes)
                             break;
                         let newSelectEventAttr = listEventAttributes.find((row) => {
-                            if (row === null || row === void 0 ? void 0 : row.children.length) {
+                            if (row?.children.length) {
                                 return row.children.find((item) => item.value === fieldValue.value);
                             }
                             return row.value === fieldValue.value;
                         });
-                        if (newSelectEventAttr === null || newSelectEventAttr === void 0 ? void 0 : newSelectEventAttr.children.length) {
+                        if (newSelectEventAttr?.children.length) {
                             newSelectEventAttr = newSelectEventAttr.children.find((item) => item.value === fieldValue.value);
                         }
                         listAttributes = flatMapDeep(listEventAttributes, getMembers);
@@ -949,7 +982,7 @@ export const AddDynamicContent = props => {
                         listAttributes = listCustomerAttributes;
                         break;
                     case selectedDynamicContentType === DYNAMIC_CONTENT_TYPE.PROMOTION_CODE.value:
-                        listAttributes = listPromotionCodeAttributes !== null && listPromotionCodeAttributes !== void 0 ? listPromotionCodeAttributes : [];
+                        listAttributes = listPromotionCodeAttributes ?? [];
                         break;
                     case selectedDynamicContentType === DYNAMIC_CONTENT_TYPE.VISITOR_ATTRIBUTE.value:
                         listAttributes = listVisitorAttributes;
@@ -1005,7 +1038,7 @@ export const AddDynamicContent = props => {
                 let settings = attrDFSettings;
                 // Datatime Attribute DF
                 if (fieldValue === 'datetime') {
-                    settings = Object.assign(Object.assign({}, initDatetimeDFSettings), { language });
+                    settings = { ...initDatetimeDFSettings, language };
                 }
                 else if (fieldValue === 'string') {
                     settings = undefined;
@@ -1025,7 +1058,10 @@ export const AddDynamicContent = props => {
             case DYNAMIC_CONTENT_SETTING_KEY.DISPLAY_FORMAT_TYPE:
                 switch (fieldValue) {
                     case 'currency': {
-                        setAttrDFSettings(Object.assign(Object.assign({}, initNumberDFSettings), { decimalPlaces: 1 }));
+                        setAttrDFSettings({
+                            ...initNumberDFSettings,
+                            decimalPlaces: 1,
+                        });
                         break;
                     }
                     case 'number':
@@ -1034,7 +1070,10 @@ export const AddDynamicContent = props => {
                         break;
                     }
                     case 'datetime': {
-                        setAttrDFSettings(Object.assign(Object.assign({}, initDatetimeDFSettings), { language }));
+                        setAttrDFSettings({
+                            ...initDatetimeDFSettings,
+                            language,
+                        });
                         break;
                     }
                     case 'raw_string': {
@@ -1054,12 +1093,11 @@ export const AddDynamicContent = props => {
     //* Render functions
     const renderBoAttrFields = () => {
         if (hasError[DYNAMIC_CONTENT_SETTING_KEY.ATTRIBUTE]) {
-            return (React.createElement(Text, { type: "error" }, t(translations.dynamicContent.modal.error.boAttr)));
+            return (_jsx(Text, { type: "error", children: t(translations.dynamicContent.modal.error.boAttr) }));
         }
-        return (React.createElement(Form.Item, { style: { alignItems: 'center' }, label: t(translations.dynamicContent.modal.label.attribute), name: DYNAMIC_CONTENT_SETTING_KEY.ATTRIBUTE, required: true },
-            React.createElement(Select, { loading: isFetchingListBoAttr, style: { height: '28px' }, labelInValue: true, options: buildOptionAttrArchive(listBoAttributes || [], selectedAttr), 
+        return (_jsx(Form.Item, { style: { alignItems: 'center' }, label: t(translations.dynamicContent.modal.label.attribute), name: DYNAMIC_CONTENT_SETTING_KEY.ATTRIBUTE, required: true, children: _jsx(Select, { loading: isFetchingListBoAttr, style: { height: '28px' }, labelInValue: true, options: buildOptionAttrArchive(listBoAttributes || [], selectedAttr), 
                 // errorArchive={errorMessageAttr}
-                disabled: isActionArchive, showSearch: true })));
+                disabled: isActionArchive, showSearch: true }) }));
     };
     const renderIndexFields = ({ disabled = false, loading = false }) => {
         if (!showIndex)
@@ -1067,125 +1105,97 @@ export const AddDynamicContent = props => {
         if (hasError[DYNAMIC_CONTENT_SETTING_KEY.ATTRIBUTE]) {
             return null;
         }
-        return (React.createElement(Form.Item, { style: { alignItems: 'center' }, label: t(translations.dynamicContent.modal.label.index), name: DYNAMIC_CONTENT_SETTING_KEY.INDEX, required: true },
-            React.createElement(Select, { disabled: disabled, loading: loading, style: { height: '28px' }, options: Array.from({ length: 90 }, (_, i) => ({ value: i + 1, label: i + 1 })), showSearch: true })));
+        return (_jsx(Form.Item, { style: { alignItems: 'center' }, label: t(translations.dynamicContent.modal.label.index), name: DYNAMIC_CONTENT_SETTING_KEY.INDEX, required: true, children: _jsx(Select, { disabled: disabled, loading: loading, style: { height: '28px' }, options: Array.from({ length: 90 }, (_, i) => ({ value: i + 1, label: i + 1 })), showSearch: true }) }));
     };
     const renderCustomFunctionFields = () => {
         const dataType = form.getFieldValue([DYNAMIC_CONTENT_SETTING_KEY.DISPLAY_FORMAT_TYPE]);
-        return (React.createElement(React.Fragment, null,
-            React.createElement(Form.Item, { label: t(translations.dynamicContent.modal.label.personalizationName), name: DYNAMIC_CONTENT_SETTING_KEY.PERNAME, style: { alignItems: 'center' }, required: true },
-                React.createElement(InputSuggestion, { onSelect: handleSelect, placeholder: "Custom function name...", options: searchValue.length > 0 ? listCustomTemplatesSearch : listCustomTemplates, onChange: onChangeDataInput, value: templateName }),
-                hasError[DYNAMIC_CONTENT_SETTING_KEY.PERNAME] && (React.createElement(Text, { type: "error" }, t(translations.dynamicContent.modal.error.perName)))),
-            React.createElement(Form.Item, { style: { alignItems: 'center' }, label: t(translations.dynamicContent.modal.label.function), name: DYNAMIC_CONTENT_SETTING_KEY.FUNCTION, required: true },
-                React.createElement(EditorScript, { mode: "javascript", hideExpand: true })),
-            React.createElement(Form.Item, { style: { alignItems: 'center' }, label: t(translations.dynamicContent.modal.label.ouputDataType), name: DYNAMIC_CONTENT_SETTING_KEY.DATA_TYPE, required: true },
-                React.createElement(Select, { style: { height: 28 }, options: optionDataType })),
-            React.createElement(Form.Item, { style: { alignItems: 'start' }, required: true, label: t(translations.dynamicContent.modal.label.ouputFormat), name: DYNAMIC_CONTENT_SETTING_KEY.DISPLAY_FORMAT_TYPE, extra: React.createElement("div", { style: {
-                        display: 'flex',
-                        flexWrap: 'wrap',
-                        alignItems: 'center',
-                        gap: '8px',
-                        marginTop: '16px',
-                    } },
-                    dataType !== 'raw_string' ? (React.createElement(Text, { color: "#555", dangerouslySetInnerHTML: {
-                            __html: `${t(translations.dynamicContent.modal.label.displayFormat)}: <bdo dir='ltr'>${formatedAttr}</bdo>`,
-                        } })) : null,
-                    !showDetailEditDF && (React.createElement(Button, { disabled: isActionArchive &&
-                            selectedDynamicContentType !== DYNAMIC_CONTENT_TYPE.EVENT_ATTRIBUTE.value, type: "text", style: { display: 'inline-block' }, onClick: () => setShowDetailEditDF(prevShow => !prevShow) }, t(translations.edit.title)))) },
-                React.createElement(Select, { disabled: isActionArchive &&
-                        selectedDynamicContentType !== DYNAMIC_CONTENT_TYPE.EVENT_ATTRIBUTE.value, style: { height: 28 }, options: attrDFOptions }))));
+        return (_jsxs(_Fragment, { children: [_jsxs(Form.Item, { label: t(translations.dynamicContent.modal.label.personalizationName), name: DYNAMIC_CONTENT_SETTING_KEY.PERNAME, style: { alignItems: 'center' }, required: true, children: [_jsx(InputSuggestion, { onSelect: handleSelect, placeholder: "Custom function name...", options: searchValue.length > 0 ? listCustomTemplatesSearch : listCustomTemplates, onChange: onChangeDataInput, value: templateName }), hasError[DYNAMIC_CONTENT_SETTING_KEY.PERNAME] && (_jsx(Text, { type: "error", children: t(translations.dynamicContent.modal.error.perName) }))] }), _jsx(Form.Item, { style: { alignItems: 'center' }, label: t(translations.dynamicContent.modal.label.function), name: DYNAMIC_CONTENT_SETTING_KEY.FUNCTION, required: true, children: _jsx(EditorScript, { mode: "javascript", hideExpand: true }) }), _jsx(Form.Item, { style: { alignItems: 'center' }, label: t(translations.dynamicContent.modal.label.ouputDataType), name: DYNAMIC_CONTENT_SETTING_KEY.DATA_TYPE, required: true, children: _jsx(Select, { style: { height: 28 }, options: optionDataType }) }), _jsx(Form.Item, { style: { alignItems: 'start' }, required: true, label: t(translations.dynamicContent.modal.label.ouputFormat), name: DYNAMIC_CONTENT_SETTING_KEY.DISPLAY_FORMAT_TYPE, extra: _jsxs("div", { style: {
+                            display: 'flex',
+                            flexWrap: 'wrap',
+                            alignItems: 'center',
+                            gap: '8px',
+                            marginTop: '16px',
+                        }, children: [dataType !== 'raw_string' ? (_jsx(Text, { color: "#555", dangerouslySetInnerHTML: {
+                                    __html: `${t(translations.dynamicContent.modal.label.displayFormat)}: <bdo dir='ltr'>${formatedAttr}</bdo>`,
+                                } })) : null, !showDetailEditDF && (_jsx(Button, { disabled: isActionArchive &&
+                                    selectedDynamicContentType !== DYNAMIC_CONTENT_TYPE.EVENT_ATTRIBUTE.value, type: "text", style: { display: 'inline-block' }, onClick: () => setShowDetailEditDF(prevShow => !prevShow), children: t(translations.edit.title) }))] }), children: _jsx(Select, { disabled: isActionArchive &&
+                            selectedDynamicContentType !== DYNAMIC_CONTENT_TYPE.EVENT_ATTRIBUTE.value, style: { height: 28 }, options: attrDFOptions }) })] }));
     };
     const renderCustomerAttrFields = () => {
         if (hasError[DYNAMIC_CONTENT_SETTING_KEY.ATTRIBUTE]) {
-            return (React.createElement(Text, { type: "error" }, t(translations.dynamicContent.modal.error.customerAttr)));
+            return (_jsx(Text, { type: "error", children: t(translations.dynamicContent.modal.error.customerAttr) }));
         }
-        return (React.createElement(Form.Item, { style: { alignItems: 'center' }, initialValue: listCustomerAttributes[0], label: t(translations.dynamicContent.modal.label.attribute), name: DYNAMIC_CONTENT_SETTING_KEY.ATTRIBUTE, required: true },
-            React.createElement(Select, { loading: isFetchingDynamicContentAttr, style: { height: 28 }, labelInValue: true, 
+        return (_jsx(Form.Item, { style: { alignItems: 'center' }, initialValue: listCustomerAttributes[0], label: t(translations.dynamicContent.modal.label.attribute), name: DYNAMIC_CONTENT_SETTING_KEY.ATTRIBUTE, required: true, children: _jsx(Select, { loading: isFetchingDynamicContentAttr, style: { height: 28 }, labelInValue: true, 
                 // errorArchive={errorMessageAttr}
-                disabled: isActionArchive, options: buildOptionAttrArchive(listCustomerAttributes, selectedAttr), showSearch: true })));
+                disabled: isActionArchive, options: buildOptionAttrArchive(listCustomerAttributes, selectedAttr), showSearch: true }) }));
     };
     const renderEventAttrFields = () => {
-        var _a;
         if (hasError[DYNAMIC_CONTENT_SETTING_KEY.ATTRIBUTE]) {
-            return (React.createElement(Text, { type: "error" }, t(translations.dynamicContent.modal.error.eventAttr)));
+            return (_jsx(Text, { type: "error", children: t(translations.dynamicContent.modal.error.eventAttr) }));
         }
-        return (React.createElement(React.Fragment, null,
-            React.createElement(Form.Item, { style: { alignItems: 'center' }, label: t(translations.dynamicContent.modal.label.selectEventAttr), name: DYNAMIC_CONTENT_SETTING_KEY.ATTRIBUTE, required: true },
-                React.createElement(TreeSelect, { loading: isFetchingEventAttr || !(listEvents === null || listEvents === void 0 ? void 0 : listEvents.length), style: { height: 28 }, labelInValue: true, showSearch: true }, listEventAttributes &&
-                    listEventAttributes.map((attr) => {
-                        var _a, _b, _c;
-                        return (React.createElement(TreeNode, { key: attr.value, value: attr.value, selectable: !((_a = attr === null || attr === void 0 ? void 0 : attr.children) === null || _a === void 0 ? void 0 : _a.length), title: ((_b = attr.children) === null || _b === void 0 ? void 0 : _b.length) ? (React.createElement("div", { onClick: () => handleOnClickParentNode(attr) }, attr.label)) : (attr.label) }, (_c = buildOptionAttrArchive(attr === null || attr === void 0 ? void 0 : attr.children, selectedAttr)) === null || _c === void 0 ? void 0 : _c.map((item) => (React.createElement(TreeNode, { key: item.value, value: item.value, title: item.label })))));
-                    }))),
-            form.getFieldValue(DYNAMIC_CONTENT_SETTING_KEY.ATTRIBUTE) &&
-                ((_a = form.getFieldValue(DYNAMIC_CONTENT_SETTING_KEY.ATTRIBUTE)) === null || _a === void 0 ? void 0 : _a.status) !== 1 && (React.createElement(Text, { type: "warning" }, t(translations.dynamicContent.modal.message.selectDisableEventAttr)))));
+        return (_jsxs(_Fragment, { children: [_jsx(Form.Item, { style: { alignItems: 'center' }, label: t(translations.dynamicContent.modal.label.selectEventAttr), name: DYNAMIC_CONTENT_SETTING_KEY.ATTRIBUTE, required: true, children: _jsx(TreeSelect, { loading: isFetchingEventAttr || !listEvents?.length, style: { height: 28 }, labelInValue: true, showSearch: true, children: listEventAttributes &&
+                            listEventAttributes.map((attr) => (_jsx(TreeNode, { value: attr.value, selectable: !attr?.children?.length, title: attr.children?.length ? (_jsx("div", { onClick: () => handleOnClickParentNode(attr), children: attr.label })) : (attr.label), children: buildOptionAttrArchive(attr?.children, selectedAttr)?.map((item) => (_jsx(TreeNode, { value: item.value, title: item.label }, item.value))) }, attr.value))) }) }), form.getFieldValue(DYNAMIC_CONTENT_SETTING_KEY.ATTRIBUTE) &&
+                    form.getFieldValue(DYNAMIC_CONTENT_SETTING_KEY.ATTRIBUTE)?.status !== 1 && (_jsx(Text, { type: "warning", children: t(translations.dynamicContent.modal.message.selectDisableEventAttr) }))] }));
     };
     const renderEventFields = () => {
         if (hasError[DYNAMIC_CONTENT_SETTING_KEY.EVENT]) {
-            return (React.createElement(Text, { type: "error" }, t(translations.dynamicContent.modal.error.eventBySource)));
+            return (_jsx(Text, { type: "error", children: t(translations.dynamicContent.modal.error.eventBySource) }));
         }
-        return (React.createElement(Form.Item, { style: { alignItems: 'center' }, label: t(translations.dynamicContent.modal.label.selectEvent), name: DYNAMIC_CONTENT_SETTING_KEY.EVENT, required: true, preserve: false },
-            React.createElement(Select, { disabled: !!(triggerEvent === null || triggerEvent === void 0 ? void 0 : triggerEvent.eventActionId) && !!(triggerEvent === null || triggerEvent === void 0 ? void 0 : triggerEvent.eventCategoryId), loading: isFetchingEventBySource, style: { height: 28 }, options: listEvents, showSearch: true })));
+        return (_jsx(Form.Item, { style: { alignItems: 'center' }, label: t(translations.dynamicContent.modal.label.selectEvent), name: DYNAMIC_CONTENT_SETTING_KEY.EVENT, required: true, preserve: false, children: _jsx(Select, { disabled: !!triggerEvent?.eventActionId && !!triggerEvent?.eventCategoryId, loading: isFetchingEventBySource, style: { height: 28 }, options: listEvents, showSearch: true }) }));
     };
     const renderSourceFields = () => {
         if (hasError[DYNAMIC_CONTENT_SETTING_KEY.SOURCE]) {
-            return (React.createElement(Text, { type: "error" }, t(translations.dynamicContent.modal.error.source)));
+            return (_jsx(Text, { type: "error", children: t(translations.dynamicContent.modal.error.source) }));
         }
-        return (React.createElement(Form.Item, { style: { alignItems: 'center' }, label: t(translations.dynamicContent.modal.label.selectSource), name: DYNAMIC_CONTENT_SETTING_KEY.SOURCE, required: true },
-            React.createElement(Select, { disabled: !isEmpty(triggerEvent === null || triggerEvent === void 0 ? void 0 : triggerEvent.insightPropertyIds), mode: "multiple", loading: isFetchingSourceBO, options: listSources, showSearch: true })));
+        return (_jsx(Form.Item, { style: { alignItems: 'center' }, label: t(translations.dynamicContent.modal.label.selectSource), name: DYNAMIC_CONTENT_SETTING_KEY.SOURCE, required: true, children: _jsx(Select, { disabled: !isEmpty(triggerEvent?.insightPropertyIds), mode: "multiple", loading: isFetchingSourceBO, options: listSources, showSearch: true }) }));
     };
     const renderPromotionCodeAttr = () => {
         if (hasError[DYNAMIC_CONTENT_SETTING_KEY.ATTRIBUTE]) {
-            return (React.createElement(Text, { type: "error" }, t(translations.dynamicContent.modal.error.promotionCodeAttr)));
+            return (_jsx(Text, { type: "error", children: t(translations.dynamicContent.modal.error.promotionCodeAttr) }));
         }
-        return (React.createElement(Form.Item, { style: { alignItems: 'center' }, label: t(translations.dynamicContent.modal.label.promotionCodeAttr), name: DYNAMIC_CONTENT_SETTING_KEY.ATTRIBUTE, required: true },
-            React.createElement(Select, { loading: isFetchingPromotionCodeAttr, style: { height: 28 }, labelInValue: true, options: buildOptionAttrArchive(listPromotionCodeAttributes || [], selectedAttr), showSearch: true, 
+        return (_jsx(Form.Item, { style: { alignItems: 'center' }, label: t(translations.dynamicContent.modal.label.promotionCodeAttr), name: DYNAMIC_CONTENT_SETTING_KEY.ATTRIBUTE, required: true, children: _jsx(Select, { loading: isFetchingPromotionCodeAttr, style: { height: 28 }, labelInValue: true, options: buildOptionAttrArchive(listPromotionCodeAttributes || [], selectedAttr), showSearch: true, 
                 // errorArchive={errorMessageAttr}
-                disabled: isActionArchive })));
+                disabled: isActionArchive }) }));
     };
     const renderPromotionPoolFields = () => {
         if (hasError[DYNAMIC_CONTENT_SETTING_KEY.PROMOTION_POOL]) {
-            return (React.createElement(Text, { type: "error" }, t(translations.dynamicContent.modal.error.promotionPools)));
+            return (_jsx(Text, { type: "error", children: t(translations.dynamicContent.modal.error.promotionPools) }));
         }
-        return (React.createElement(Form.Item, { style: { alignItems: 'center' }, label: t(translations.dynamicContent.modal.label.promotionPools), name: DYNAMIC_CONTENT_SETTING_KEY.PROMOTION_POOL, required: true },
-            React.createElement(Select, { loading: isFetchingPromotionPool, style: { height: 28 }, options: listPromotionPools, showSearch: true })));
+        return (_jsx(Form.Item, { style: { alignItems: 'center' }, label: t(translations.dynamicContent.modal.label.promotionPools), name: DYNAMIC_CONTENT_SETTING_KEY.PROMOTION_POOL, required: true, children: _jsx(Select, { loading: isFetchingPromotionPool, style: { height: 28 }, options: listPromotionPools, showSearch: true }) }));
     };
     const renderVisitorAttrFields = () => {
         if (hasError[DYNAMIC_CONTENT_SETTING_KEY.ATTRIBUTE]) {
-            return (React.createElement(Text, { type: "error" }, t(translations.dynamicContent.modal.error.visitorAttr)));
+            return (_jsx(Text, { type: "error", children: t(translations.dynamicContent.modal.error.visitorAttr) }));
         }
-        return (React.createElement(Form.Item, { style: { alignItems: 'center' }, initialValue: listVisitorAttributes[0], label: t(translations.dynamicContent.modal.label.attribute), name: DYNAMIC_CONTENT_SETTING_KEY.ATTRIBUTE, required: true },
-            React.createElement(Select, { loading: isFetchingDynamicContentAttr, style: { height: 28 }, labelInValue: true, options: buildOptionAttrArchive(listVisitorAttributes, selectedAttr === null || selectedAttr === void 0 ? void 0 : selectedAttr.value), showSearch: true, 
+        return (_jsx(Form.Item, { style: { alignItems: 'center' }, initialValue: listVisitorAttributes[0], label: t(translations.dynamicContent.modal.label.attribute), name: DYNAMIC_CONTENT_SETTING_KEY.ATTRIBUTE, required: true, children: _jsx(Select, { loading: isFetchingDynamicContentAttr, style: { height: 28 }, labelInValue: true, options: buildOptionAttrArchive(listVisitorAttributes, selectedAttr?.value), showSearch: true, 
                 // errorArchive={errorMessageAttr}
-                disabled: isActionArchive })));
+                disabled: isActionArchive }) }));
     };
     const renderDisplayFormat = () => {
         const selectedAttr = form.getFieldValue(DYNAMIC_CONTENT_SETTING_KEY.ATTRIBUTE);
         if (formSubmitDisabled ||
             !attrDFSettings ||
             isEmpty(attrDFSettings) ||
-            !(selectedAttr === null || selectedAttr === void 0 ? void 0 : selectedAttr.dataType) ||
+            !selectedAttr?.dataType ||
             !attrDFOptions.length)
             return null;
         if (selectedAttr.dataType === 'number' || selectedAttr.dataType === 'datetime')
-            return (React.createElement(Form.Item, { initialValue: attrDFOptions[0].value, style: { alignItems: 'start' }, label: t(translations.dynamicContent.modal.label.displayFormat), name: DYNAMIC_CONTENT_SETTING_KEY.DISPLAY_FORMAT_TYPE, extra: React.createElement("div", { style: {
+            return (_jsx(Form.Item, { initialValue: attrDFOptions[0].value, style: { alignItems: 'start' }, label: t(translations.dynamicContent.modal.label.displayFormat), name: DYNAMIC_CONTENT_SETTING_KEY.DISPLAY_FORMAT_TYPE, extra: _jsxs("div", { style: {
                         display: 'flex',
                         flexWrap: 'wrap',
                         alignItems: 'center',
                         gap: '8px',
                         marginTop: '16px',
-                    } },
-                    React.createElement(Text, { color: "#555", dangerouslySetInnerHTML: {
-                            __html: `${t(translations.dynamicContent.modal.label.displayFormat)}: <bdo dir='ltr'>${formatedAttr}</bdo>`,
-                        } }),
-                    !showDetailEditDF && (React.createElement(Button, { disabled: isActionArchive &&
-                            selectedDynamicContentType !== DYNAMIC_CONTENT_TYPE.EVENT_ATTRIBUTE.value, type: "text", style: { display: 'inline-block' }, onClick: () => setShowDetailEditDF(prevShow => !prevShow) }, t(translations.edit.title)))) },
-                React.createElement(Select, { disabled: isActionArchive &&
-                        selectedDynamicContentType !== DYNAMIC_CONTENT_TYPE.EVENT_ATTRIBUTE.value, style: { height: 28 }, options: attrDFOptions })));
+                    }, children: [_jsx(Text, { color: "#555", dangerouslySetInnerHTML: {
+                                __html: `${t(translations.dynamicContent.modal.label.displayFormat)}: <bdo dir='ltr'>${formatedAttr}</bdo>`,
+                            } }), !showDetailEditDF && (_jsx(Button, { disabled: isActionArchive &&
+                                selectedDynamicContentType !== DYNAMIC_CONTENT_TYPE.EVENT_ATTRIBUTE.value, type: "text", style: { display: 'inline-block' }, onClick: () => setShowDetailEditDF(prevShow => !prevShow), children: t(translations.edit.title) }))] }), children: _jsx(Select, { disabled: isActionArchive &&
+                        selectedDynamicContentType !== DYNAMIC_CONTENT_TYPE.EVENT_ATTRIBUTE.value, style: { height: 28 }, options: attrDFOptions }) }));
         return null;
     };
     const renderDetailDFSettings = () => {
         if (showDetailEditDF && selectedDFType && attrDFSettings)
-            return (React.createElement("div", { style: {
+            return (_jsx("div", { style: {
                     border: '1px solid #9e9e9e',
                     borderRadius: '2px',
                     padding: '8px',
@@ -1193,48 +1203,24 @@ export const AddDynamicContent = props => {
                     display: 'flex',
                     flexDirection: 'column',
                     gap: '8px',
-                } },
-                React.createElement(DisplayFormat, { infos: infos, url: url, displayFormatType: selectedDFType, formatSettings: attrDFSettings, onSettingsChange: (values) => setAttrDFSettings(values), dynamicContentType: form.getFieldValue(DYNAMIC_CONTENT_SETTING_KEY.DYNAMIC_CONTENT_TYPE) })));
+                }, children: _jsx(DisplayFormat, { infos: infos, url: url, displayFormatType: selectedDFType, formatSettings: attrDFSettings, onSettingsChange: (values) => setAttrDFSettings(values), dynamicContentType: form.getFieldValue(DYNAMIC_CONTENT_SETTING_KEY.DYNAMIC_CONTENT_TYPE) }) }));
     };
-    return (React.createElement(ModalCustom, { closable: false, destroyOnClose: true, forceRender: true, mask: true, okButtonProps: { disabled: formSubmitDisabled }, title: modalTitle || t(translations.dynamicContent.modal.title.addDynamicContent), visible: visible, onCancel: handleOnCancelModal, onOk: handleOnOkModal },
-        React.createElement(Spin, { spinning: isFetchingSourceBO ||
+    return (_jsx(ModalCustom, { closable: false, destroyOnClose: true, forceRender: true, mask: true, okButtonProps: { disabled: formSubmitDisabled }, title: modalTitle || t(translations.dynamicContent.modal.title.addDynamicContent), visible: visible, onCancel: handleOnCancelModal, onOk: handleOnOkModal, children: _jsxs(Spin, { spinning: isFetchingSourceBO ||
                 isFetchingListBoAttr ||
                 isFetchingEventAttr ||
                 isFetchingPromotionPool ||
                 isFetchingPromotionCodeAttr ||
-                isFetchingDynamicContentAttr },
-            React.createElement(Form, { style: { width: '100%' }, form: form, labelAlign: "left", labelCol: { span: 9 }, wrapperCol: { span: 15 }, onValuesChange: handleFormValuesChanges, initialValues: {
-                    [DYNAMIC_CONTENT_SETTING_KEY.DYNAMIC_CONTENT_TYPE]: listDynamicContentTypes[0].value,
-                } },
-                React.createElement(Form.Item, { style: { alignItems: 'center' }, label: t(translations.dynamicContent.modal.label.contentSource), name: DYNAMIC_CONTENT_SETTING_KEY.DYNAMIC_CONTENT_TYPE, required: true },
-                    React.createElement(Select, { style: { height: 28 }, options: listDynamicContentTypes })),
-                selectedDynamicContentType === DYNAMIC_CONTENT_TYPE.VISITOR_ATTRIBUTE.value && (React.createElement(React.Fragment, null, renderVisitorAttrFields())),
-                selectedDynamicContentType === DYNAMIC_CONTENT_TYPE.CUSTOMER_ATTRIBUTE.value && (React.createElement(React.Fragment, null, renderCustomerAttrFields())),
-                selectedDynamicContentType === CUSTOM_TYPE.value && React.createElement(React.Fragment, null, renderCustomFunctionFields()),
-                selectedDynamicContentType === DYNAMIC_CONTENT_TYPE.EVENT_ATTRIBUTE.value && (React.createElement(React.Fragment, null,
-                    renderEventFields(),
-                    renderSourceFields(),
-                    renderEventAttrFields(),
-                    isShowEventIndexField
-                        ? renderIndexFields({ disabled: false, loading: false })
-                        : null)),
-                selectedDynamicContentType === DYNAMIC_CONTENT_TYPE.PROMOTION_CODE.value && (React.createElement(React.Fragment, null,
-                    renderPromotionPoolFields(),
-                    renderPromotionCodeAttr())),
-                selectedDynamicContentType && regexCSType.test(selectedDynamicContentType) && (React.createElement(React.Fragment, null,
-                    renderBoAttrFields(),
-                    renderIndexFields({ disabled: isActionArchive, loading: isFetchingListBoAttr }))),
-                showDisplayFormat && renderDisplayFormat()),
-            showDisplayFormat && renderDisplayFormat() !== null && renderDetailDFSettings(),
-            isShowCustomFunction && selectedDynamicContentType === CUSTOM_TYPE.value && (React.createElement("div", { style: {
-                    display: 'flex',
-                    alignItems: 'center',
-                    justifyContent: 'start',
-                    marginBottom: '8px',
-                    marginTop: '10px',
-                } },
-                React.createElement(Checkbox, { onChange: handleSaveAsTemplate, checked: saveAsTemplate },
-                    React.createElement("span", { style: { fontSize: '12px' } }, t(translations.dynamicContent.modal.label.saveTemplate))))))));
+                isFetchingDynamicContentAttr, children: [_jsxs(Form, { style: { width: '100%' }, form: form, labelAlign: "left", labelCol: { span: 9 }, wrapperCol: { span: 15 }, onValuesChange: handleFormValuesChanges, initialValues: {
+                        [DYNAMIC_CONTENT_SETTING_KEY.DYNAMIC_CONTENT_TYPE]: listDynamicContentTypes[0].value,
+                    }, children: [_jsx(Form.Item, { style: { alignItems: 'center' }, label: t(translations.dynamicContent.modal.label.contentSource), name: DYNAMIC_CONTENT_SETTING_KEY.DYNAMIC_CONTENT_TYPE, required: true, children: _jsx(Select, { style: { height: 28 }, options: listDynamicContentTypes }) }), selectedDynamicContentType === DYNAMIC_CONTENT_TYPE.VISITOR_ATTRIBUTE.value && (_jsx(_Fragment, { children: renderVisitorAttrFields() })), selectedDynamicContentType === DYNAMIC_CONTENT_TYPE.CUSTOMER_ATTRIBUTE.value && (_jsx(_Fragment, { children: renderCustomerAttrFields() })), selectedDynamicContentType === CUSTOM_TYPE.value && _jsx(_Fragment, { children: renderCustomFunctionFields() }), selectedDynamicContentType === DYNAMIC_CONTENT_TYPE.EVENT_ATTRIBUTE.value && (_jsxs(_Fragment, { children: [renderEventFields(), renderSourceFields(), renderEventAttrFields(), isShowEventIndexField
+                                    ? renderIndexFields({ disabled: false, loading: false })
+                                    : null] })), selectedDynamicContentType === DYNAMIC_CONTENT_TYPE.PROMOTION_CODE.value && (_jsxs(_Fragment, { children: [renderPromotionPoolFields(), renderPromotionCodeAttr()] })), selectedDynamicContentType && regexCSType.test(selectedDynamicContentType) && (_jsxs(_Fragment, { children: [renderBoAttrFields(), renderIndexFields({ disabled: isActionArchive, loading: isFetchingListBoAttr })] })), showDisplayFormat && renderDisplayFormat()] }), showDisplayFormat && renderDisplayFormat() !== null && renderDetailDFSettings(), isShowCustomFunction && selectedDynamicContentType === CUSTOM_TYPE.value && (_jsx("div", { style: {
+                        display: 'flex',
+                        alignItems: 'center',
+                        justifyContent: 'start',
+                        marginBottom: '8px',
+                        marginTop: '10px',
+                    }, children: _jsx(Checkbox, { onChange: handleSaveAsTemplate, checked: saveAsTemplate, children: _jsx("span", { style: { fontSize: '12px' }, children: t(translations.dynamicContent.modal.label.saveTemplate) }) }) }))] }) }));
 };
 AddDynamicContent.defaultProps = {
     showDisplayFormat: true,