@antscorp/antsomi-ui 1.3.3-beta.70 → 1.3.3-beta.72

package/es/components/atoms/InputDynamic/InputDynamic.js

@@ -15,6 +15,8 @@ import { getObjectPropSafely, random, safeParse } from '@antscorp/antsomi-ui/es/
 import { convertBreakTag, convertDivToBreakTag, convertHtmlText, genShortLinkValue, getInsertLinkPatternWithAppendSpaceEnd, getInsertPatternWithAppendSpaceEnd, handleUpdateInputPersonalization, initialValue, mapLabelPersonalization, pasteHtmlAtCaret, removeHtmlTag, spacingNonTracking, validateHTMLTags, createElement, getBgColorByContentSourceType, } from './utils';
 // Hooks
 import { useDebounce } from '@antscorp/antsomi-ui/es/hooks/useDebounce';
+// Constants
+import { THEME } from '@antscorp/antsomi-ui/es/constants';
 const PATH = 'src/components/atoms/InputDynamic/InputDynamic.tsx';
 export const AllowDynamicType = {
     SHORTLINK: 'shortlink',
@@ -32,12 +34,16 @@ const defaultProps = {
         accountId: '1600085679',
         userId: '1600085679',
     },
+    disabled: false,
+    showIndex: true,
+    showDisplayFormat: true,
+    isShowCustomFunction: true,
     onError: () => { },
     onChange: () => { },
     addMessageToQueue: () => { },
 };
 export const InputDynamic = (props) => {
-    const { value, isViewMode, errors, disabledOpts, canMultipleLine, allowDynamicOptions, apiConfig, onError, onChange, addMessageToQueue, } = props;
+    const { value, isViewMode, errors, disabledOpts, disabled, canMultipleLine, allowDynamicOptions, showIndex, showDisplayFormat, isShowCustomFunction, apiConfig, onError, onChange, addMessageToQueue, } = props;
     // States
     const [textValue, setTextValue] = useState(initialValue(value));
     const [initSelectedProperties, setInitSelectedProperties] = useState({
@@ -122,6 +128,8 @@ export const InputDynamic = (props) => {
         setDynamicContent(prev => (Object.assign(Object.assign({}, prev), { visible: newChange })));
     }, []);
     const handleOpenChange = (newOpen) => {
+        if (disabled)
+            return;
         setDynamicContent(prev => (Object.assign(Object.assign({}, prev), { activeTagId: '' })));
         setIsShowPopover(newOpen);
     };
@@ -186,9 +194,10 @@ export const InputDynamic = (props) => {
         try {
             const id = random(5);
             const { mappingFields = '', type = '', attribute = {}, customFunction = {} } = dataObj;
-            const personalizationCode = `#{${mappingFields}||""}`;
+            const isCustom = type === 'custom';
+            const personalizationCode = isCustom ? mappingFields : `#{${mappingFields}||""}`;
             const bgColor = getBgColorByContentSourceType(type);
-            const label = getObjectPropSafely(() => type === 'custom' ? customFunction.personalizationName : attribute.label);
+            const label = getObjectPropSafely(() => isCustom ? customFunction.templateName : attribute.label);
             if (personalizationInputRef.current instanceof HTMLElement) {
                 if (dynamicContent.activeTagId) {
                     // for case update
@@ -204,7 +213,7 @@ export const InputDynamic = (props) => {
                         contentEditable: 'false',
                         value: `${personalizationCode.replace(/\s/gm, ' ')}`,
                     }, [
-                        `${getObjectPropSafely(() => type === 'custom' ? customFunction.personalizationName : attribute.label)} `,
+                        `${getObjectPropSafely(() => isCustom ? customFunction.templateName : attribute.label)} `,
                         child,
                     ]);
                     if (element && element.parentNode) {
@@ -212,23 +221,6 @@ export const InputDynamic = (props) => {
                     }
                     setDynamicContent(prev => (Object.assign(Object.assign({}, prev), { activeTagId: dynamicContent.activeTagId, defaultData: Object.assign(Object.assign({}, (prev.defaultData || {})), { [dynamicContent.activeTagId]: dataObj }), visible: false })));
                     onTriggerChange();
-                    // if (type === 'custom') {
-                    //   const found = personalizationCode.replace(/#|{|}|/g, '').split('.');
-                    //   // setStateCustomPersonal(draft => {
-                    //   //   // draft.list.push(customFunction);
-                    //   //   draft.map[found[1]] = customFunction;
-                    //   // });
-                    // } else if (
-                    //   selectedProperties.displayFormat.dataType &&
-                    //   DATA_ATTR_WITH_TYPE.includes(selectedProperties.displayFormat.dataType)
-                    // ) {
-                    //   const key = personalizationCode.replace(regexAttrFormat, '');
-                    //   const dataAttrFormat = mapDataFormatAttribute(selectedProperties.displayFormat);
-                    //   // setstateFormatAttr(draft => {
-                    //   //   draft.formatAttributes[key] = dataAttrFormat;
-                    //   //   onTriggerChange(null, draft);
-                    //   // });
-                    // }
                     return;
                 }
                 personalizationInputRef.current.focus();
@@ -239,21 +231,6 @@ export const InputDynamic = (props) => {
                 });
                 setDynamicContent(prev => (Object.assign(Object.assign({}, prev), { activeTagId: id, defaultData: Object.assign(Object.assign({}, (prev.defaultData || {})), { [id]: dataObj }), visible: false })));
             }
-            // if (personalType.value === 'custom') {
-            //   // const found = personalizationCode.replace(/#|{|}|/g, '').split('.');
-            //   // setStateCustomPersonal(draft => {
-            //   //   // draft.list.push(customFunction);
-            //   //   draft.map[found[1]] = customFunction;
-            //   // });
-            // } else if (
-            //   selectedProperties.displayFormat.dataType &&
-            //   DATA_ATTR_WITH_TYPE.includes(selectedProperties.displayFormat.dataType)
-            // ) {
-            //   const key = personalizationCode.replace(regexAttrFormat, '');
-            //   // setstateFormatAttr(draft => {
-            //   //   draft.formatAttributes[key] = mapDataFormatAttribute(selectedProperties.displayFormat);
-            //   // });
-            // }
         }
         catch (error) {
             if (typeof addMessageToQueue === 'function') {
@@ -461,16 +438,35 @@ export const InputDynamic = (props) => {
         return allowDynamicOptions.map((dynamicKey) => (React.createElement(DynamicItem, { key: dynamicKey, onClick: e => handleClickDynamicItem(e, dynamicKey) }, mapLabelPersonalization(dynamicKey))));
     };
     const renderAddPersonalizationView = () => {
+        var _a, _b;
         if (isViewMode) {
             return null;
         }
-        const isRenderPopover = allowDynamicOptions && (allowDynamicOptions === null || allowDynamicOptions === void 0 ? void 0 : allowDynamicOptions.length) > 0;
+        const isRenderPopover = allowDynamicOptions && (allowDynamicOptions === null || allowDynamicOptions === void 0 ? void 0 : allowDynamicOptions.length) > 1;
+        const isOnlyOneOpt = allowDynamicOptions && (allowDynamicOptions === null || allowDynamicOptions === void 0 ? void 0 : allowDynamicOptions.length) === 1;
+        const hasOnlyPersonalization = isOnlyOneOpt && (allowDynamicOptions === null || allowDynamicOptions === void 0 ? void 0 : allowDynamicOptions.includes(AllowDynamicType.ADDPERSONALIZATION));
+        const hasOnlyShortlink = isOnlyOneOpt && (allowDynamicOptions === null || allowDynamicOptions === void 0 ? void 0 : allowDynamicOptions.includes(AllowDynamicType.SHORTLINK));
         const iconPersonalization = (React.createElement(Icon, { type: "icon-ants-person-alt", onClick: e => {
                 e.stopPropagation();
-                if (!isRenderPopover) {
+                if (disabled || isRenderPopover)
+                    return;
+                // Open short link modal
+                if (hasOnlyShortlink) {
+                    toggleShortLinkModal();
+                }
+                else if (hasOnlyPersonalization) {
+                    // Open Personalization modal
+                    setDynamicContent(prev => (Object.assign(Object.assign({}, prev), { activeTagId: '', visible: true })));
+                }
+                else {
                     toggleShortLinkModal();
                 }
-            }, className: "customize-antsomi-profile", style: { width: 24, height: 24 } }));
+            }, className: "customize-antsomi-profile", style: {
+                width: 24,
+                height: 24,
+                color: disabled ? (_a = THEME.token) === null || _a === void 0 ? void 0 : _a.colorTextDisabled : (_b = THEME.token) === null || _b === void 0 ? void 0 : _b.colorPrimary,
+                cursor: disabled ? 'not-allowed' : 'pointer',
+            } }));
         if (!isRenderPopover) {
             return iconPersonalization;
         }
@@ -497,7 +493,7 @@ export const InputDynamic = (props) => {
             renderAddPersonalizationView()),
         React.createElement(TooltipHover, { isShow: tooltipHoverDebounce.x > 0 && tooltipHoverDebounce.y > 0, top: tooltipHoverDebounce.y, left: tooltipHoverDebounce.x }, "Click on the link to convert it to a shortlink"),
         popoverOpenShortLink && (React.createElement(PopupShortLink, { open: popoverOpenShortLink, disabledOpts: disabledOpts, onOk: handleInsertSortLink, onClose: toggleShortLinkModal, initSelectedProperties: initSelectedProperties, callback: callback })),
-        isRenderAddDynamicContent && (React.createElement(AddDynamicContent, { APIConfig: apiConfig, defaultDynamicIndex: 1, showIndex: true, showDisplayFormat: true, visible: dynamicContent.visible, defaultData: dynamicContent.defaultData[dynamicContent.activeTagId] || {}, journeySettings: dynamicContent.journeySettings, contentSources: dynamicContent.contentSources, onOk: (value) => {
+        isRenderAddDynamicContent && (React.createElement(AddDynamicContent, { APIConfig: apiConfig, defaultDynamicIndex: 1, showIndex: showIndex, showDisplayFormat: showDisplayFormat, isShowCustomFunction: isShowCustomFunction, visible: dynamicContent.visible, defaultData: dynamicContent.defaultData[dynamicContent.activeTagId] || {}, journeySettings: dynamicContent.journeySettings, contentSources: dynamicContent.contentSources, onOk: (value) => {
                 handleInsertText(value);
             }, onCancel: () => handleCloseAddDynamicContent() }))));
 };

package/es/components/atoms/InputDynamic/types.d.ts

@@ -12,8 +12,12 @@ export type InputDynamicProps = {
     value: string;
     isViewMode?: boolean;
     errors?: string[];
+    disabled?: boolean;
     disabledOpts?: DisableShortLinkTypeProps;
     allowDynamicOptions?: Array<AllowDynamicOptions>;
+    showIndex?: boolean;
+    showDisplayFormat?: boolean;
+    isShowCustomFunction?: boolean;
     apiConfig?: APIConfig;
     canMultipleLine?: boolean;
     onError?: Function;

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

@@ -14,7 +14,6 @@ var __rest = (this && this.__rest) || function (s, e) {
 // Libraries
 import React, { useCallback, useEffect, useLayoutEffect, useMemo, useState } from 'react';
 import { omit, isEmpty, flatMapDeep, set, get, isNaN } from 'lodash';
-import classnames from 'classnames';
 // Hooks
 import { useDeepCompareEffect, useDeepCompareMemo } from '@antscorp/antsomi-ui/es/hooks';
 // Components
@@ -22,7 +21,6 @@ import { TreeNode } from 'rc-tree-select';
 import { Button, Checkbox, Text, Spin } from '../../atoms';
 import { TreeSelect, Form, Select } from 'antd';
 // Locales
-import { useTranslation } from 'react-i18next';
 import i18nInstance from '@antscorp/antsomi-ui/es/locales/i18n';
 import { translations } from '@antscorp/antsomi-ui/es/locales/translations';
 // Query
@@ -40,6 +38,7 @@ 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;
@@ -79,8 +78,7 @@ export const AddDynamicContent = props => {
     const { data: customFunction } = useGetCustomFunction({ url }, infos);
     const { mutate: updateCSFunction } = useUpdateCSFunction();
     //* Hooks
-    const { i18n } = useTranslation();
-    const { t } = i18nInstance;
+    const { t, language } = i18nInstance;
     //* Selectors
     const { triggerEvent } = journeySettings;
     const [itemTypeId, setItemTypeId] = useState(null);
@@ -251,7 +249,7 @@ export const AddDynamicContent = props => {
                 args: error === null || error === void 0 ? void 0 : error.message,
             });
         },
-        select: (data) => serilizeEventAttr(data, i18n, additionalAttrProperties),
+        select: (data) => serilizeEventAttr(data, language, additionalAttrProperties),
     });
     const { data: listPromotionPools, isFetching: isFetchingPromotionPool } = useGetListPromotionPool({ url }, infos, {
         onSuccess: () => {
@@ -276,7 +274,7 @@ export const AddDynamicContent = props => {
         select: (data) => data
             .filter((attr) => +(attr === null || attr === void 0 ? void 0 : attr.status) === 1)
             .map((attr) => ({
-            label: attr.propertyDisplayMultilang[i18n.language] ||
+            label: attr.propertyDisplayMultilang[language] ||
                 attr.propertyDisplayMultilang[get(attr, "propertyDisplayMultilang['DEFAULT_LANG']", 'EN')],
             value: attr.itemPropertyName,
             dataType: attr.dataType,
@@ -348,8 +346,8 @@ export const AddDynamicContent = props => {
         if (dynamicContentAttr) {
             const { customer, visitor } = dynamicContentAttr;
             const dynamicContentType = form.getFieldValue(DYNAMIC_CONTENT_SETTING_KEY.DYNAMIC_CONTENT_TYPE);
-            const parseCustomers = serilizeDynamicContentAttr(customer, i18n, additionalAttrProperties);
-            const parseVisitors = serilizeDynamicContentAttr(visitor, i18n, additionalAttrProperties);
+            const parseCustomers = serilizeDynamicContentAttr(customer, language, additionalAttrProperties);
+            const parseVisitors = serilizeDynamicContentAttr(visitor, language, additionalAttrProperties);
             setListCustomerAttributes(parseCustomers);
             setListVisitorAttributes(parseVisitors);
             if (form.getFieldValue(DYNAMIC_CONTENT_SETTING_KEY.ATTRIBUTE))
@@ -365,7 +363,7 @@ export const AddDynamicContent = props => {
                 });
             }
         }
-    }, [dynamicContentAttr, form, i18n.language]);
+    }, [dynamicContentAttr, form, language]);
     useDeepCompareEffect(() => {
         if (listSources && selectedDynamicContentType === DYNAMIC_CONTENT_TYPE.EVENT_ATTRIBUTE.value) {
             if (!isEmpty(form.getFieldValue(DYNAMIC_CONTENT_SETTING_KEY.SOURCE)))
@@ -506,6 +504,7 @@ export const AddDynamicContent = props => {
                     [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);
@@ -616,7 +615,7 @@ export const AddDynamicContent = props => {
                 }
                 // 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: i18n.language });
+                    settings = settings !== null && settings !== void 0 ? settings : Object.assign(Object.assign({}, initDatetimeDFSettings), { language });
                     formatedDFValue = formatDatetimeDF(dateExample, settings);
                 }
                 if (!attrDFOptions.length) {
@@ -634,7 +633,7 @@ export const AddDynamicContent = props => {
             }
             // Datatime Attribute DF
             if (dataType === 'datetime') {
-                settings = settings !== null && settings !== void 0 ? settings : Object.assign(Object.assign({}, initDatetimeDFSettings), { language: i18n.language });
+                settings = settings !== null && settings !== void 0 ? settings : Object.assign(Object.assign({}, initDatetimeDFSettings), { language });
                 formatedDFValue = formatDatetimeDF(dateExample, settings);
             }
             if (!attrDFOptions.length) {
@@ -647,7 +646,7 @@ export const AddDynamicContent = props => {
         attrDFSettings,
         selectedDFType,
         attrDFOptions.length,
-        i18n.language,
+        language,
         defaultAttrDFSetings,
         form,
         selectedAttr,
@@ -684,10 +683,6 @@ export const AddDynamicContent = props => {
             default:
                 break;
         }
-        // const dataFormat =
-        //   dataTmp[0].output_format.type.toLowerCase() === 'date_and_time'
-        //     ? 'datetime'
-        //     : dataTmp[0].output_format.type.toLowerCase();
         form.setFieldsValue({
             [DYNAMIC_CONTENT_SETTING_KEY.FUNCTION]: dataTmp[0].custom_function,
             [DYNAMIC_CONTENT_SETTING_KEY.DATA_TYPE]: dataTmp[0].output_data_type,
@@ -707,7 +702,7 @@ export const AddDynamicContent = props => {
                 break;
             }
             case 'date_and_time': {
-                setAttrDFSettings(Object.assign(Object.assign({}, initDatetimeDFSettings), { language: i18n.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(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': {
@@ -718,9 +713,6 @@ export const AddDynamicContent = props => {
                 break;
         }
     };
-    // const handleSearch = data => {
-    //   console.log('onSelect', data);
-    // };
     const handleOnOkModal = () => {
         if (isActionArchive &&
             selectedDynamicContentType !== DYNAMIC_CONTENT_TYPE.EVENT_ATTRIBUTE.value) {
@@ -1012,7 +1004,7 @@ export const AddDynamicContent = props => {
                 let settings = attrDFSettings;
                 // Datatime Attribute DF
                 if (fieldValue === 'datetime') {
-                    settings = Object.assign(Object.assign({}, initDatetimeDFSettings), { language: i18n.language });
+                    settings = Object.assign(Object.assign({}, initDatetimeDFSettings), { language });
                 }
                 else if (fieldValue === 'string') {
                     settings = undefined;
@@ -1041,7 +1033,7 @@ export const AddDynamicContent = props => {
                         break;
                     }
                     case 'datetime': {
-                        setAttrDFSettings(Object.assign(Object.assign({}, initDatetimeDFSettings), { language: i18n.language }));
+                        setAttrDFSettings(Object.assign(Object.assign({}, initDatetimeDFSettings), { language }));
                         break;
                     }
                     case 'raw_string': {
@@ -1063,8 +1055,8 @@ export const AddDynamicContent = props => {
         if (hasError[DYNAMIC_CONTENT_SETTING_KEY.ATTRIBUTE]) {
             return (React.createElement(Text, { type: "error" }, t(translations.dynamicContent.modal.error.boAttr)));
         }
-        return (React.createElement(Form.Item, { className: "ants-items-center", label: t(translations.dynamicContent.modal.label.attribute), name: DYNAMIC_CONTENT_SETTING_KEY.ATTRIBUTE, required: true },
-            React.createElement(Select, { loading: isFetchingListBoAttr, className: classnames('ants-h-7'), labelInValue: true, options: buildOptionAttrArchive(listBoAttributes || [], selectedAttr), 
+        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 })));
     };
@@ -1074,37 +1066,40 @@ export const AddDynamicContent = props => {
         if (hasError[DYNAMIC_CONTENT_SETTING_KEY.ATTRIBUTE]) {
             return null;
         }
-        return (React.createElement(Form.Item, { className: "ants-items-center", label: t(translations.dynamicContent.modal.label.index), name: DYNAMIC_CONTENT_SETTING_KEY.INDEX, required: true },
-            React.createElement(Select, { disabled: disabled, loading: loading, className: classnames('ants-h-7'), options: Array.from({ length: 90 }, (_, i) => ({ value: i + 1, label: i + 1 })), showSearch: true })));
+        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, { className: "ants-items-center", label: t(translations.dynamicContent.modal.label.personalizationName), name: DYNAMIC_CONTENT_SETTING_KEY.PERNAME, required: true },
+            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, { className: "ants-items-center", label: t(translations.dynamicContent.modal.label.function), name: DYNAMIC_CONTENT_SETTING_KEY.FUNCTION, required: true }),
-            React.createElement(Form.Item, { className: "ants-items-center", label: t(translations.dynamicContent.modal.label.ouputDataType), name: DYNAMIC_CONTENT_SETTING_KEY.DATA_TYPE, required: true },
-                React.createElement(Select, { className: classnames('ants-h-7'), options: optionDataType })),
-            React.createElement(Form.Item
-            // initialValue={attrDFOptions[0].value}
-            , { 
-                // initialValue={attrDFOptions[0].value}
-                className: "ants-items-start", required: true, label: t(translations.dynamicContent.modal.label.ouputFormat), name: DYNAMIC_CONTENT_SETTING_KEY.DISPLAY_FORMAT_TYPE, extra: React.createElement("div", { className: "ants-flex ants-flex-wrap ants-items-center ants-mt-4 ants-gap-2" },
+            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", className: "ants-inline-block", onClick: () => setShowDetailEditDF(prevShow => !prevShow) }, t(translations.edit.title)))) },
+                            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, className: classnames('ants-h-7'), options: attrDFOptions }))));
+                        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, { className: "ants-items-center", initialValue: listCustomerAttributes[0], label: t(translations.dynamicContent.modal.label.attribute), name: DYNAMIC_CONTENT_SETTING_KEY.ATTRIBUTE, required: true },
-            React.createElement(Select, { loading: isFetchingDynamicContentAttr, className: classnames('ants-h-7'), labelInValue: true, 
+        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 })));
     };
@@ -1114,18 +1109,8 @@ export const AddDynamicContent = props => {
             return (React.createElement(Text, { type: "error" }, t(translations.dynamicContent.modal.error.eventAttr)));
         }
         return (React.createElement(React.Fragment, null,
-            React.createElement(Form.Item, { className: "ants-items-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), className: classnames('ants-h-7'), 
-                    // filterTreeNode={(val, option) => {
-                    //   if (option?.children?.length) {
-                    //     return option?.children?.some(
-                    //       child => (child?.title?.toString() || '').toLowerCase().indexOf(val.toLowerCase().trim()) >= 0,
-                    //     );
-                    //   } else {
-                    //     return (option?.title?.toString() || '').toLowerCase().indexOf(val.toLowerCase().trim()) >= 0;
-                    //   }
-                    // }}
-                    labelInValue: true, showSearch: true }, listEventAttributes &&
+            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 })))));
@@ -1137,22 +1122,22 @@ export const AddDynamicContent = props => {
         if (hasError[DYNAMIC_CONTENT_SETTING_KEY.EVENT]) {
             return (React.createElement(Text, { type: "error" }, t(translations.dynamicContent.modal.error.eventBySource)));
         }
-        return (React.createElement(Form.Item, { className: "ants-items-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, className: classnames('ants-h-7'), options: listEvents, showSearch: true })));
+        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, { className: "ants-items-center", label: t(translations.dynamicContent.modal.label.selectSource), name: DYNAMIC_CONTENT_SETTING_KEY.SOURCE, required: true },
+        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, { className: "ants-items-center", label: t(translations.dynamicContent.modal.label.promotionCodeAttr), name: DYNAMIC_CONTENT_SETTING_KEY.ATTRIBUTE, required: true },
-            React.createElement(Select, { loading: isFetchingPromotionCodeAttr, className: classnames('ants-h-7'), labelInValue: true, options: buildOptionAttrArchive(listPromotionCodeAttributes || [], selectedAttr), showSearch: true, 
+        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 })));
     };
@@ -1160,17 +1145,15 @@ export const AddDynamicContent = props => {
         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, { className: "ants-items-center", 
-            // initialValue={listPromotionPools[0]?.value}
-            label: t(translations.dynamicContent.modal.label.promotionPools), name: DYNAMIC_CONTENT_SETTING_KEY.PROMOTION_POOL, required: true },
-            React.createElement(Select, { loading: isFetchingPromotionPool, className: classnames('ants-h-7'), options: listPromotionPools, showSearch: true })));
+        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, { className: "ants-items-center", initialValue: listVisitorAttributes[0], label: t(translations.dynamicContent.modal.label.attribute), name: DYNAMIC_CONTENT_SETTING_KEY.ATTRIBUTE, required: true },
-            React.createElement(Select, { loading: isFetchingDynamicContentAttr, className: classnames('ants-h-7'), labelInValue: true, options: buildOptionAttrArchive(listVisitorAttributes, selectedAttr === null || selectedAttr === void 0 ? void 0 : selectedAttr.value), showSearch: true, 
+        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 })));
     };
@@ -1183,19 +1166,33 @@ export const AddDynamicContent = props => {
             !attrDFOptions.length)
             return null;
         if (selectedAttr.dataType === 'number' || selectedAttr.dataType === 'datetime')
-            return (React.createElement(Form.Item, { initialValue: attrDFOptions[0].value, className: "ants-items-start", label: t(translations.dynamicContent.modal.label.displayFormat), name: DYNAMIC_CONTENT_SETTING_KEY.DISPLAY_FORMAT_TYPE, extra: React.createElement("div", { className: "ants-flex ants-flex-wrap ants-items-center ants-mt-4 ants-gap-2" },
+            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", className: "ants-inline-block", onClick: () => setShowDetailEditDF(prevShow => !prevShow) }, t(translations.edit.title)))) },
+                            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, className: classnames('ants-h-7'), options: attrDFOptions })));
+                        selectedDynamicContentType !== DYNAMIC_CONTENT_TYPE.EVENT_ATTRIBUTE.value, style: { height: 28 }, options: attrDFOptions })));
         return null;
     };
     const renderDetailDFSettings = () => {
         if (showDetailEditDF && selectedDFType && attrDFSettings)
-            return (React.createElement("div", { className: "ants-border-[1px] ants-border-[#9e9e9e] ants-rounded-sm ants-p-2 ants-mt-2  ants-flex ants-flex-col ants-gap-2" },
+            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 },
@@ -1205,11 +1202,11 @@ export const AddDynamicContent = props => {
                 isFetchingPromotionPool ||
                 isFetchingPromotionCodeAttr ||
                 isFetchingDynamicContentAttr },
-            React.createElement(Form, { className: classnames('ants-w-full'), form: form, labelAlign: "left", labelCol: { span: 9 }, wrapperCol: { span: 15 }, onValuesChange: handleFormValuesChanges, initialValues: {
+            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, { className: "ants-items-center", label: t(translations.dynamicContent.modal.label.contentSource), name: DYNAMIC_CONTENT_SETTING_KEY.DYNAMIC_CONTENT_TYPE, required: true },
-                    React.createElement(Select, { className: classnames('ants-h-7'), options: listDynamicContentTypes })),
+                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()),
@@ -1228,7 +1225,13 @@ export const AddDynamicContent = props => {
                     renderIndexFields({ disabled: isActionArchive, loading: isFetchingListBoAttr }))),
                 showDisplayFormat && renderDisplayFormat()),
             showDisplayFormat && renderDisplayFormat() !== null && renderDetailDFSettings(),
-            isShowCustomFunction && selectedDynamicContentType === CUSTOM_TYPE.value && (React.createElement("div", { className: "ants-flex ants-items-center ants-justify-start ants-mb-2", style: { marginTop: '10px' } },
+            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))))))));
 };

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

