@antscorp/antsomi-ui 1.3.4 → 1.3.5-beta.2

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

@@ -0,0 +1,1248 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+/* eslint-disable 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';
+// Hooks
+import { useDeepCompareEffect, useDeepCompareMemo } from '@antscorp/antsomi-ui/es/hooks';
+// Components
+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 { useGetEventTrackingAttributes } from '@antscorp/antsomi-ui/es/queries/ThirdParty';
+// Queries config
+import { queryClientAntsomiUI } from '@antscorp/antsomi-ui/es/queries/configs';
+import { QUERY_KEYS } from '@antscorp/antsomi-ui/es/constants/queries';
+import { dateExample } from './components/FormatDatetime';
+import DisplayFormat from './components/DisplayFormat';
+// Constants
+import { DYNAMIC_CONTENT_SETTING_KEY, DYNAMIC_CONTENT_TYPE, DYNAMIC_CONTENT_ATTR_DF_TYPE, DATA_TYPE, ATTRIBUTE_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';
+// Style
+import { InputSuggestion, ModalCustom } from './styled';
+import { EditorScript } from '../EditorScript';
+const getMembers = (member) => {
+    if (!member.children || !member.children.length) {
+        return member;
+    }
+    return [member, member.children];
+};
+const PATH = 'src/components/molecules/AddDynamicContent/AddDynamicContent.tsx';
+const initNumberDFSettings = {
+    grouping: ',',
+    decimal: '.',
+    decimalPlaces: 2,
+    isCompact: false,
+    currencyCode: 'USD',
+    prefixType: 'code',
+};
+const initDatetimeDFSettings = {
+    hasDateFormat: true,
+    hasTimeFormat: true,
+    dateParseOption: 'medium',
+    timeParseOption: 'medium',
+    dateParseFormat: 'MM/DD/YYYY',
+    timeParseFormat: '12hour',
+};
+const defaultDynamicTypes = [...Object.values(DYNAMIC_CONTENT_TYPE)]
+    .filter((i) => i.value !== 'bo-settings')
+    .sort((a, b) => a.index - b.index);
+const optionDataType = [...Object.values(DATA_TYPE)];
+export const AddDynamicContent = props => {
+    //* Props
+    const { defaultData = {}, defaultDynamicIndex = 1, visible, showDisplayFormat, showIndex, journeySettings, contentSources, APIConfig, isShowCustomFunction = false, modalTitle, } = props;
+    const { accountId, userId, token, domain, slug } = APIConfig;
+    const infos = { accountId, userId, token };
+    const { onCancel, onOk, additionalAttrProperties = [] } = props;
+    const url = useMemo(() => `${domain}${slug}`, [domain, slug]);
+    // Hook Queries
+    const { mutate: addSavedCSFunction } = useAddSavedCSFunction();
+    const { data: customFunction } = useGetCustomFunction({ url }, infos);
+    const { mutate: updateCSFunction } = useUpdateCSFunction();
+    //* Hooks
+    const { t, language } = i18nInstance;
+    //* Selectors
+    const { triggerEvent } = journeySettings;
+    const [itemTypeId, setItemTypeId] = useState(null);
+    // Form states
+    const [form] = Form.useForm();
+    const selectedDynamicContentType = Form.useWatch(DYNAMIC_CONTENT_SETTING_KEY.DYNAMIC_CONTENT_TYPE, form);
+    const selectedAttr = Form.useWatch(DYNAMIC_CONTENT_SETTING_KEY.ATTRIBUTE, form);
+    const selectedDFType = Form.useWatch(DYNAMIC_CONTENT_SETTING_KEY.DISPLAY_FORMAT_TYPE, form);
+    const selectedEventSource = Form.useWatch(DYNAMIC_CONTENT_SETTING_KEY.EVENT, form);
+    const selectedSource = Form.useWatch(DYNAMIC_CONTENT_SETTING_KEY.SOURCE, form);
+    const selectedBoIndex = Form.useWatch(DYNAMIC_CONTENT_SETTING_KEY.INDEX, form);
+    const [formSubmitDisabled, setFormSubmitDisabled] = useState(true);
+    const [saveAsTemplate, setsaveAsTemplate] = useState(false);
+    const [hasError, setHasError] = useState({
+        [DYNAMIC_CONTENT_SETTING_KEY.EVENT]: false,
+        [DYNAMIC_CONTENT_SETTING_KEY.INDEX]: false,
+        [DYNAMIC_CONTENT_SETTING_KEY.ATTRIBUTE]: false,
+        [DYNAMIC_CONTENT_SETTING_KEY.PROMOTION_POOL]: false,
+        [DYNAMIC_CONTENT_SETTING_KEY.SOURCE]: false,
+        [DYNAMIC_CONTENT_SETTING_KEY.FUNCTION]: false,
+        [DYNAMIC_CONTENT_SETTING_KEY.PERNAME]: false,
+    });
+    // Queries
+    const { data: listBO } = useGetListBO({ url }, infos);
+    // defaultSettings
+    const [defaultAttrDFSetings, setDefaultAttrDFSetings] = useState(null);
+    // Variables
+    const [eventActionId, eventCategoryId] = (selectedEventSource === null || selectedEventSource === void 0 ? void 0 : selectedEventSource.split(':').map(Number)) || [];
+    // Selection Options states
+    const [listDynamicContentTypes, setListDynamicContentTypes] = useState(defaultDynamicTypes);
+    const [listCustomerAttributes, setListCustomerAttributes] = useState([]);
+    const [listVisitorAttributes, setListVisitorAttributes] = useState([]);
+    const [listCustomTemplates, setlistCustomTemplates] = useState([]);
+    const [listCustomTemplatesSearch, setlistCustomTemplatesSearch] = useState([]);
+    const [searchValue, setSearchValue] = useState('');
+    // Expanded keys in tree select
+    const [expandedEventAttributes, setExpandedEventAttributes] = useState([]);
+    const [isActionArchive, setActionArchive] = useState(false);
+    const [errorMessageAttr, setErrorMessageAttr] = useState();
+    // Number Display format
+    const [showDetailEditDF, setShowDetailEditDF] = useState(false);
+    const [formatedAttr, setFormatedAttr] = useState('');
+    const [attrDFSettings, setAttrDFSettings] = useState(undefined);
+    const [templateName, setTemplateName] = useState('');
+    const [attrDFOptions, setAttrDFOptions] = useState([]);
+    // Template Custom
+    const [templateId, settemplateId] = useState();
+    const { data: listBoAttributes = [], isFetching: isFetchingListBoAttr, isError: isErrorBoAttr, } = useGetListAttributeBO({
+        url,
+        itemTypeIds: itemTypeId ? [itemTypeId] : [],
+        options: {
+            onSuccess: (data) => {
+                setHasError({
+                    [DYNAMIC_CONTENT_SETTING_KEY.ATTRIBUTE]: false,
+                    [DYNAMIC_CONTENT_SETTING_KEY.INDEX]: false,
+                });
+                if (data.length &&
+                    selectedDynamicContentType &&
+                    regexCSType.test(selectedDynamicContentType)) {
+                    if (form.getFieldValue(DYNAMIC_CONTENT_SETTING_KEY.ATTRIBUTE) &&
+                        form.getFieldValue(DYNAMIC_CONTENT_SETTING_KEY.INDEX))
+                        return;
+                    form.setFieldsValue({
+                        [DYNAMIC_CONTENT_SETTING_KEY.ATTRIBUTE]: data[0],
+                        [DYNAMIC_CONTENT_SETTING_KEY.INDEX]: defaultDynamicIndex,
+                    });
+                }
+            },
+            select: (data) => serilizeBOAttr(data, additionalAttrProperties),
+            onError: (error) => {
+                setHasError({
+                    [DYNAMIC_CONTENT_SETTING_KEY.ATTRIBUTE]: true,
+                    [DYNAMIC_CONTENT_SETTING_KEY.INDEX]: true,
+                });
+                handleError(error, {
+                    path: PATH,
+                    name: 'useGetListAttributeBO',
+                    args: error === null || error === void 0 ? void 0 : error.message,
+                });
+            },
+            enabled: !!itemTypeId,
+        },
+    }, infos);
+    const { data: dynamicContentAttr, isFetching: isFetchingDynamicContentAttr, isError: isErrorDynamicContentAttr, } = useGetDynamicContentAttr({ url }, infos, {
+        onSuccess: () => {
+            setHasError({
+                [DYNAMIC_CONTENT_SETTING_KEY.ATTRIBUTE]: false,
+            });
+        },
+        onError: (error) => {
+            setHasError({
+                [DYNAMIC_CONTENT_SETTING_KEY.ATTRIBUTE]: true,
+            });
+            handleError(error, {
+                path: PATH,
+                name: 'useGetDynamicContentAttr',
+                args: error === null || error === void 0 ? void 0 : error.message,
+            });
+        },
+    });
+    const { data: listSources, isFetching: isFetchingSourceBO } = useGetListSourceByEvent({
+        apiConfig: {
+            url,
+        },
+        infos,
+        eventActionId,
+        eventCategoryId,
+        options: {
+            onSuccess: () => {
+                setHasError({ [DYNAMIC_CONTENT_SETTING_KEY.SOURCE]: false });
+            },
+            select: (data) => {
+                const { rows } = data || {};
+                return rows.map((row) => ({
+                    label: row.label,
+                    value: row.value,
+                }));
+            },
+            onError: (error) => {
+                setHasError({ [DYNAMIC_CONTENT_SETTING_KEY.SOURCE]: true });
+                handleError(error, {
+                    path: PATH,
+                    name: 'useGetListSourceBO',
+                    args: error === null || error === void 0 ? void 0 : error.message,
+                });
+            },
+        },
+    });
+    const { data: listEvents, isFetching: isFetchingEventBySource } = useGetListAllEvents({
+        apiConfig: {
+            url,
+        },
+        infos,
+        options: {
+            onSuccess: (data) => {
+                setHasError({ [DYNAMIC_CONTENT_SETTING_KEY.EVENT]: false });
+                if (!isEmpty(data) &&
+                    selectedDynamicContentType === DYNAMIC_CONTENT_TYPE.EVENT_ATTRIBUTE.value) {
+                    form.setFieldsValue({
+                        [DYNAMIC_CONTENT_SETTING_KEY.EVENT]: data[0].value,
+                    });
+                }
+            },
+            onError: (error) => {
+                setHasError({ [DYNAMIC_CONTENT_SETTING_KEY.EVENT]: true });
+                handleError(error, {
+                    path: PATH,
+                    name: 'useGetListEventBySource',
+                    args: error === null || error === void 0 ? void 0 : error.message,
+                });
+            },
+            select: (data) => {
+                const { rows = [] } = data || {};
+                return rows.map((event) => ({
+                    label: event.label,
+                    value: `${event.eventActionId}:${event.eventCategoryId}`,
+                }));
+            },
+        },
+    });
+    const { data: listEventAttributes, isFetching: isFetchingEventAttr, isError: isErrorEventAttr, } = useGetListEventAttr({ url }, infos, selectedEventSource || '', Array.isArray(selectedSource) ? selectedSource.join(',') : selectedSource || '', {
+        onSuccess: () => setHasError({ [DYNAMIC_CONTENT_SETTING_KEY.ATTRIBUTE]: false }),
+        onError: (error) => {
+            setHasError({ [DYNAMIC_CONTENT_SETTING_KEY.ATTRIBUTE]: true });
+            handleError(error, {
+                path: PATH,
+                name: 'useGetListEventAttr',
+                args: error === null || error === void 0 ? void 0 : error.message,
+            });
+        },
+        select: (data) => serilizeEventAttr(data, language, additionalAttrProperties),
+    });
+    const { data: listPromotionPools, isFetching: isFetchingPromotionPool } = useGetListPromotionPool({ url }, infos, {
+        onSuccess: () => {
+            setHasError({
+                [DYNAMIC_CONTENT_SETTING_KEY.PROMOTION_POOL]: false,
+            });
+        },
+        select: (data) => serilizePromotionPool(data, additionalAttrProperties),
+        onError: (error) => {
+            setHasError({ [DYNAMIC_CONTENT_SETTING_KEY.ATTRIBUTE]: true });
+            handleError(error, {
+                path: PATH,
+                name: 'useGetListPromotionPool',
+                args: error === null || error === void 0 ? void 0 : error.message,
+            });
+        },
+    });
+    const { data: listPromotionCodeAttributes, isFetching: isFetchingPromotionCodeAttr, isError: isErrorListPromotionCodeAttr, } = useGetListPromotionCodeAttr({ url }, infos, {
+        onSuccess: () => {
+            setHasError({ [DYNAMIC_CONTENT_SETTING_KEY.ATTRIBUTE]: false });
+        },
+        select: (data) => data
+            .filter((attr) => +(attr === null || attr === void 0 ? void 0 : attr.status) === 1)
+            .map((attr) => ({
+            label: attr.propertyDisplayMultilang[language] ||
+                attr.propertyDisplayMultilang[get(attr, "propertyDisplayMultilang['DEFAULT_LANG']", 'EN')],
+            value: attr.itemPropertyName,
+            dataType: attr.dataType,
+            disabled: parseInt(attr.status) === 4,
+            status: attr.status,
+        })),
+        onError: (error) => {
+            setHasError({
+                [DYNAMIC_CONTENT_SETTING_KEY.ATTRIBUTE]: true,
+            });
+            handleError(error, {
+                path: PATH,
+                name: 'useGetPromotionCodeAttr',
+                args: error === null || error === void 0 ? void 0 : error.message,
+            });
+        },
+    });
+    const { data: eventTrackingAttributes } = useGetEventTrackingAttributes({
+        apiConfig: { url },
+        infos,
+        eventActionId,
+        eventCategoryId,
+    });
+    // Memo
+    const isShowEventIndexField = useDeepCompareMemo(() => {
+        if (selectedAttr && selectedDynamicContentType === DYNAMIC_CONTENT_TYPE.EVENT_ATTRIBUTE.value) {
+            if (selectedAttr.itemTypeId) {
+                return !!get(selectedAttr, 'eventPropertySyntax', '').includes('items');
+            }
+            return selectedAttr.type === ATTRIBUTE_TYPE.ITEM;
+        }
+        return false;
+    }, [selectedAttr, selectedDynamicContentType, eventTrackingAttributes === null || eventTrackingAttributes === void 0 ? void 0 : 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) || '';
+        }
+        return draftItemTypeName;
+    }, [itemTypeId, listBO]);
+    // Add BO settings (if exists) to list Dynamic content Type, or removed from the previous states
+    useEffect(() => {
+        const temp = [...defaultDynamicTypes];
+        contentSources.groups.forEach((g) => {
+            if (!g.itemTypeId)
+                return;
+            temp.push({
+                index: temp.length,
+                label: `${g.groupName} (${g.itemTypeDisplay})`,
+                value: `content-source::${g.groupId}::${g.itemTypeId}`,
+            });
+        });
+        if (isShowCustomFunction) {
+            temp.push(Object.assign(Object.assign({}, CUSTOM_TYPE), { index: temp.length }));
+        }
+        setListDynamicContentTypes(temp);
+    }, [contentSources.groups, isShowCustomFunction]);
+    useEffect(() => {
+        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 }));
+            });
+            setlistCustomTemplates(temp);
+        }
+    }, [customFunction, visible]);
+    useDeepCompareEffect(() => {
+        if (dynamicContentAttr) {
+            const { customer, visitor } = dynamicContentAttr;
+            const dynamicContentType = form.getFieldValue(DYNAMIC_CONTENT_SETTING_KEY.DYNAMIC_CONTENT_TYPE);
+            const parseCustomers = serilizeDynamicContentAttr(customer, language, additionalAttrProperties);
+            const parseVisitors = serilizeDynamicContentAttr(visitor, language, additionalAttrProperties);
+            setListCustomerAttributes(parseCustomers);
+            setListVisitorAttributes(parseVisitors);
+            if (form.getFieldValue(DYNAMIC_CONTENT_SETTING_KEY.ATTRIBUTE))
+                return;
+            if (dynamicContentType === DYNAMIC_CONTENT_TYPE.VISITOR_ATTRIBUTE.value) {
+                form.setFieldsValue({
+                    [DYNAMIC_CONTENT_SETTING_KEY.ATTRIBUTE]: getAvailableAttrs(parseVisitors)[0],
+                });
+            }
+            if (dynamicContentType === DYNAMIC_CONTENT_TYPE.CUSTOMER_ATTRIBUTE.value) {
+                form.setFieldsValue({
+                    [DYNAMIC_CONTENT_SETTING_KEY.ATTRIBUTE]: getAvailableAttrs(parseCustomers)[0],
+                });
+            }
+        }
+    }, [dynamicContentAttr, form, language]);
+    useDeepCompareEffect(() => {
+        if (listSources && selectedDynamicContentType === DYNAMIC_CONTENT_TYPE.EVENT_ATTRIBUTE.value) {
+            if (!isEmpty(form.getFieldValue(DYNAMIC_CONTENT_SETTING_KEY.SOURCE)))
+                return;
+            const defaultValue = listSources[0] ? [listSources[0].value] : [];
+            form.setFieldsValue({
+                [DYNAMIC_CONTENT_SETTING_KEY.SOURCE]: defaultValue,
+            });
+        }
+    }, [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]
+                : listEventAttributes[0];
+            if (form.getFieldValue(DYNAMIC_CONTENT_SETTING_KEY.ATTRIBUTE)) {
+                const eventAttr = form.getFieldValue(DYNAMIC_CONTENT_SETTING_KEY.ATTRIBUTE);
+                setExpandedEventAttributes([eventAttr.value.split('.')[0]]);
+                return;
+            }
+            form.setFieldsValue({
+                [DYNAMIC_CONTENT_SETTING_KEY.ATTRIBUTE]: initEventAttr,
+            });
+            setExpandedEventAttributes([initEventAttr.value.split('.')[0]]);
+        }
+    }, [selectedSource, selectedEventSource, listEventAttributes, form, selectedDynamicContentType]);
+    useDeepCompareEffect(() => {
+        if (listPromotionCodeAttributes &&
+            selectedDynamicContentType === DYNAMIC_CONTENT_TYPE.PROMOTION_CODE.value) {
+            if (form.getFieldValue(DYNAMIC_CONTENT_SETTING_KEY.ATTRIBUTE))
+                return;
+            form.setFieldsValue({
+                [DYNAMIC_CONTENT_SETTING_KEY.ATTRIBUTE]: getAvailableAttrs(listPromotionCodeAttributes)[0],
+            });
+        }
+    }, [selectedDynamicContentType, listPromotionCodeAttributes, form]);
+    // Update form field data with default data/ or reset it to initial states
+    const resetStateAndFormValueDF = useCallback(() => {
+        setShowDetailEditDF(false);
+        setAttrDFSettings(undefined);
+        setAttrDFOptions([]);
+        setFormatedAttr('');
+        setsaveAsTemplate(false);
+        setTemplateName('');
+        setSearchValue('');
+        form.setFieldsValue({
+            [DYNAMIC_CONTENT_SETTING_KEY.ATTRIBUTE]: undefined,
+            [DYNAMIC_CONTENT_SETTING_KEY.DISPLAY_FORMAT_TYPE]: undefined,
+            [DYNAMIC_CONTENT_SETTING_KEY.FUNCTION]: undefined,
+            [DYNAMIC_CONTENT_SETTING_KEY.DATA_TYPE]: optionDataType[0].value,
+        });
+    }, [form]);
+    useEffect(() => {
+        if (!visible) {
+            setTimeout(() => {
+                resetStateAndFormValueDF();
+            }, 200);
+        }
+    }, [visible, resetStateAndFormValueDF]);
+    useEffect(() => {
+        let listTmp = [];
+        switch (true) {
+            case selectedDynamicContentType && regexCSType.test(selectedDynamicContentType):
+                listTmp = [...listBoAttributes];
+                break;
+            case selectedDynamicContentType === DYNAMIC_CONTENT_TYPE.PROMOTION_CODE.value:
+                listTmp = listPromotionCodeAttributes ? [...listPromotionCodeAttributes] : [];
+                break;
+            case selectedDynamicContentType === DYNAMIC_CONTENT_TYPE.CUSTOMER_ATTRIBUTE.value:
+                listTmp = [...listCustomerAttributes];
+                break;
+            case selectedDynamicContentType === DYNAMIC_CONTENT_TYPE.VISITOR_ATTRIBUTE.value:
+                listTmp = [...listVisitorAttributes];
+                break;
+            default:
+                break;
+        }
+        const { errorMessage, isDisable } = checkStatusAttr({
+            listBO: listBO,
+            itemTypeId: itemTypeId || 0,
+            listAttribute: listTmp,
+            field: selectedAttr === null || selectedAttr === void 0 ? void 0 : 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 (draftDefaultData.type !== 'custom') {
+                if (triggerEvent === null || triggerEvent === void 0 ? void 0 : triggerEvent.eventActionId) {
+                    draftDefaultData = omit(draftDefaultData, ['event', 'source']);
+                }
+                form.setFieldsValue(draftDefaultData);
+                const defaultDMType = form.getFieldValue(DYNAMIC_CONTENT_SETTING_KEY.DYNAMIC_CONTENT_TYPE);
+                const defaultAttr = form.getFieldValue(DYNAMIC_CONTENT_SETTING_KEY.ATTRIBUTE);
+                if (defaultDMType && regexCSType.test(defaultDMType)) {
+                    const { itemTypeId } = serializeCSSelectedString(defaultDMType);
+                    if (!isNaN(itemTypeId))
+                        setItemTypeId(itemTypeId);
+                }
+                if (defaultAttr) {
+                    const defaultAttr = draftDefaultData[DYNAMIC_CONTENT_SETTING_KEY.ATTRIBUTE];
+                    // eslint-disable-next-line no-prototype-builtins
+                    if (!defaultAttr.hasOwnProperty('dataType'))
+                        return;
+                    let key = '';
+                    if (defaultAttr.dataType === 'number') {
+                        key = DYNAMIC_CONTENT_SETTING_KEY.DYNAMIC_CONTENT_NUMBERIC_ATTR_FORMAT_SETTINGS;
+                    }
+                    if (defaultAttr.dataType === 'datetime') {
+                        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"]);
+                        form.setFieldsValue({
+                            [DYNAMIC_CONTENT_SETTING_KEY.DISPLAY_FORMAT_TYPE]: type,
+                        });
+                        setDefaultAttrDFSetings({
+                            itemPropertyName: defaultAttr.value,
+                            settings: settingValues,
+                        });
+                        setAttrDFSettings(settingValues);
+                        setAttrDFOptions(DYNAMIC_CONTENT_ATTR_DF_TYPE.filter((dfType) => dfType.dataType === defaultAttr.dataType));
+                    }
+                }
+            }
+            else {
+                const { customFunction } = draftDefaultData;
+                const { outputFormat } = customFunction;
+                form.setFieldsValue({
+                    [DYNAMIC_CONTENT_SETTING_KEY.DYNAMIC_CONTENT_TYPE]: draftDefaultData.type,
+                    [DYNAMIC_CONTENT_SETTING_KEY.DISPLAY_FORMAT_TYPE]: outputFormat.type,
+                    [DYNAMIC_CONTENT_SETTING_KEY.DATA_TYPE]: customFunction.outputDataType,
+                    [DYNAMIC_CONTENT_SETTING_KEY.PERNAME]: customFunction.templateName,
+                    [DYNAMIC_CONTENT_SETTING_KEY.FUNCTION]: customFunction.customFunction,
+                });
+                setTemplateName(customFunction.templateName);
+                setAttrDFOptions(DYNAMIC_CONTENT_ATTR_DF_TYPE.filter((dfType) => dfType.dataType === customFunction.outputDataType));
+                setShowDetailEditDF(true);
+                setAttrDFSettings(customFunction.outputDataType === 'string' ? undefined : outputFormat.config);
+            }
+            // Check if trigger event of journey has event then don's set current event and source
+        }
+        else {
+            // Hard reset to Visitor attr
+            if (listVisitorAttributes) {
+                form.setFieldsValue({
+                    [DYNAMIC_CONTENT_SETTING_KEY.DYNAMIC_CONTENT_TYPE]: DYNAMIC_CONTENT_TYPE.VISITOR_ATTRIBUTE.value,
+                    [DYNAMIC_CONTENT_SETTING_KEY.ATTRIBUTE]: listVisitorAttributes[0],
+                });
+            }
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [defaultData, visible, form]);
+    useDeepCompareEffect(() => {
+        if (selectedDynamicContentType === DYNAMIC_CONTENT_TYPE.EVENT_ATTRIBUTE.value) {
+            const { eventActionId, eventCategoryId, insightPropertyIds } = triggerEvent || {};
+            if (!!eventActionId && !!eventCategoryId) {
+                form.setFieldsValue({
+                    [DYNAMIC_CONTENT_SETTING_KEY.EVENT]: `${eventActionId}:${eventCategoryId}`,
+                });
+            }
+            if (Array.isArray(insightPropertyIds) && insightPropertyIds.length) {
+                form.setFieldsValue({
+                    [DYNAMIC_CONTENT_SETTING_KEY.SOURCE]: insightPropertyIds,
+                });
+            }
+        }
+    }, [triggerEvent, selectedDynamicContentType]);
+    // Disable Apply button if there's any error
+    useLayoutEffect(() => {
+        setFormSubmitDisabled(Object.values(hasError).some(error => error));
+    }, [hasError]);
+    useLayoutEffect(() => {
+        if (selectedDynamicContentType === DYNAMIC_CONTENT_TYPE.VISITOR_ATTRIBUTE.value ||
+            selectedDynamicContentType === DYNAMIC_CONTENT_TYPE.CUSTOMER_ATTRIBUTE.value) {
+            setFormSubmitDisabled(isFetchingDynamicContentAttr);
+        }
+        if (selectedDynamicContentType === DYNAMIC_CONTENT_TYPE.EVENT_ATTRIBUTE.value) {
+            setFormSubmitDisabled(isFetchingSourceBO || isFetchingEventBySource || isFetchingEventAttr);
+        }
+        if (selectedDynamicContentType === DYNAMIC_CONTENT_TYPE.PROMOTION_CODE.value) {
+            setFormSubmitDisabled(isFetchingPromotionPool || isFetchingPromotionCodeAttr);
+        }
+        if (selectedDynamicContentType && regexCSType.test(selectedDynamicContentType)) {
+            setFormSubmitDisabled(isFetchingListBoAttr);
+        }
+    }, [
+        isFetchingDynamicContentAttr,
+        selectedDynamicContentType,
+        isFetchingSourceBO,
+        isFetchingEventBySource,
+        isFetchingEventAttr,
+        isFetchingPromotionPool,
+        isFetchingPromotionCodeAttr,
+        isFetchingListBoAttr,
+    ]);
+    useLayoutEffect(() => {
+        let formatedDFValue = '';
+        let settings = attrDFSettings;
+        const selectedAttr = form.getFieldValue(DYNAMIC_CONTENT_SETTING_KEY.ATTRIBUTE);
+        const dataType = form.getFieldValue(DYNAMIC_CONTENT_SETTING_KEY.DATA_TYPE);
+        const dynamicType = form.getFieldValue(DYNAMIC_CONTENT_SETTING_KEY.DYNAMIC_CONTENT_TYPE);
+        if ((Object.keys(defaultData).length > 0 && defaultData.type !== 'custom') ||
+            dynamicType !== 'custom') {
+            if (selectedAttr &&
+                selectedAttr.dataType &&
+                ['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) {
+                    // Visitor and Customer don't have additional field
+                    let equalDefaultAttr = true;
+                    // Event need check additional field source, event by soucre
+                    if (selectedDynamicContentType === DYNAMIC_CONTENT_TYPE.EVENT_ATTRIBUTE.value) {
+                        const source = form.getFieldValue(DYNAMIC_CONTENT_SETTING_KEY.SOURCE);
+                        const event = form.getFieldValue(DYNAMIC_CONTENT_SETTING_KEY.EVENT);
+                        if (source !== defaultData[DYNAMIC_CONTENT_SETTING_KEY.SOURCE] ||
+                            event !== defaultData[DYNAMIC_CONTENT_SETTING_KEY.EVENT])
+                            equalDefaultAttr = false;
+                    }
+                    // Promotion need check additional field promotion pool
+                    if (selectedDynamicContentType === DYNAMIC_CONTENT_TYPE.PROMOTION_CODE.value) {
+                        const pool = form.getFieldValue(DYNAMIC_CONTENT_SETTING_KEY.PROMOTION_POOL);
+                        if (pool !== defaultData[DYNAMIC_CONTENT_SETTING_KEY.PROMOTION_POOL])
+                            equalDefaultAttr = false;
+                    }
+                    // BO settings need check additional field index
+                    if (selectedDynamicContentType && regexCSType.test(selectedDynamicContentType)) {
+                        if (selectedBoIndex !== defaultData[DYNAMIC_CONTENT_SETTING_KEY.INDEX])
+                            equalDefaultAttr = false;
+                    }
+                    if (equalDefaultAttr) {
+                        settings = defaultAttrDFSetings.settings;
+                    }
+                }
+                // *********** //
+                // Numberic Attribute DF
+                if ((selectedAttr === null || selectedAttr === void 0 ? void 0 : selectedAttr.dataType) === 'number') {
+                    settings = settings !== null && settings !== void 0 ? 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 });
+                    formatedDFValue = formatDatetimeDF(dateExample, settings);
+                }
+                if (!attrDFOptions.length) {
+                    setAttrDFOptions(DYNAMIC_CONTENT_ATTR_DF_TYPE.filter((dfType) => dfType.dataType === selectedAttr.dataType));
+                }
+                setAttrDFSettings(settings);
+                setFormatedAttr(formatedDFValue);
+            }
+        }
+        if (dataType && ['datetime', 'number'].includes(dataType) && dynamicType === 'custom') {
+            // Numberic Attribute DF
+            if (dataType === 'number') {
+                settings = settings !== null && settings !== void 0 ? 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 });
+                formatedDFValue = formatDatetimeDF(dateExample, settings);
+            }
+            if (!attrDFOptions.length) {
+                setAttrDFOptions(DYNAMIC_CONTENT_ATTR_DF_TYPE.filter((dfType) => dfType.dataType === dataType));
+            }
+            setAttrDFSettings(settings);
+            setFormatedAttr(formatedDFValue);
+        }
+    }, [
+        attrDFSettings,
+        selectedDFType,
+        attrDFOptions.length,
+        language,
+        defaultAttrDFSetings,
+        form,
+        selectedAttr,
+        defaultData,
+        selectedDynamicContentType,
+        selectedBoIndex,
+    ]);
+    //* Handlers
+    const handleOnCancelModal = () => {
+        if (onCancel) {
+            onCancel();
+        }
+    };
+    const onChangeDataInput = (value) => {
+        setTemplateName(value);
+        let tempState = [...listCustomTemplates];
+        if (value.length > 0) {
+            tempState = tempState.filter(item => item.label.toLowerCase().includes(value.trim().toLowerCase()));
+        }
+        setlistCustomTemplatesSearch(tempState);
+        setSearchValue(value);
+    };
+    const handleSelect = (data) => {
+        const dataTmp = listCustomTemplates.filter(each => each.value === data);
+        settemplateId(dataTmp[0].template_id);
+        let dataFormat = dataTmp[0].output_format.type.toLowerCase();
+        switch (dataTmp[0].output_format.type) {
+            case 'DATE_AND_TIME':
+                dataFormat = 'date_and_time';
+                break;
+            case 'RAW_STRING':
+                dataFormat = 'raw_string';
+                break;
+            default:
+                break;
+        }
+        form.setFieldsValue({
+            [DYNAMIC_CONTENT_SETTING_KEY.FUNCTION]: dataTmp[0].custom_function,
+            [DYNAMIC_CONTENT_SETTING_KEY.DATA_TYPE]: dataTmp[0].output_data_type,
+            [DYNAMIC_CONTENT_SETTING_KEY.DISPLAY_FORMAT_TYPE]: dataFormat === 'date_and_time' ? 'datetime' : dataFormat,
+        });
+        setTemplateName(dataTmp[0].template_name);
+        setAttrDFOptions(DYNAMIC_CONTENT_ATTR_DF_TYPE.filter((dfType) => dfType.dataType === dataTmp[0].output_data_type));
+        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' }));
+                break;
+            }
+            case 'number':
+            case 'percentage': {
+                setAttrDFSettings(Object.assign(Object.assign({}, 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` }));
+                break;
+            }
+            case 'raw_string': {
+                setAttrDFSettings(undefined);
+                break;
+            }
+            default:
+                break;
+        }
+    };
+    const handleOnOkModal = () => {
+        if (isActionArchive &&
+            selectedDynamicContentType !== DYNAMIC_CONTENT_TYPE.EVENT_ATTRIBUTE.value) {
+            return;
+        }
+        form.validateFields().then((values) => {
+            var _a;
+            values = omit(values, 'dfType');
+            if (onOk) {
+                const type = form.getFieldValue(DYNAMIC_CONTENT_SETTING_KEY.DYNAMIC_CONTENT_TYPE);
+                if (type === 'custom') {
+                    const outputFormat = {};
+                    const perName = templateName;
+                    const functionCustom = form.getFieldValue(DYNAMIC_CONTENT_SETTING_KEY.FUNCTION);
+                    const dataType = form.getFieldValue(DYNAMIC_CONTENT_SETTING_KEY.DATA_TYPE);
+                    const displayFormat = form.getFieldValue([
+                        DYNAMIC_CONTENT_SETTING_KEY.DISPLAY_FORMAT_TYPE,
+                    ]);
+                    if (templateId && !saveAsTemplate) {
+                        try {
+                            updateCSFunction({
+                                url,
+                                infos,
+                                templateId,
+                                name: perName,
+                                dataType,
+                                functionCustom,
+                                dataFormat: attrDFSettings,
+                                displayFormat,
+                                outputFormat,
+                            });
+                        }
+                        catch (error) {
+                            handleError(error, {
+                                path: PATH,
+                                name: 'onClickSaveDynamicContent',
+                                args: {},
+                            });
+                        }
+                    }
+                    else if (saveAsTemplate) {
+                        try {
+                            addSavedCSFunction({
+                                url,
+                                infos,
+                                name: perName,
+                                dataType,
+                                functionCustom,
+                                dataFormat: attrDFSettings,
+                                displayFormat,
+                                outputFormat,
+                            });
+                        }
+                        catch (error) {
+                            handleError(error, {
+                                path: PATH,
+                                name: 'onClickSaveDynamicContent',
+                                args: {},
+                            });
+                        }
+                    }
+                    if (!showIndex) {
+                        values = omit(values, 'index');
+                    }
+                    const config = Object.assign({}, attrDFSettings);
+                    if (dataType === 'datetime') {
+                        config.dateFormatString = getStringFormatDateDF(attrDFSettings);
+                    }
+                    onOk(Object.assign(Object.assign({}, values), { customFunction: {
+                            outputFormat: {
+                                type: displayFormat,
+                                config,
+                            },
+                            templateCode: serializeLabelToCode(perName),
+                            templateName: perName,
+                            templateType: 'custom',
+                            customFunction: functionCustom,
+                            outputDataType: dataType,
+                        }, attribute: {
+                            label: perName,
+                            value: 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') {
+                        key = DYNAMIC_CONTENT_SETTING_KEY.DYNAMIC_CONTENT_NUMBERIC_ATTR_FORMAT_SETTINGS;
+                    }
+                    if ((selectedAttr === null || selectedAttr === void 0 ? void 0 : 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 });
+                    }
+                    // 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;
+                            if (itemTypeName) {
+                                set(values, 'attribute.itemTypeName', itemTypeName);
+                            }
+                        }
+                    }
+                    // Set itemTypeName if Selecting content source
+                    if (regexCSType.test(values.type) && !!itemTypeName) {
+                        set(values, 'attribute.itemTypeName', itemTypeName);
+                    }
+                    if (!showIndex) {
+                        values = omit(values, 'index');
+                    }
+                    const mappingFields = buildMappingFields(values);
+                    onOk(Object.assign(Object.assign({}, values), (mappingFields && { mappingFields })));
+                }
+            }
+        });
+    };
+    const handleOnClickParentNode = (item) => {
+        if (item.children.length) {
+            if (expandedEventAttributes.includes(item.value)) {
+                // close expand
+                const newExpandedKeys = expandedEventAttributes.filter(key => key !== item.value);
+                handleTreeExpand(newExpandedKeys);
+            }
+            else {
+                // open expand
+                handleTreeExpand((prev) => [...prev, item.value]);
+            }
+        }
+    };
+    const handleTreeExpand = (expandedKeys) => {
+        setExpandedEventAttributes(expandedKeys);
+    };
+    const handleSaveAsTemplate = () => {
+        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:
+                resetStateAndFormValueDF();
+                switch (true) {
+                    case fieldValue === DYNAMIC_CONTENT_TYPE.CUSTOMER_ATTRIBUTE.value:
+                        form.setFieldsValue({
+                            [DYNAMIC_CONTENT_SETTING_KEY.ATTRIBUTE]: getAvailableAttrs(listCustomerAttributes)[0],
+                        });
+                        setHasError({ [DYNAMIC_CONTENT_SETTING_KEY.ATTRIBUTE]: isErrorDynamicContentAttr });
+                        break;
+                    case fieldValue === DYNAMIC_CONTENT_TYPE.VISITOR_ATTRIBUTE.value:
+                        form.setFieldsValue({
+                            [DYNAMIC_CONTENT_SETTING_KEY.ATTRIBUTE]: getAvailableAttrs(listVisitorAttributes)[0],
+                        });
+                        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))
+                            break;
+                        form.setFieldsValue({
+                            [DYNAMIC_CONTENT_SETTING_KEY.EVENT]: listEvents[0].value,
+                            [DYNAMIC_CONTENT_SETTING_KEY.SOURCE]: undefined,
+                        });
+                        setHasError({ [DYNAMIC_CONTENT_SETTING_KEY.ATTRIBUTE]: isErrorEventAttr });
+                        break;
+                    case fieldValue === CUSTOM_TYPE.value:
+                        if (!(listEvents === null || listEvents === void 0 ? void 0 : listEvents.length))
+                            break;
+                        let formatedDFValue = '';
+                        let settings = attrDFSettings;
+                        settings = settings !== null && settings !== void 0 ? settings : initNumberDFSettings;
+                        formatedDFValue = formatNumberDF(1234.56789, selectedDFType, settings);
+                        setFormatedAttr(formatedDFValue);
+                        setAttrDFSettings(settings);
+                        form.setFieldsValue({
+                            [DYNAMIC_CONTENT_SETTING_KEY.DISPLAY_FORMAT_TYPE]: optionDataType[0].value,
+                            [DYNAMIC_CONTENT_SETTING_KEY.DATA_TYPE]: optionDataType[0].value,
+                        });
+                        setAttrDFOptions(DYNAMIC_CONTENT_ATTR_DF_TYPE.filter(dfType => dfType.dataType === optionDataType[0].value));
+                        setHasError({ [DYNAMIC_CONTENT_SETTING_KEY.ATTRIBUTE]: isErrorEventAttr });
+                        setShowDetailEditDF(true);
+                        break;
+                    case fieldValue === DYNAMIC_CONTENT_TYPE.PROMOTION_CODE.value:
+                        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.ATTRIBUTE]: getAvailableAttrs(listPromotionCodeAttributes)[0],
+                        });
+                        setHasError({ [DYNAMIC_CONTENT_SETTING_KEY.ATTRIBUTE]: isErrorListPromotionCodeAttr });
+                        break;
+                    case regexCSType.test(fieldValue): {
+                        const { itemTypeId: selectedItemTypeId } = serializeCSSelectedString(String(fieldValue));
+                        if (isNaN(selectedItemTypeId))
+                            break;
+                        setItemTypeId(Number(selectedItemTypeId));
+                        const key = [QUERY_KEYS.GET_EVENT_ATTRIBUTE_BO, [selectedItemTypeId]];
+                        const listAttBOByItemTypeId = serilizeBOAttr(queryClientAntsomiUI.getQueryData(key));
+                        if (listAttBOByItemTypeId.length) {
+                            form.setFieldsValue({
+                                [DYNAMIC_CONTENT_SETTING_KEY.ATTRIBUTE]: listAttBOByItemTypeId[0],
+                                [DYNAMIC_CONTENT_SETTING_KEY.INDEX]: defaultDynamicIndex,
+                            });
+                        }
+                        setHasError({ [DYNAMIC_CONTENT_SETTING_KEY.ATTRIBUTE]: isErrorBoAttr });
+                        break;
+                    }
+                    default: {
+                        break;
+                    }
+                }
+                break;
+            case DYNAMIC_CONTENT_SETTING_KEY.ATTRIBUTE:
+                let listAttributes = [];
+                switch (true) {
+                    case selectedDynamicContentType === DYNAMIC_CONTENT_TYPE.EVENT_ATTRIBUTE.value:
+                        if (!listEventAttributes)
+                            break;
+                        let newSelectEventAttr = listEventAttributes.find((row) => {
+                            if (row === null || row === void 0 ? void 0 : 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) {
+                            newSelectEventAttr = newSelectEventAttr.children.find((item) => item.value === fieldValue.value);
+                        }
+                        listAttributes = flatMapDeep(listEventAttributes, getMembers);
+                        form.setFieldsValue({ [DYNAMIC_CONTENT_SETTING_KEY.INDEX]: defaultDynamicIndex });
+                        break;
+                    case selectedDynamicContentType === DYNAMIC_CONTENT_TYPE.CUSTOMER_ATTRIBUTE.value:
+                        listAttributes = listCustomerAttributes;
+                        break;
+                    case selectedDynamicContentType === DYNAMIC_CONTENT_TYPE.PROMOTION_CODE.value:
+                        listAttributes = listPromotionCodeAttributes !== null && listPromotionCodeAttributes !== void 0 ? listPromotionCodeAttributes : [];
+                        break;
+                    case selectedDynamicContentType === DYNAMIC_CONTENT_TYPE.VISITOR_ATTRIBUTE.value:
+                        listAttributes = listVisitorAttributes;
+                        break;
+                    case selectedDynamicContentType && regexCSType.test(selectedDynamicContentType):
+                        form.setFieldsValue({ [DYNAMIC_CONTENT_SETTING_KEY.INDEX]: defaultDynamicIndex });
+                        if (!listBoAttributes)
+                            break;
+                        listAttributes = listBoAttributes;
+                        break;
+                    default: {
+                        break;
+                    }
+                }
+                // add dataType to
+                if (listAttributes.length) {
+                    const attr = listAttributes.find(attr => {
+                        if (attr.value === fieldValue.value) {
+                            return attr;
+                        }
+                        return null;
+                    });
+                    form.setFieldsValue({
+                        [DYNAMIC_CONTENT_SETTING_KEY.ATTRIBUTE]: attr,
+                    });
+                    // set new value for options display format
+                    if (attr) {
+                        const newAttrDFOptions = DYNAMIC_CONTENT_ATTR_DF_TYPE.filter((dfType) => dfType.dataType === attr.dataType);
+                        if (newAttrDFOptions.length) {
+                            form.setFieldsValue({
+                                [DYNAMIC_CONTENT_SETTING_KEY.DISPLAY_FORMAT_TYPE]: newAttrDFOptions[0].value,
+                            });
+                            setAttrDFOptions(newAttrDFOptions);
+                        }
+                        // reset detail display format settings
+                        setAttrDFSettings(undefined);
+                        setShowDetailEditDF(false);
+                    }
+                }
+                break;
+            case DYNAMIC_CONTENT_SETTING_KEY.INDEX:
+                break;
+            case DYNAMIC_CONTENT_SETTING_KEY.FUNCTION:
+                form.setFieldsValue({
+                    [DYNAMIC_CONTENT_SETTING_KEY.FUNCTION]: fieldValue,
+                });
+                break;
+            case DYNAMIC_CONTENT_SETTING_KEY.DATA_TYPE:
+                form.setFieldsValue({
+                    [DYNAMIC_CONTENT_SETTING_KEY.DATA_TYPE]: fieldValue,
+                    [DYNAMIC_CONTENT_SETTING_KEY.DISPLAY_FORMAT_TYPE]: fieldValue === 'string' ? 'raw_string' : fieldValue,
+                });
+                let settings = attrDFSettings;
+                // Datatime Attribute DF
+                if (fieldValue === 'datetime') {
+                    settings = Object.assign(Object.assign({}, initDatetimeDFSettings), { language });
+                }
+                else if (fieldValue === 'string') {
+                    settings = undefined;
+                }
+                setAttrDFOptions(DYNAMIC_CONTENT_ATTR_DF_TYPE.filter((dfType) => dfType.dataType === fieldValue));
+                setAttrDFSettings(settings);
+                break;
+            case DYNAMIC_CONTENT_SETTING_KEY.EVENT:
+                form.setFieldsValue({
+                    [DYNAMIC_CONTENT_SETTING_KEY.SOURCE]: undefined,
+                });
+                resetStateAndFormValueDF();
+                break;
+            case DYNAMIC_CONTENT_SETTING_KEY.SOURCE:
+                resetStateAndFormValueDF();
+                break;
+            case DYNAMIC_CONTENT_SETTING_KEY.DISPLAY_FORMAT_TYPE:
+                switch (fieldValue) {
+                    case 'currency': {
+                        setAttrDFSettings(Object.assign(Object.assign({}, initNumberDFSettings), { decimalPlaces: 1 }));
+                        break;
+                    }
+                    case 'number':
+                    case 'percentage': {
+                        setAttrDFSettings(initNumberDFSettings);
+                        break;
+                    }
+                    case 'datetime': {
+                        setAttrDFSettings(Object.assign(Object.assign({}, initDatetimeDFSettings), { language }));
+                        break;
+                    }
+                    case 'raw_string': {
+                        setAttrDFSettings(undefined);
+                        break;
+                    }
+                    default: {
+                        break;
+                    }
+                }
+                break;
+            default: {
+                break;
+            }
+        }
+    };
+    //* Render functions
+    const renderBoAttrFields = () => {
+        if (hasError[DYNAMIC_CONTENT_SETTING_KEY.ATTRIBUTE]) {
+            return (React.createElement(Text, { type: "error" }, 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), 
+                // errorArchive={errorMessageAttr}
+                disabled: isActionArchive, showSearch: true })));
+    };
+    const renderIndexFields = ({ disabled = false, loading = false }) => {
+        if (!showIndex)
+            return null;
+        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 })));
+    };
+    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 }))));
+    };
+    const renderCustomerAttrFields = () => {
+        if (hasError[DYNAMIC_CONTENT_SETTING_KEY.ATTRIBUTE]) {
+            return (React.createElement(Text, { type: "error" }, 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, 
+                // errorArchive={errorMessageAttr}
+                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 (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)))));
+    };
+    const renderEventFields = () => {
+        if (hasError[DYNAMIC_CONTENT_SETTING_KEY.EVENT]) {
+            return (React.createElement(Text, { type: "error" }, 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 })));
+    };
+    const renderSourceFields = () => {
+        if (hasError[DYNAMIC_CONTENT_SETTING_KEY.SOURCE]) {
+            return (React.createElement(Text, { type: "error" }, 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 })));
+    };
+    const renderPromotionCodeAttr = () => {
+        if (hasError[DYNAMIC_CONTENT_SETTING_KEY.ATTRIBUTE]) {
+            return (React.createElement(Text, { type: "error" }, 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, 
+                // errorArchive={errorMessageAttr}
+                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 (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 })));
+    };
+    const renderVisitorAttrFields = () => {
+        if (hasError[DYNAMIC_CONTENT_SETTING_KEY.ATTRIBUTE]) {
+            return (React.createElement(Text, { type: "error" }, 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, 
+                // errorArchive={errorMessageAttr}
+                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) ||
+            !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: {
+                        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 })));
+        return null;
+    };
+    const renderDetailDFSettings = () => {
+        if (showDetailEditDF && selectedDFType && attrDFSettings)
+            return (React.createElement("div", { style: {
+                    border: '1px solid #9e9e9e',
+                    borderRadius: '2px',
+                    padding: '8px',
+                    marginTop: '8px',
+                    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) })));
+    };
+    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 ||
+                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))))))));
+};
+AddDynamicContent.defaultProps = {
+    showDisplayFormat: true,
+    showIndex: true,
+    APIConfig: {
+        domain: 'https://sandbox-media-template.antsomi.com',
+        slug: '/api/v1',
+        token: '',
+        userId: '',
+        accountId: '',
+    },
+};