@@ -2,9 +2,9 @@
 // Libraries
 import React from 'react';
 import dayjs from 'dayjs';
-import { useTranslation } from 'react-i18next';
 // Locales
 import { translations } from '@antscorp/antsomi-ui/es/locales/translations';
+import i18nInstance from '@antscorp/antsomi-ui/es/locales/i18n';
 // Atoms
 import { Checkbox, Radio, Space } from '@antscorp/antsomi-ui/es/components/atoms';
 // Molecules
@@ -12,12 +12,11 @@ import { RadioGroup } from '../../../RadioGroup';
 import { Select } from '../../../Select';
 // Utils
 import customParseFormat from 'dayjs/plugin/customParseFormat';
-// Utils
 import { transformDateFormat } from '../../utils';
 dayjs.extend(customParseFormat);
 export const dateExample = dayjs('2020-04-15 18:23:11');
 const FormatDatetime = ({ hasDateFormat, hasTimeFormat, dateParseFormat, timeParseFormat, dateParseOption, timeParseOption, onSettingsChange, dynamicContentType, }) => {
-    const { t, i18n: { language: portalLanguage }, } = useTranslation();
+    const { t, language: portalLanguage } = i18nInstance;
     const dfSettings = {
         hasDateFormat,
         hasTimeFormat,
@@ -37,9 +36,9 @@ const FormatDatetime = ({ hasDateFormat, hasTimeFormat, dateParseFormat, timePar
     };
     const labelHours = dynamicContentType !== 'custom' ? 'HH:MM:SS' : '';
     return (React.createElement("div", null,
-        React.createElement("div", { className: "ants-flex ants-items-center ants-gap-4" },
+        React.createElement("div", { style: { display: 'flex', alignItems: 'center', gap: '16px' } },
             React.createElement(Checkbox, { checked: hasDateFormat, disabled: hasDateFormat && !hasTimeFormat, onChange: e => handleChange(Object.assign(Object.assign({}, dfSettings), { hasDateFormat: e.target.checked })) }, t(translations.dynamicContent.modal.label.datimeDisplayFormat.dateDF)),
-            React.createElement(Select, { className: "ants-w-[190px]", disabled: !hasDateFormat, defaultValue: dateParseFormat, options: [
+            React.createElement(Select, { style: { width: 190 }, disabled: !hasDateFormat, defaultValue: dateParseFormat, options: [
                     {
                         label: `MM/DD/YYYY ${labelHours}`,
                         value: 'MM/DD/YYYY',
@@ -53,9 +52,9 @@ const FormatDatetime = ({ hasDateFormat, hasTimeFormat, dateParseFormat, timePar
                         value: 'YYYY/MM/DD',
                     },
                 ], onChange: value => handleChange(Object.assign(Object.assign({}, dfSettings), { dateParseFormat: value })) })),
-        React.createElement("div", { className: "ants-mt-2" },
+        React.createElement("div", { style: { marginTop: '8px' } },
             React.createElement(RadioGroup, { disabled: !hasDateFormat, defaultValue: dateParseOption, onChange: e => handleChange(Object.assign(Object.assign({}, dfSettings), { dateParseOption: e.target.value })) },
-                React.createElement(Space, { direction: "vertical", size: 4, className: "ants-ml-5" },
+                React.createElement(Space, { direction: "vertical", size: 4, style: { marginLeft: '20px' } },
                     React.createElement(Radio, { value: "short" },
                         t(translations.dynamicContent.modal.label.datimeDisplayFormat.short),
                         ' - ',
@@ -68,9 +67,9 @@ const FormatDatetime = ({ hasDateFormat, hasTimeFormat, dateParseFormat, timePar
                         t(translations.dynamicContent.modal.label.datimeDisplayFormat.long),
                         ' - ',
                         datetimeEx.format(transformDateFormat(dateParseFormat, 'long')))))),
-        React.createElement("div", { className: "ants-flex ants-items-center ants-gap-4 ants-mt-4" },
+        React.createElement("div", { style: { display: 'flex', alignItems: 'center', gap: '16px', marginTop: 16 } },
             React.createElement(Checkbox, { checked: hasTimeFormat, disabled: hasTimeFormat && !hasDateFormat, onChange: e => handleChange(Object.assign(Object.assign({}, dfSettings), { hasTimeFormat: e.target.checked })) }, t(translations.dynamicContent.modal.label.datimeDisplayFormat.timeDF)),
-            React.createElement(Select, { className: "ants-w-[190px]", disabled: !hasTimeFormat, defaultValue: timeParseFormat, options: [
+            React.createElement(Select, { style: { width: 190 }, disabled: !hasTimeFormat, defaultValue: timeParseFormat, options: [
                     {
                         label: 'AM/PM',
                         value: '12hour',
@@ -80,9 +79,9 @@ const FormatDatetime = ({ hasDateFormat, hasTimeFormat, dateParseFormat, timePar
                         value: '24hour',
                     },
                 ], onChange: value => handleChange(Object.assign(Object.assign({}, dfSettings), { timeParseFormat: value })) })),
-        React.createElement("div", { className: "ants-mt-2" },
+        React.createElement("div", { style: { marginTop: '8px' } },
             React.createElement(RadioGroup, { defaultValue: timeParseOption, disabled: !hasTimeFormat, onChange: e => handleChange(Object.assign(Object.assign({}, dfSettings), { timeParseOption: e.target.value })) },
-                React.createElement(Space, { direction: "vertical", size: 4, className: "ants-ml-5" },
+                React.createElement(Space, { direction: "vertical", size: 4, style: { marginLeft: '20px' } },
                     React.createElement(Radio, { value: "short" },
                         t(translations.dynamicContent.modal.label.datimeDisplayFormat.short),
                         ' - ',

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

@@ -9,11 +9,11 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
 };
 // Libraries
 import React, { useEffect, useMemo, useState } from 'react';
-import classnames from 'classnames';
 // Components
 import { Radio } from '@antscorp/antsomi-ui/es/components/atoms';
-import { Col, Row, Tooltip, Button, Form, Select, Checkbox } from 'antd';
+import { Col, Row, Tooltip, Form, Select, Checkbox } from 'antd';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { ButtonCustom } from '../../styled';
 // Json
 import Currencies from '../../currencies.json';
 // Constants
@@ -22,11 +22,11 @@ import { ATTRIBUTE_NUMBERIC_FORMAT_OPTION } from '../../constants';
 import { getCurrencyList } from '@antscorp/antsomi-ui/es/services/MediaTemplateDesign/ListCurrency';
 // Locales
 import { translations } from '@antscorp/antsomi-ui/es/locales/translations';
-import { useTranslation } from 'react-i18next';
+import i18nInstance from '@antscorp/antsomi-ui/es/locales/i18n';
 const groupingOptions = ATTRIBUTE_NUMBERIC_FORMAT_OPTION.GROUPING_SEPARATOR;
 const decimalOptions = ATTRIBUTE_NUMBERIC_FORMAT_OPTION.DECIMAL_SEPARATOR;
 const FormatNumber = (props) => {
-    const { t, i18n: { language }, } = useTranslation();
+    const { t, language } = i18nInstance;
     const { onSettingsChange, type: displayType, infos, url } = props;
     const { currencyCode, decimalPlaces, grouping, decimal, prefixType, isCompact } = props;
     const settingValues = {
@@ -97,36 +97,36 @@ const FormatNumber = (props) => {
     const listDecimalSeparatorOptions = useMemo(() => Object.values(decimalOptions)
         .sort((a, b) => a.index - b.index)
         .map(decimal => (Object.assign(Object.assign({}, decimal), (decimal.value === grouping && { disabled: true })))), [grouping]);
-    return (React.createElement(Form, { className: classnames('ants-w-full', 'ants-text-[12px]'), labelAlign: "left" },
+    return (React.createElement(Form, { style: { width: '100%', fontSize: '12px' }, labelAlign: "left" },
         displayType === 'currency' && (React.createElement(React.Fragment, null,
             React.createElement(Form.Item, { labelCol: { span: 8 }, wrapperCol: { span: 16 }, label: t(translations.dynamicContent.modal.label.formNumberDisplayFormat.currency), colon: false },
                 React.createElement(Radio.Group, { value: prefixType, onChange: ({ target: { value } }) => onChangeSettingsHandle(Object.assign(Object.assign({}, settingValues), { prefixType: value })) },
                     React.createElement(Radio, { style: { fontSize: 12 }, value: "code" }, t(translations.dynamicContent.modal.label.formNumberDisplayFormat.currencyCode)),
                     React.createElement(Radio, { style: { fontSize: 12 }, value: "symbol" }, t(translations.dynamicContent.modal.label.formNumberDisplayFormat.currencySymbol)))),
             React.createElement(Form.Item, { label: " ", labelCol: { span: 8 }, wrapperCol: { span: 16 }, colon: false },
-                React.createElement(Select, { className: classnames('ants-h-7'), disabled: isLoadingCurrencyOptions, options: listCurrencyOptions, value: currencyCode, onChange: value => onChangeSettingsHandle(Object.assign(Object.assign({}, settingValues), { currencyCode: value })), showSearch: true })))),
+                React.createElement(Select, { style: { height: 28 }, disabled: isLoadingCurrencyOptions, options: listCurrencyOptions, value: currencyCode, onChange: value => onChangeSettingsHandle(Object.assign(Object.assign({}, settingValues), { currencyCode: value })), showSearch: true })))),
         React.createElement(Form.Item, null,
             React.createElement(Checkbox, { style: { fontSize: 12 }, checked: isCompact, onChange: ({ target: { checked } }) => {
                     onChangeSettingsHandle(Object.assign(Object.assign({}, settingValues), { isCompact: checked }));
                 } }, t(translations.dynamicContent.modal.label.formNumberDisplayFormat.compact))),
-        React.createElement(Form.Item, { label: `${t(translations.dynamicContent.modal.label.formNumberDisplayFormat.decimalPlace)} (${decimalPlaces})`, className: "ants-mb-3", colon: false },
-            React.createElement("div", { className: "ants-flex ants-ml-12 ants-space-x-10" },
-                React.createElement(Button, { className: "ants-w-16 ants-bg-blue-200 hover:ants-bg-blue-300 focus:ants-bg-blue-200", disabled: decimalPlaces <= 0, onClick: () => onChangeSettingsHandle(Object.assign(Object.assign({}, settingValues), { decimalPlaces: decimalPlaces - 1 })) }, '<< .0'),
-                React.createElement(Button, { className: "ants-w-16 ants-bg-blue-200 hover:ants-bg-blue-300 focus:ants-bg-blue-200", onClick: () => onChangeSettingsHandle(Object.assign(Object.assign({}, settingValues), { decimalPlaces: decimalPlaces + 1 })) }, '.00 >>'))),
+        React.createElement(Form.Item, { label: `${t(translations.dynamicContent.modal.label.formNumberDisplayFormat.decimalPlace)} (${decimalPlaces})`, style: { marginBottom: 12 }, colon: false },
+            React.createElement("div", { style: { display: 'flex', marginLeft: 40 } },
+                React.createElement(ButtonCustom, { disabled: decimalPlaces <= 0, onClick: () => onChangeSettingsHandle(Object.assign(Object.assign({}, settingValues), { decimalPlaces: decimalPlaces - 1 })) }, '<< .0'),
+                React.createElement(ButtonCustom, { onClick: () => onChangeSettingsHandle(Object.assign(Object.assign({}, settingValues), { decimalPlaces: decimalPlaces + 1 })) }, '.00 >>'))),
         React.createElement(Row, { gutter: 15 },
             React.createElement(Col, { span: 12 },
                 React.createElement(Form.Item, { label: React.createElement("span", null,
                         t(translations.dynamicContent.modal.label.formNumberDisplayFormat.grouping),
                         React.createElement(Tooltip, { placement: "top", title: t(translations.dynamicContent.modal.label.formNumberDisplayFormat
-                                .groupingIconTooltipTitle), className: "ants-ml-1 ants-bg-opacity-40" },
+                                .groupingIconTooltipTitle), style: { marginLeft: 4, opacity: 0.4 } },
                             React.createElement(FontAwesomeIcon, { icon: ['fas', 'info-circle'] }))), colon: false },
-                    React.createElement(Select, { className: classnames('ants-h-7'), value: grouping, onChange: value => onChangeSettingsHandle(Object.assign(Object.assign({}, settingValues), { grouping: value })), options: listGroupingSeparatorOptions }))),
+                    React.createElement(Select, { style: { height: 28 }, value: grouping, onChange: value => onChangeSettingsHandle(Object.assign(Object.assign({}, settingValues), { grouping: value })), options: listGroupingSeparatorOptions }))),
             React.createElement(Col, { span: 12 },
                 React.createElement(Form.Item, { label: React.createElement("span", null,
                         t(translations.dynamicContent.modal.label.formNumberDisplayFormat.decimal),
                         React.createElement(Tooltip, { placement: "top", title: t(translations.dynamicContent.modal.label.formNumberDisplayFormat
-                                .decimalIconTooltipTitle), className: "ants-ml-1 ants-bg-opacity-40" },
+                                .decimalIconTooltipTitle), style: { marginLeft: 4, opacity: 0.4 } },
                             React.createElement(FontAwesomeIcon, { icon: ['fas', 'info-circle'] }))), colon: false },
-                    React.createElement(Select, { className: classnames('ants-h-7'), value: decimal, onChange: value => onChangeSettingsHandle(Object.assign(Object.assign({}, settingValues), { decimal: value })), options: listDecimalSeparatorOptions }))))));
+                    React.createElement(Select, { style: { height: 28 }, value: decimal, onChange: value => onChangeSettingsHandle(Object.assign(Object.assign({}, settingValues), { decimal: value })), options: listDecimalSeparatorOptions }))))));
 };
 export default FormatNumber;

package/es/components/molecules/AddDynamicContent/constants.d.ts

@@ -20,7 +20,7 @@ export declare const DYNAMIC_CONTENT_TYPE_KEY: {
     readonly EVENT_ATTRIBUTE: "event-attribute";
     readonly PROMOTION_CODE: "promotion-code";
     readonly VISITOR_ATTRIBUTE: "visitor-attribute";
-    readonly CUSTOM_FUNCTION: "custom-function";
+    readonly CUSTOM_FUNCTION: "custom";
 };
 export declare const DYNAMIC_CONTENT_TYPE: {
     [key: string]: {

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

@@ -19,7 +19,7 @@ export const DYNAMIC_CONTENT_TYPE_KEY = {
     EVENT_ATTRIBUTE: 'event-attribute',
     PROMOTION_CODE: 'promotion-code',
     VISITOR_ATTRIBUTE: 'visitor-attribute',
-    CUSTOM_FUNCTION: 'custom-function',
+    CUSTOM_FUNCTION: 'custom',
 };
 export const DYNAMIC_CONTENT_TYPE = {
     BO_SETTINGS: {

package/es/components/molecules/AddDynamicContent/styled.d.ts

@@ -7,3 +7,6 @@ export declare const InputSuggestion: import("styled-components").StyledComponen
     _InternalPanelDoNotUseOrYouWillBeFired: (props: import("antd/es/_util/type").AnyObject) => import("react").JSX.Element;
 }, any, {}, never>;
 export declare const ModalCustom: import("styled-components").StyledComponent<import("react").ComponentType<any> | keyof import("react").JSX.IntrinsicElements, any, import("../Modal/styled").CustomModalProps, any>;
+export declare const ButtonCustom: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("antd").ButtonProps & import("react").RefAttributes<HTMLElement>> & {
+    Group: import("react").FC<import("antd/es/button").ButtonGroupProps>;
+}, any, {}, never>;

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

@@ -1,5 +1,5 @@
 // Libraries
-import { AutoComplete } from 'antd';
+import { AutoComplete, Button } from 'antd';
 import styled from 'styled-components';
 import { Modal } from '../Modal';
 export const InputSuggestion = styled(AutoComplete) `
@@ -16,3 +16,15 @@ export const ModalCustom = styled(Modal) `
     max-height: 500px;
   }
 `;
+export const ButtonCustom = styled(Button) `
+  width: 64px;
+  background-color: rgb(191 219 254);
+
+  &:hover {
+    background-color: rgb(147 197 253);
+  }
+
+  &:focus {
+    background-color: rgb(147 197 253);
+  }
+`;

package/es/components/molecules/AddDynamicContent/utils.d.ts

@@ -1,5 +1,4 @@
 import dayjs from 'dayjs';
-import { i18n } from 'i18next';
 import type { TDatetimeFormatSetting, TNumberFormatSettings } from './components';
 import { LabeledTreeValue, LabeledValue } from './AddDynamicContent';
 export declare function getStringFormatDateDF(formatSettings: TDatetimeFormatSetting): string;
@@ -13,14 +12,14 @@ export declare const serializeCSSelectedString: (value?: string) => {
     groupId: string;
     itemTypeId: number;
 };
-export declare const serilizeDynamicContentAttr: (attrs: any[] | undefined, i18n: i18n, additionalAttrProperties?: string[]) => {
+export declare const serilizeDynamicContentAttr: (attrs: any[] | undefined, language: any, additionalAttrProperties?: string[]) => {
     label: any;
     value: any;
     dataType: any;
     disabled: boolean;
     status: any;
 }[];
-export declare const serilizeEventAttr: (attrs: any[] | undefined, i18n: i18n, additionalAttrProperties?: string[]) => LabeledTreeValue[];
+export declare const serilizeEventAttr: (attrs: any[] | undefined, language: any, additionalAttrProperties?: string[]) => LabeledTreeValue[];
 export declare const serilizePromotionPool: (data: any, additionalAttrProperties?: string[]) => LabeledValue[];
 export declare const CUSTOM_TYPE: {
     index: number;

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

@@ -9,8 +9,6 @@ import Currencies from './currencies.json';
 import { ATTRIBUTE_STATUS, BO_STATUS, DYNAMIC_CONTENT_TYPE } from './constants';
 // Models
 import { ListAttribute } from '@antscorp/antsomi-ui/es/models/BusinessObject';
-// Locales
-import { getTranslateMessage, translations } from '@antscorp/antsomi-ui/es/locales/translations';
 export function getStringFormatDateDF(formatSettings) {
     const { hasDateFormat, hasTimeFormat, timeParseFormat, dateParseFormat, timeParseOption, dateParseOption, } = formatSettings;
     let dateFormat = '';
@@ -208,9 +206,9 @@ export const serializeCSSelectedString = (value = '') => {
         itemTypeId: Number(itemTypeId),
     };
 };
-export const serilizeDynamicContentAttr = (attrs = [], i18n, additionalAttrProperties) => attrs.map(attr => {
+export const serilizeDynamicContentAttr = (attrs = [], language, additionalAttrProperties) => attrs.map(attr => {
     const temp = {
-        label: attr.label[i18n.language && i18n.language.toUpperCase()] ||
+        label: attr.label[language && language.toUpperCase()] ||
             attr.label[get(attr, 'label.DEFAULT_LANG')] ||
             attr.defaultLabel,
         value: attr.value,
@@ -224,7 +222,7 @@ export const serilizeDynamicContentAttr = (attrs = [], i18n, additionalAttrPrope
     });
     return temp;
 });
-export const serilizeEventAttr = (attrs = [], i18n, additionalAttrProperties) => attrs.map(row => {
+export const serilizeEventAttr = (attrs = [], language, additionalAttrProperties) => attrs.map(row => {
     var _a;
     const event = new ListAttribute(row);
     const temp = {
@@ -244,7 +242,7 @@ export const serilizeEventAttr = (attrs = [], i18n, additionalAttrProperties) =>
             itemTypeName: event.itemTypeName,
             propertyName: child.itemPropertyName,
             eventPropertySyntax: child.eventPropertySyntax,
-            label: child.propertyDisplayMultilang[i18n.language] ||
+            label: child.propertyDisplayMultilang[language] ||
                 child.propertyDisplayMultilang[get(child, "propertyDisplayMultilang['DEFAULT_LANG']")] ||
                 child.itemPropertyDisplay,
             children: [],
@@ -278,8 +276,8 @@ export const serilizePromotionPool = (data, additionalAttrProperties) => data.ro
 });
 export const CUSTOM_TYPE = {
     index: 0,
-    label: getTranslateMessage(translations.dynamicContent.modal.dynamicContentType.custom),
-    value: `custom`,
+    label: 'Custom Function',
+    value: 'custom',
 };
 export const buildOptionAttrArchive = (list, selected) => {
     const arrSelected = Array.isArray(selected) ? selected : [selected];

package/es/components/molecules/EditorScript/EditorScript.d.ts

@@ -0,0 +1,14 @@
+import React, { ReactNode } from 'react';
+import { IAceEditorProps } from 'react-ace';
+import 'ace-builds/webpack-resolver';
+import 'ace-builds/src-noconflict/mode-javascript';
+import 'ace-builds/src-noconflict/mode-css';
+import 'ace-builds/src-noconflict/theme-tomorrow';
+import 'ace-builds/src-noconflict/ext-language_tools';
+interface EditorScriptProps extends IAceEditorProps {
+    label?: string | ReactNode;
+    expandModalLabel?: string | ReactNode;
+    hideExpand?: boolean | ReactNode;
+}
+export declare const EditorScript: React.FC<EditorScriptProps>;
+export {};

package/es/components/molecules/EditorScript/EditorScript.js

@@ -0,0 +1,89 @@
+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;
+};
+// Libraries
+import React, { useState } from 'react';
+import AceEditor from 'react-ace';
+// Translations
+import { translations } from '@antscorp/antsomi-ui/es/locales/translations';
+import i18nInstance from '@antscorp/antsomi-ui/es/locales/i18n';
+// Atoms
+import { Button, Icon } from '../../atoms';
+// Molecules
+import { Modal } from '../Modal';
+// Styled
+import { EditorScriptWrapper } from './styled';
+// Ace editor
+import 'ace-builds/webpack-resolver';
+import 'ace-builds/src-noconflict/mode-javascript';
+import 'ace-builds/src-noconflict/mode-css';
+import 'ace-builds/src-noconflict/theme-tomorrow';
+import 'ace-builds/src-noconflict/ext-language_tools';
+// Utils
+import { handleError } from '@antscorp/antsomi-ui/es/utils';
+const PATH = 'src/components/molecules/EditorScript/EditorScript.tsx';
+export const EditorScript = props => {
+    // Props
+    const { label, expandModalLabel, className, height, setOptions, hideExpand } = props, restOf = __rest(props, ["label", "expandModalLabel", "className", "height", "setOptions", "hideExpand"]);
+    // State
+    const [isExpandEditor, setExpandEditor] = useState(false);
+    const { t } = i18nInstance;
+    const renderAceEditor = (aceHeight = height) => {
+        try {
+            return (React.createElement(AceEditor, Object.assign({ setOptions: Object.assign({ enableBasicAutocompletion: true, enableLiveAutocompletion: true, enableSnippets: true, showLineNumbers: true, tabSize: 2 }, setOptions) }, restOf, { style: { width: '100%', height: aceHeight } })));
+        }
+        catch (error) {
+            handleError(error, {
+                path: PATH,
+                name: 'renderAceEditor',
+                args: {},
+            });
+        }
+    };
+    const onCancelModal = () => {
+        try {
+            setExpandEditor(false);
+        }
+        catch (error) {
+            handleError(error, {
+                path: PATH,
+                name: 'onCancelModal',
+                args: {},
+            });
+        }
+    };
+    return (React.createElement(React.Fragment, null,
+        React.createElement(EditorScriptWrapper, { className: className },
+            label && React.createElement("div", { className: "ants-mb-5" }, label),
+            renderAceEditor(),
+            !hideExpand && (React.createElement(Button, { type: "text", className: "ants-mt-5px", onClick: () => {
+                    setExpandEditor(true);
+                } },
+                React.createElement(Icon, { type: "icon-ants-expand", size: 14, style: {
+                        transform: 'scaleX(-1)',
+                    } }),
+                t(translations.expandEditor.title)))),
+        React.createElement(Modal, { visible: isExpandEditor, title: expandModalLabel, onCancel: onCancelModal, centered: true, width: 1000, footer: React.createElement(Button, { onClick: onCancelModal }, t(translations.close)) }, renderAceEditor('500px'))));
+};
+EditorScript.defaultProps = {
+    expandModalLabel: 'Editor Script',
+    mode: 'javascript',
+    theme: 'tomorrow',
+    name: 'Editor Script',
+    placeholder: '',
+    fontSize: 12,
+    showPrintMargin: true,
+    showGutter: true,
+    highlightActiveLine: true,
+    setOptions: {},
+    hideExpand: false,
+    height: '267px',
+};

package/es/components/molecules/EditorScript/index.d.ts

@@ -0,0 +1 @@
+export * from './EditorScript';

package/es/components/molecules/EditorScript/index.js

@@ -0,0 +1 @@
+export * from './EditorScript';

package/es/components/molecules/EditorScript/styled.d.ts

@@ -0,0 +1 @@
+export declare const EditorScriptWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;

package/es/components/molecules/EditorScript/styled.js

@@ -0,0 +1,3 @@
+// Libraries
+import styled from 'styled-components';
+export const EditorScriptWrapper = styled.div ``;

package/es/components/molecules/UploadImage/index.js

@@ -51,7 +51,7 @@ const SORT_OPTIONS = {
 };
 const PATH = '@antscorp/antsomi-ui/es/components/molecules/UploadImage/index.tsx';
 export const UploadImage = props => {
-    var _a, _b, _c, _d, _e;
+    var _a, _b, _c, _d, _e, _f;
     const { labelHeadingModal, labelButtonSelect, labelModalDelete, searchPlaceholder, onRemoveImage, onChangeImage: onChangeMedia, isOpen, isInputMode, width, placeholder, extensions, maxSize, title, showImageURL: showMediaURL, selectedImage: selectedMediaProp, required, focused, domainMedia, slug, paramConfigs, errors, iconName, mode, } = props;
     const { Dragger } = Upload;
     const [storeSavedMedia, setStoreSavedMedia] = useState([]);
@@ -287,8 +287,11 @@ export const UploadImage = props => {
             React.createElement(Input, { required: required, status: errors && (errors === null || errors === void 0 ? void 0 : errors.length) > 0 ? 'error' : '', placeholder: placeholder, value: selectedMedia.url ? selectedMedia.url : '', focused: focused, style: { paddingRight: 40 }, onAfterChange: value => handleSelectMedia({
                     url: value,
                 }) }),
-            React.createElement(WrapperIcon, { onClick: showModal },
-                React.createElement(MediaIcon, null)),
+            React.createElement(WrapperIcon, { onClick: showModal }, mode === 'video' ? (React.createElement(Icon, { type: "icon-ants-video", size: 24, style: {
+                    zIndex: 1,
+                    marginLeft: 2,
+                    color: (_a = THEME.token) === null || _a === void 0 ? void 0 : _a.colorIcon,
+                } })) : (React.createElement(MediaIcon, null))),
             isError && React.createElement(ErrorMessage, null, errors && (errors === null || errors === void 0 ? void 0 : errors.length) > 0 ? errors[0] : ''))) : (React.createElement(UploadImageWrapper, null,
             title ? React.createElement(Text, { style: { marginTop: 10 } }, title) : null,
             React.createElement("div", { className: `image-upload-content ${selectedMedia && selectedMedia.url ? 'uploaded' : ''}` },
@@ -296,14 +299,14 @@ export const UploadImage = props => {
                 !selectedMedia || !selectedMedia.url ? (React.createElement(Icon, { type: `icon-ants-${iconName}`, size: 36, style: {
                         zIndex: 1,
                         marginLeft: 25,
-                        color: (_a = THEME.token) === null || _a === void 0 ? void 0 : _a.colorIcon,
+                        color: (_b = THEME.token) === null || _b === void 0 ? void 0 : _b.colorIcon,
                     } })) : null,
                 React.createElement("div", { style: flexStyleCenter },
                     React.createElement(Button, { onClick: showModal, style: { backgroundColor: '#ffffff' } },
                         "Browse ",
                         mode === 'video' ? 'Video' : 'Image'),
                     selectedMedia && selectedMedia.url ? (React.createElement(Button, { onClick: handleRemoveMedia, style: { backgroundColor: '#ffffff' } },
-                        React.createElement(Icon, { type: "icon-ants-remove-trash", size: 15, style: { color: (_b = THEME.token) === null || _b === void 0 ? void 0 : _b.colorPrimary } }))) : null)),
+                        React.createElement(Icon, { type: "icon-ants-remove-trash", size: 15, style: { color: (_c = THEME.token) === null || _c === void 0 ? void 0 : _c.colorPrimary } }))) : null)),
             React.createElement("div", { className: "upload-file-info", style: { marginTop: 12 } },
                 React.createElement(Text, null,
                     "File type: ", extensions === null || extensions === void 0 ? void 0 :
@@ -318,8 +321,8 @@ export const UploadImage = props => {
                     }) }))))),
         React.createElement(Modal, { title: labelModalDelete, visible: isOpenConfirmDelete, onOk: () => handleRemoveUploadedMedia(deleteMediaRef.current, false), onCancel: () => setOpenConfirmDelete(prev => !prev), okText: "OK", cancelText: "Cancel" },
             React.createElement("p", null,
-                "Are you sure you want to delete ", (_c = deleteMediaRef.current) === null || _c === void 0 ? void 0 :
-                _c.name,
+                "Are you sure you want to delete ", (_d = deleteMediaRef.current) === null || _d === void 0 ? void 0 :
+                _d.name,
                 "?")),
         React.createElement(Modal, { wrapClassName: "icons-selection-modal", title: React.createElement("div", { style: { display: 'flex', gap: '8px', alignItems: 'center' } },
                 React.createElement(Icon, { type: `icon-ants-${iconName}`, size: 20 }),
@@ -347,7 +350,7 @@ export const UploadImage = props => {
                     // onChange={onChangeFileUpload}
                     showUploadList: false, multiple: true, customRequest: customRequestUpload }),
                     React.createElement("div", { style: Object.assign(Object.assign({}, flexStyleCenter), { height: 80 }) },
-                        React.createElement(Icon, { type: `icon-ants-${iconName}`, size: 36, style: { color: (_d = THEME.token) === null || _d === void 0 ? void 0 : _d.colorIcon } }),
+                        React.createElement(Icon, { type: `icon-ants-${iconName}`, size: 36, style: { color: (_e = THEME.token) === null || _e === void 0 ? void 0 : _e.colorIcon } }),
                         React.createElement("div", { style: Object.assign(Object.assign({}, flexStyleCenter), { justifyContent: 'flex-start' }) },
                             React.createElement(TextStyled, { className: "ant-upload-text" }, "Drag & Drop file here"),
                             React.createElement("span", null, "or"),
@@ -356,7 +359,7 @@ export const UploadImage = props => {
                                     display: 'none !important',
                                     backgroundColor: '#ffffff',
                                 } },
-                                React.createElement(Icon, { type: "icon-ants-remove-trash", size: 15, style: { color: (_e = THEME.token) === null || _e === void 0 ? void 0 : _e.colorPrimary } })))))),
+                                React.createElement(Icon, { type: "icon-ants-remove-trash", size: 15, style: { color: (_f = THEME.token) === null || _f === void 0 ? void 0 : _f.colorPrimary } })))))),
             React.createElement("div", { style: {
                     display: 'flex',
                     flexWrap: 'wrap',

package/es/components/molecules/index.d.ts

@@ -36,6 +36,7 @@ export * from './RichMenu';
 export { ModalV2 } from './ModalV2';
 export * from './PreviewModal';
 export * from './Drawer';
+export { EditorScript } from './EditorScript';
 export type { AdvancedPickerProps, TAdvancedPickerOption, TAdvancedRangePickerTimeRange, } from './DatePicker';
 export type { ColorPickerProps } from './ColorPicker';
 export type { AlignEditProps, AlignSettingProps } from './AlignSetting';

package/es/components/molecules/index.js

@@ -36,3 +36,4 @@ export * from './RichMenu';
 export { ModalV2 } from './ModalV2';
 export * from './PreviewModal';
 export * from './Drawer';
+export { EditorScript } from './EditorScript';

package/es/locales/en/translation.json

@@ -101,6 +101,10 @@
             "message": "There must be at least 1 Switch Menu action"
         }
     },
+    "expandEditor": {
+        "title": "Expand editor",
+        "description": ""
+    },
     "dynamicContent": {
         "title": "Dynamic content",
         "modal": {

package/es/locales/i18n.d.ts

@@ -103,6 +103,10 @@ export declare const translationsJson: {
                     message: string;
                 };
             };
+            expandEditor: {
+                title: string;
+                description: string;
+            };
             dynamicContent: {
                 title: string;
                 modal: {

package/es/locales/translations.d.ts

@@ -103,6 +103,10 @@ export declare const convertLanguageJsonToObject: (json: any, objToConvertTo?: C
             message: string;
         };
     };
+    expandEditor: {
+        title: string;
+        description: string;
+    };
     dynamicContent: {
         title: string;
         modal: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@antscorp/antsomi-ui",
-  "version": "1.3.3-beta.70",
+  "version": "1.3.3-beta.72",
   "description": "An enterprise-class UI design language and React UI library.",
   "sideEffects": [
     "dist/*",
@@ -81,6 +81,8 @@
     "@tanstack/react-query": "4.20.4",
     "@tanstack/react-query-devtools": "4.20.4",
     "pako": "2.0.4",
+    "ace-builds": "1.4.14",
+    "react-ace": "9.5.0",
     "i18next-browser-languagedetector": "6.1.2",
     "immer": "3.0.0",
     "lodash": "^4.17.21",
@@ -189,4 +191,3 @@
     "react-dom": ">=16.9.0"
   }
 }
-