@antscorp/antsomi-ui 1.3.7-beta.68 → 1.3.7-beta.69

package/es/components/icons/EmotionFeedbackIcon.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import { IconProps } from './types';
 export declare const EmotionFeedbackIcon: React.ForwardRefExoticComponent<IconProps & {
-    iconHappyColor?: string;
-    iconSadColor?: string;
+    iconHappyColor?: string | undefined;
+    iconSadColor?: string | undefined;
 } & React.RefAttributes<SVGSVGElement>>;

package/es/components/icons/LazyIcon/LazyIcon.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 export declare const LazyIcon: {
     AccountCircleIcon: import("react").LazyExoticComponent<import("react").ForwardRefExoticComponent<import("../types").IconProps & import("react").RefAttributes<SVGSVGElement>>>;
     AccountCircleOutlineIcon: import("react").LazyExoticComponent<import("react").ForwardRefExoticComponent<import("../types").IconProps & import("react").RefAttributes<SVGSVGElement>>>;
@@ -153,8 +154,8 @@ export declare const LazyIcon: {
     EmojiReactionIcon: import("react").LazyExoticComponent<import("react").ForwardRefExoticComponent<import("../types").IconProps & import("react").RefAttributes<SVGSVGElement>>>;
     EmojiSmileIcon: import("react").LazyExoticComponent<import("react").ForwardRefExoticComponent<import("../types").IconProps & import("react").RefAttributes<SVGSVGElement>>>;
     EmotionFeedbackIcon: import("react").LazyExoticComponent<import("react").ForwardRefExoticComponent<import("../types").IconProps & {
-        iconHappyColor?: string;
-        iconSadColor?: string;
+        iconHappyColor?: string | undefined;
+        iconSadColor?: string | undefined;
     } & import("react").RefAttributes<SVGSVGElement>>>;
     ErrorIcon: import("react").LazyExoticComponent<import("react").ForwardRefExoticComponent<import("../types").IconProps & import("react").RefAttributes<SVGSVGElement>>>;
     EventAttribute30Icon: import("react").LazyExoticComponent<import("react").ForwardRefExoticComponent<import("../types").IconProps & import("react").RefAttributes<SVGSVGElement>>>;
@@ -241,7 +242,7 @@ export declare const LazyIcon: {
     LinkOffIcon: import("react").LazyExoticComponent<import("react").ForwardRefExoticComponent<import("../types").IconProps & import("react").RefAttributes<SVGSVGElement>>>;
     ListIcon: import("react").LazyExoticComponent<import("react").ForwardRefExoticComponent<import("../types").IconProps & import("react").RefAttributes<SVGSVGElement>>>;
     LoadingIcon: import("react").LazyExoticComponent<import("react").ForwardRefExoticComponent<import("../types").IconProps & {
-        backgroundColor?: string;
+        backgroundColor?: string | undefined;
     } & import("react").RefAttributes<SVGSVGElement>>>;
     LocalMallIcon: import("react").LazyExoticComponent<import("react").ForwardRefExoticComponent<import("../types").IconProps & import("react").RefAttributes<SVGSVGElement>>>;
     LongerIcon: import("react").LazyExoticComponent<import("react").ForwardRefExoticComponent<import("../types").IconProps & import("react").RefAttributes<SVGSVGElement>>>;

package/es/components/icons/LoadingIcon.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
 import { IconProps } from './types';
 export declare const LoadingIcon: React.ForwardRefExoticComponent<IconProps & {
-    backgroundColor?: string;
+    backgroundColor?: string | undefined;
 } & React.RefAttributes<SVGSVGElement>>;

package/es/components/icons/document/IconGallery.d.ts

@@ -1 +1,12 @@
+import React from 'react';
+declare global {
+    interface NodeRequire {
+        context: (directory: string, useSubdirectories: boolean, regExp: RegExp) => {
+            keys: () => string[];
+            (id: string): {
+                default: React.ComponentType;
+            };
+        };
+    }
+}
 export declare const IconGallery: () => import("react/jsx-runtime").JSX.Element;

package/es/components/icons/document/IconGallery.js

@@ -1,23 +1,22 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-/// <reference types="vite/client" />
 import { useDebounce } from '@antscorp/antsomi-ui/es/hooks/useDebounceV2';
 import { ConfigProvider } from '@antscorp/antsomi-ui/es/providers';
 import { searchMatchAny } from '@antscorp/antsomi-ui/es/utils';
-import { useVirtualizer } from '@tanstack/react-virtual';
 import { message } from 'antd';
-import { useMemo, useRef, useState } from 'react';
+import { useMemo, useState } from 'react';
 import { Flex, Input, Typography } from '../../index';
 import { IconGalleryStyled } from './styled';
 import { queryClientAntsomiUI, QueryClientProviderAntsomiUI, } from '@antscorp/antsomi-ui/es/queries';
 const REGEX_DATA_SEARCH = /(?<=\/\/ search tag: ).*/g;
-const COLUMNS = 5;
-const ROW_ESTIMATE_SIZE = 140;
-// Vite equivalent of webpack's `require.context('../', false, /\.tsx$/)`.
-const iconModules = import.meta.glob('../*.tsx', { eager: true });
-const icons = Object.entries(iconModules).map(([path, mod]) => {
-    const componentName = path.replace('../', '').replace('.tsx', '');
-    const Component = mod[componentName];
-    const compiledCode = Component?.render?.toString() || '';
+const requireContext = require.context('../', false, /\.tsx$/);
+const icons = requireContext
+    .keys()
+    .filter(key => key.startsWith('./'))
+    .map(key => {
+    const componentName = key.replace('./', '').replace('.tsx', '');
+    const Component = requireContext(key)[componentName];
+    const compiledCode = requireContext(key)[componentName]?.render?.toString() || '';
+    // console.log('🚀 ~ compiledCode:', compiledCode);
     const dataSearch = compiledCode.match(REGEX_DATA_SEARCH);
     return {
         name: componentName,
@@ -27,7 +26,6 @@ const icons = Object.entries(iconModules).map(([path, mod]) => {
 });
 export const IconGallery = () => {
     const [search, setSearch] = useState('');
-    const scrollContainerRef = useRef(null);
     const debounceSearchValue = useDebounce(search, 300);
     const invalidIcons = [];
     const validIcons = useMemo(() => icons.filter(iconObj => {
@@ -37,32 +35,14 @@ export const IconGallery = () => {
     }), 
     // eslint-disable-next-line react-hooks/exhaustive-deps
     []);
-    const filteredIcons = useMemo(() => validIcons.filter(item => searchMatchAny([item.name, ...item.dataSearch], debounceSearchValue)), [validIcons, debounceSearchValue]);
-    const rows = useMemo(() => {
-        const chunked = [];
-        for (let i = 0; i < filteredIcons.length; i += COLUMNS) {
-            chunked.push(filteredIcons.slice(i, i + COLUMNS));
-        }
-        return chunked;
-    }, [filteredIcons]);
-    const rowVirtualizer = useVirtualizer({
-        count: rows.length,
-        getScrollElement: () => scrollContainerRef.current,
-        estimateSize: () => ROW_ESTIMATE_SIZE,
-        overscan: 5,
-    });
-    return (_jsx(QueryClientProviderAntsomiUI, { client: queryClientAntsomiUI, children: _jsx(ConfigProvider, { children: _jsxs(IconGalleryStyled, { children: [invalidIcons.length > 0 ? (_jsxs("div", { children: [_jsx("h4", { children: "These components below are invalid (check name and file name is correct?)" }), invalidIcons.map(item => (_jsx("strong", { style: { color: 'red' }, children: _jsx("pre", { children: item.name }) }, item.name)))] })) : null, _jsx(Input, { placeholder: "Search Icon", value: search, onChange: e => setSearch(e.target.value), style: { fontSize: '16px' } }), _jsx("div", { ref: scrollContainerRef, className: "grid-scroll-container", children: _jsx("div", { style: { position: 'relative', width: '100%', height: rowVirtualizer.getTotalSize() }, children: rowVirtualizer.getVirtualItems().map(virtualRow => (_jsx(Flex, { ref: rowVirtualizer.measureElement, "data-index": virtualRow.index, className: "grid-container", gap: 16, style: {
-                                    position: 'absolute',
-                                    top: 0,
-                                    left: 0,
-                                    width: '100%',
-                                    transform: `translateY(${virtualRow.start}px)`,
-                                }, children: rows[virtualRow.index].map(item => {
-                                    const { Component, name } = item;
-                                    return (_jsxs("div", { className: "grid-item", onClick: () => {
-                                            const copiedText = `<${name} />`;
-                                            navigator.clipboard.writeText(copiedText);
-                                            message.success(`${copiedText} copied to clipboard 🚀`);
-                                        }, children: [_jsx(Component, {}), _jsx(Typography.Text, { ellipsis: { tooltip: true }, children: name })] }, name));
-                                }) }, virtualRow.key))) }) })] }) }) }));
+    return (_jsx(QueryClientProviderAntsomiUI, { client: queryClientAntsomiUI, children: _jsx(ConfigProvider, { children: _jsxs(IconGalleryStyled, { children: [invalidIcons.length > 0 ? (_jsxs("div", { children: [_jsx("h4", { children: "These components below are invalid (check name and file name is correct?)" }), invalidIcons.map(item => (_jsx("strong", { style: { color: 'red' }, children: _jsx("pre", { children: item.name }) }, item.name)))] })) : null, _jsx(Input, { placeholder: "Search Icon", value: search, onChange: e => setSearch(e.target.value), style: { fontSize: '16px' } }), _jsx(Flex, { className: "grid-container", gap: 16, children: validIcons
+                            .filter(item => searchMatchAny([item.name, ...item.dataSearch], debounceSearchValue))
+                            .map(item => {
+                            const { Component, name } = item;
+                            return (_jsxs("div", { className: "grid-item", onClick: () => {
+                                    const copiedText = `<${name} />`;
+                                    navigator.clipboard.writeText(copiedText);
+                                    message.success(`${copiedText} copied to clipboard 🚀`);
+                                }, children: [_jsx(Component, {}), _jsx(Typography.Text, { ellipsis: { tooltip: true }, children: name })] }, name));
+                        }) })] }) }) }));
 };

package/es/components/icons/document/styled.js

@@ -1,11 +1,11 @@
 import { globalToken } from '@antscorp/antsomi-ui/es/constants';
 import styled from 'styled-components';
 export const IconGalleryStyled = styled.div `
-  .grid-scroll-container {
-    position: relative;
+  .grid-container {
+    /* NOTE: I don't know why gutter of antd Row doesn't apply for row-gap */
+    /* row-gap: 16px; */
     margin-top: 24px;
-    height: 70vh;
-    overflow-y: auto;
+    flex-wrap: wrap;
   }
 
   .grid-item {

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

@@ -401,5 +401,5 @@ export { WebIcon } from './WebIcon';
 export { WebPersonalizationIcon } from './WebPersonalizationIcon';
 export { WidgetIcon } from './WidgetIcon';
 export { WritingAIAssitantIcon } from './WritingAIAssitantIcon';
-export { QRCodeManagementIcon } from './QRCodeManagementIcon';
 export { QRSetDashboardIcon } from './QRSetDashboardIcon';
+export { QRCodeManagementIcon } from './QRCodeManagementIcon';

package/es/components/icons/index.js

@@ -401,5 +401,5 @@ export { WebIcon } from './WebIcon';
 export { WebPersonalizationIcon } from './WebPersonalizationIcon';
 export { WidgetIcon } from './WidgetIcon';
 export { WritingAIAssitantIcon } from './WritingAIAssitantIcon';
-export { QRCodeManagementIcon } from './QRCodeManagementIcon';
 export { QRSetDashboardIcon } from './QRSetDashboardIcon';
+export { QRCodeManagementIcon } from './QRCodeManagementIcon';

package/es/components/icons/types/index.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 export interface IconProps extends React.ComponentPropsWithoutRef<'svg'> {
     size?: number;
 }

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

@@ -1 +1,2 @@
-export declare const AccessDeniedWrapper: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("antd").FlexProps<import("antd/es/_util/type").AnyObject> & import("react").RefAttributes<HTMLElement>>, any, {}, never>;
+/// <reference types="react" />
+export declare const AccessDeniedWrapper: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("antd/es/flex/interface").FlexProps<import("antd/es/_util/type").AnyObject> & import("react").RefAttributes<HTMLElement>>, any, {}, never>;

package/es/components/molecules/AccountSelection/AccountListing.js

@@ -44,7 +44,7 @@ export const AccountListing = React.forwardRef((props, ref) => {
     }, 
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [onChange, recentData]);
-    return (_jsxs(AccountSelectionStyled, { className: className, children: [_jsx(Input, { placeholder: "Search", suffix: _jsx(Icon, { type: "icon-ants-search-2", style: { fontSize: '24px', color: THEME.token?.bw8 } }), value: searchValue, onChange: event => setSearchValue(event.target.value) }), _jsx("div", { className: "account-list", children: _jsx("ul", { children: _jsxs(Scrollbars, { style: { width: '100%', height: showAllAccount ? '364px' : '410px' }, children: [recentData?.value?.length ? (_jsxs(_Fragment, { children: [_jsx(Text, { className: "recent-text", children: "Recent" }), recentData?.value
+    return (_jsxs(AccountSelectionStyled, { className: className, children: [_jsx(Input, { placeholder: "Search", suffix: _jsx(Icon, { type: "icon-ants-search-2", style: { fontSize: '24px', color: THEME.token?.bw8 } }), value: searchValue, onChange: event => setSearchValue(event.target.value) }), _jsx("div", { className: "account-list", children: _jsx("ul", { children: _jsxs(Scrollbars, { style: { width: '100%', height: showAllAccount ? '364px' : '410px' }, children: [recentData?.value?.length && recentData?.value?.length > 0 ? (_jsxs(_Fragment, { children: [_jsx(Text, { className: "recent-text", children: "Recent" }), recentData?.value
                                         .map(accountId => accountData?.find(account => account.userId === accountId))
                                         .filter((accountId, index, self) => Boolean(accountId) && index === self.indexOf(accountId))
                                         .map(account => (_jsx(AccountItem, { userName: account.userName, userId: account.userId, onClick: handleSelectAccount, isSelected: +currentAccount === account.userId }, account.userId))), _jsx(Divider, { style: { margin: '8px 0', color: THEME.token?.bw3 } })] })) : null, stateAccountData

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

@@ -1,4 +1,3 @@
 export { AccountSelection, type AccountSelectionProps } from './AccountSelection';
-export { AccountListing } from './AccountListing';
-export type { AccountListingHandle } from './AccountListing';
+export { AccountListing, type AccountListingHandle } from './AccountListing';
 export { useAccountSelection } from './hooks';

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

@@ -1,34 +1,3 @@
 import React from 'react';
-import { APIConfig, TDataType } from './types';
-export interface LabeledValue {
-    label: string;
-    value: string;
-    dataType?: TDataType;
-    disabled?: boolean;
-    status?: any;
-}
-export interface LabeledTreeValue extends LabeledValue {
-    [key: string]: any;
-    children: LabeledTreeValue[];
-    disableCheckbox?: boolean;
-    selectable?: boolean;
-    checkable?: boolean;
-    type: number | null;
-    status?: any;
-}
-export interface AddDynamicContentProps {
-    defaultDynamicIndex?: number;
-    journeySettings: Record<string, any>;
-    contentSources: Record<string, any>;
-    additionalAttrProperties?: string[];
-    defaultData?: Record<string, any>;
-    visible: boolean;
-    showDisplayFormat?: boolean;
-    showIndex?: boolean;
-    onCancel?: () => void;
-    onOk?: (value: Record<string, any>) => void;
-    modalTitle?: string;
-    isShowCustomFunction?: boolean;
-    APIConfig: APIConfig;
-}
+import { AddDynamicContentProps } from './types';
 export declare const AddDynamicContent: React.FC<AddDynamicContentProps>;

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

@@ -15,6 +15,7 @@ import { Text } from '@antscorp/antsomi-ui/es/components/atoms/Text';
 import { Form, Select, TreeSelect } from 'antd';
 import { TreeNode } from 'rc-tree-select';
 // Locales
+import { translate, translations as translationLib } from '@antscorp/antsomi-locales';
 import i18nInstance from '@antscorp/antsomi-ui/es/locales/i18n';
 import { translations } from '@antscorp/antsomi-ui/es/locales/translations';
 // Query
@@ -33,6 +34,7 @@ import { buildMappingFields, buildOptionAttrArchive, checkStatusAttr, CUSTOM_TYP
 // Style
 import { EditorScript } from '../EditorScript';
 import { InputSuggestion, ModalCustom } from './styled';
+import { Input, Radio } from '../../atoms';
 const getMembers = (member) => {
     if (!member.children || !member.children.length) {
         return member;
@@ -303,6 +305,12 @@ export const AddDynamicContent = props => {
         }
         return false;
     }, [selectedAttr, selectedDynamicContentType, eventTrackingAttributes?.mainObjects]);
+    const eventBOAttributeLabel = useMemo(() => {
+        if (!selectedAttr?.itemTypeId || !listEventAttributes)
+            return '';
+        const boAttr = listEventAttributes.find(row => row.itemTypeId === selectedAttr?.itemTypeId);
+        return boAttr?.label;
+    }, [listEventAttributes, selectedAttr]);
     const itemTypeName = useMemo(() => {
         let draftItemTypeName = '';
         if (itemTypeId) {
@@ -416,6 +424,8 @@ export const AddDynamicContent = props => {
             [DYNAMIC_CONTENT_SETTING_KEY.DISPLAY_FORMAT_TYPE]: undefined,
             [DYNAMIC_CONTENT_SETTING_KEY.FUNCTION]: undefined,
             [DYNAMIC_CONTENT_SETTING_KEY.DATA_TYPE]: optionDataType[0].value,
+            [DYNAMIC_CONTENT_SETTING_KEY.DEFAULT_VALUE]: '',
+            [DYNAMIC_CONTENT_SETTING_KEY.DATA_SOURCE]: 'event',
         });
     }, [form]);
     useEffect(() => {
@@ -1119,7 +1129,7 @@ export const AddDynamicContent = props => {
                                     __html: `${t(translations.dynamicContent.modal.label.displayFormat)}: <bdo dir='ltr'>${formatedAttr}</bdo>`,
                                 } })) : null, !showDetailEditDF && (_jsx(Button, { disabled: isActionArchive &&
                                     selectedDynamicContentType !== DYNAMIC_CONTENT_TYPE.EVENT_ATTRIBUTE.value, type: "text", style: { display: 'inline-block' }, onClick: () => setShowDetailEditDF(prevShow => !prevShow), children: t(translations.edit.title) }))] }), children: _jsx(Select, { disabled: isActionArchive &&
-                            selectedDynamicContentType !== DYNAMIC_CONTENT_TYPE.EVENT_ATTRIBUTE.value, style: { height: 28 }, options: attrDFOptions }) })] }));
+                            selectedDynamicContentType !== DYNAMIC_CONTENT_TYPE.EVENT_ATTRIBUTE.value, style: { height: 28 }, options: attrDFOptions }) }), renderDefaultValue()] }));
     };
     const renderCustomerAttrFields = () => {
         if (hasError[DYNAMIC_CONTENT_SETTING_KEY.ATTRIBUTE]) {
@@ -1205,6 +1215,22 @@ export const AddDynamicContent = props => {
                     gap: '8px',
                 }, children: _jsx(DisplayFormat, { infos: infos, url: url, displayFormatType: selectedDFType, formatSettings: attrDFSettings, onSettingsChange: (values) => setAttrDFSettings(values), dynamicContentType: form.getFieldValue(DYNAMIC_CONTENT_SETTING_KEY.DYNAMIC_CONTENT_TYPE) }) }));
     };
+    const renderGetFromData = () => (_jsx(Form.Item, { className: "ants-items-center", label: translate(translationLib._TITL_PERSONALIZATION_LOOKUP_YES, 'Get data from'), name: DYNAMIC_CONTENT_SETTING_KEY.DATA_SOURCE, required: true, children: _jsx(Radio.Group, { defaultValue: "event", options: [
+                {
+                    value: 'event',
+                    label: 'Event data',
+                },
+                {
+                    value: 'object',
+                    label: (_jsxs(Text, { children: [translate(translationLib._TITL_PERSONALIZATION_LOOKUP_YES, 'Data object'), ' ', _jsx("b", { children: eventBOAttributeLabel })] })),
+                    disabled: !selectedAttr?.itemTypeId,
+                },
+            ], style: {
+                display: 'flex',
+                flexDirection: 'column',
+                gap: 8,
+            } }) }));
+    const renderDefaultValue = () => (_jsx(Form.Item, { className: "ants-items-center", label: translate(translations._TITL_DEFAULT_VALUE, 'Default value'), name: DYNAMIC_CONTENT_SETTING_KEY.DEFAULT_VALUE, children: _jsx(Input, { placeholder: "Enter fallback text when data is unavailable" }) }));
     return (_jsx(ModalCustom, { closable: false, destroyOnClose: true, forceRender: true, mask: true, okButtonProps: { disabled: formSubmitDisabled }, title: modalTitle || t(translations.dynamicContent.modal.title.addDynamicContent), visible: visible, onCancel: handleOnCancelModal, onOk: handleOnOkModal, children: _jsxs(Spin, { spinning: isFetchingSourceBO ||
                 isFetchingListBoAttr ||
                 isFetchingEventAttr ||
@@ -1212,7 +1238,7 @@ export const AddDynamicContent = props => {
                 isFetchingPromotionCodeAttr ||
                 isFetchingDynamicContentAttr, children: [_jsxs(Form, { style: { width: '100%' }, form: form, labelAlign: "left", labelCol: { span: 9 }, wrapperCol: { span: 15 }, onValuesChange: handleFormValuesChanges, initialValues: {
                         [DYNAMIC_CONTENT_SETTING_KEY.DYNAMIC_CONTENT_TYPE]: listDynamicContentTypes[0].value,
-                    }, children: [_jsx(Form.Item, { style: { alignItems: 'center' }, label: t(translations.dynamicContent.modal.label.contentSource), name: DYNAMIC_CONTENT_SETTING_KEY.DYNAMIC_CONTENT_TYPE, required: true, children: _jsx(Select, { style: { height: 28 }, options: listDynamicContentTypes }) }), selectedDynamicContentType === DYNAMIC_CONTENT_TYPE.VISITOR_ATTRIBUTE.value && (_jsx(_Fragment, { children: renderVisitorAttrFields() })), selectedDynamicContentType === DYNAMIC_CONTENT_TYPE.CUSTOMER_ATTRIBUTE.value && (_jsx(_Fragment, { children: renderCustomerAttrFields() })), selectedDynamicContentType === CUSTOM_TYPE.value && _jsx(_Fragment, { children: renderCustomFunctionFields() }), selectedDynamicContentType === DYNAMIC_CONTENT_TYPE.EVENT_ATTRIBUTE.value && (_jsxs(_Fragment, { children: [renderEventFields(), renderSourceFields(), renderEventAttrFields(), isShowEventIndexField
+                    }, children: [_jsx(Form.Item, { style: { alignItems: 'center' }, label: t(translations.dynamicContent.modal.label.contentSource), name: DYNAMIC_CONTENT_SETTING_KEY.DYNAMIC_CONTENT_TYPE, required: true, children: _jsx(Select, { style: { height: 28 }, options: listDynamicContentTypes }) }), selectedDynamicContentType === DYNAMIC_CONTENT_TYPE.VISITOR_ATTRIBUTE.value && (_jsxs(_Fragment, { children: [renderVisitorAttrFields(), renderDefaultValue()] })), selectedDynamicContentType === DYNAMIC_CONTENT_TYPE.CUSTOMER_ATTRIBUTE.value && (_jsxs(_Fragment, { children: [renderCustomerAttrFields(), renderDefaultValue()] })), selectedDynamicContentType === CUSTOM_TYPE.value && _jsx(_Fragment, { children: renderCustomFunctionFields() }), selectedDynamicContentType === DYNAMIC_CONTENT_TYPE.EVENT_ATTRIBUTE.value && (_jsxs(_Fragment, { children: [renderEventFields(), renderSourceFields(), renderEventAttrFields(), renderGetFromData(), renderDefaultValue(), isShowEventIndexField
                                     ? renderIndexFields({ disabled: false, loading: false })
                                     : null] })), selectedDynamicContentType === DYNAMIC_CONTENT_TYPE.PROMOTION_CODE.value && (_jsxs(_Fragment, { children: [renderPromotionPoolFields(), renderPromotionCodeAttr()] })), selectedDynamicContentType && regexCSType.test(selectedDynamicContentType) && (_jsxs(_Fragment, { children: [renderBoAttrFields(), renderIndexFields({ disabled: isActionArchive, loading: isFetchingListBoAttr })] })), showDisplayFormat && renderDisplayFormat()] }), showDisplayFormat && renderDisplayFormat() !== null && renderDetailDFSettings(), isShowCustomFunction && selectedDynamicContentType === CUSTOM_TYPE.value && (_jsx("div", { style: {
                         display: 'flex',

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

@@ -1,6 +1,7 @@
+/// <reference types="react" />
 import type { PayloadInfo } from '@antscorp/antsomi-ui/es/types';
-export type TDisplayFormat = 'number' | 'percentage' | 'currency' | 'datetime';
-type DisplayFormatProps = {
+import { TDisplayFormat } from '../../types';
+export type DisplayFormatProps = {
     onSettingsChange: (settings: any) => void;
     formatSettings: any;
     displayFormatType: TDisplayFormat;

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

@@ -1,4 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
+// Libraries
 // Components
 import FormatDatetime from '../FormatDatetime/FormatDatetime';
 import FormatNumber from '../FormatNumber/FormatNumber';

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

@@ -1,5 +1,5 @@
-import { TDisplayFormat } from '../DisplayFormat';
 import { PayloadInfo } from '@antscorp/antsomi-ui/es/types';
+import { TDisplayFormat } from '../../types';
 declare const groupingOptions: {
     readonly COMMA: {
         readonly index: 0;
@@ -32,8 +32,8 @@ declare const decimalOptions: {
 export type TGroupingSeparator = (typeof groupingOptions)[keyof typeof groupingOptions]['value'];
 export type TDecimalSeparator = (typeof decimalOptions)[keyof typeof decimalOptions]['value'];
 export type TNumberFormatSettings = {
-    decimalPlaces: number;
     grouping: TGroupingSeparator;
+    decimalPlaces: number;
     decimal: TDecimalSeparator;
     isCompact: boolean;
     currencyCode: string;

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

@@ -1,4 +1,3 @@
-import { TDataType } from './types';
 export declare const DYNAMIC_CONTENT_SETTING_KEY: {
     EVENT: string;
     INDEX: string;
@@ -13,6 +12,8 @@ export declare const DYNAMIC_CONTENT_SETTING_KEY: {
     PERNAME: string;
     SAVE_AS_TEMPLATE: string;
     DATA_TYPE: string;
+    DATA_SOURCE: string;
+    DEFAULT_VALUE: string;
 };
 export declare const DYNAMIC_CONTENT_TYPE_KEY: {
     readonly BO_SETTINGS: "bo-settings";
@@ -29,11 +30,27 @@ export declare const DYNAMIC_CONTENT_TYPE: {
         value: string;
     };
 };
-export declare const DYNAMIC_CONTENT_ATTR_DF_TYPE: {
-    label: string;
-    value: string;
-    dataType: TDataType;
-}[];
+export declare const DYNAMIC_CONTENT_ATTR_DF_TYPE: readonly [{
+    readonly label: "Number";
+    readonly value: "number";
+    readonly dataType: "number";
+}, {
+    readonly label: "Percentage";
+    readonly value: "percentage";
+    readonly dataType: "number";
+}, {
+    readonly label: "Currency";
+    readonly value: "currency";
+    readonly dataType: "number";
+}, {
+    readonly label: "Datetime";
+    readonly value: "datetime";
+    readonly dataType: "datetime";
+}, {
+    readonly label: "Raw string";
+    readonly value: "raw_string";
+    readonly dataType: "string";
+}];
 export declare const DATA_TYPE: {
     [key: string]: {
         index: number;
@@ -100,19 +117,19 @@ export declare const ATTRIBUTE_NUMBERIC_FORMAT_OPTION: {
     };
 };
 export declare const COLLECTION_STATUS: {
-    2: {
-        value: number;
-        label: string;
-        errorMessage: string;
+    readonly 2: {
+        readonly value: 2;
+        readonly label: "Disable";
+        readonly errorMessage: "This collection is disabled";
     };
-    4: {
-        value: number;
-        label: string;
-        errorMessage: string;
+    readonly 4: {
+        readonly value: 4;
+        readonly label: "Archive";
+        readonly errorMessage: "This collection is not available";
     };
-    DELETE: {
-        value: number;
-        label: string;
-        errorMessage: string;
+    readonly DELETE: {
+        readonly value: 3;
+        readonly label: "Delete";
+        readonly errorMessage: "This collection does not exist";
     };
 };

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

@@ -12,6 +12,8 @@ export const DYNAMIC_CONTENT_SETTING_KEY = {
     PERNAME: 'templateName',
     SAVE_AS_TEMPLATE: 'saveAsTemplate',
     DATA_TYPE: 'dataType',
+    DATA_SOURCE: 'dataSource',
+    DEFAULT_VALUE: 'defaultValue',
 };
 export const DYNAMIC_CONTENT_TYPE_KEY = {
     BO_SETTINGS: 'bo-settings',

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

@@ -1,9 +1,10 @@
-export declare const InputSuggestion: import("styled-components").StyledComponent<(<ValueType = any, OptionType extends import("rc-select/lib/Select").BaseOptionType | import("rc-select/lib/Select").DefaultOptionType = import("rc-select/lib/Select").DefaultOptionType>(props: import("antd").AutoCompleteProps<ValueType, OptionType> & {
-    children?: React.ReactNode;
-} & React.RefAttributes<import("rc-select").BaseSelectRef>) => React.ReactElement) & {
+/// <reference types="react" />
+export declare const InputSuggestion: import("styled-components").StyledComponent<(<ValueType = any, OptionType extends import("rc-select/lib/Select").DefaultOptionType | import("rc-select/lib/Select").BaseOptionType = import("rc-select/lib/Select").DefaultOptionType>(props: import("antd").AutoCompleteProps<ValueType, OptionType> & {
+    children?: import("react").ReactNode;
+} & import("react").RefAttributes<import("antd").RefSelectProps>) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>) & {
     displayName?: string | undefined;
     Option: import("rc-select/lib/Option").OptionFC;
-    _InternalPanelDoNotUseOrYouWillBeFired: (props: import("antd/es/_util/type").AnyObject) => React.JSX.Element;
+    _InternalPanelDoNotUseOrYouWillBeFired: (props: import("antd/es/_util/type").AnyObject) => import("react").JSX.Element;
 }, any, {}, never>;
 export declare const ModalCustom: import("styled-components").StyledComponent<import("react").FC<import("../Modal").ModalProps> & {
     confirm: (props: import("antd").ModalFuncProps) => {

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

@@ -11,3 +11,35 @@ export type APIParams = {
     url: string;
 } & Record<string, any>;
 export type DynamicContentType = (typeof DYNAMIC_CONTENT_TYPE_KEY)[keyof typeof DYNAMIC_CONTENT_TYPE_KEY];
+export interface LabeledValue {
+    label: string;
+    value: string;
+    dataType?: TDataType;
+    disabled?: boolean;
+    status?: any;
+}
+export interface LabeledTreeValue extends LabeledValue {
+    [key: string]: any;
+    children: LabeledTreeValue[];
+    disableCheckbox?: boolean;
+    selectable?: boolean;
+    checkable?: boolean;
+    type: number | null;
+    status?: any;
+}
+export interface AddDynamicContentProps {
+    defaultDynamicIndex?: number;
+    journeySettings: Record<string, any>;
+    contentSources: Record<string, any>;
+    additionalAttrProperties?: string[];
+    defaultData?: Record<string, any>;
+    visible: boolean;
+    showDisplayFormat?: boolean;
+    showIndex?: boolean;
+    onCancel?: () => void;
+    onOk?: (value: Record<string, any>) => void;
+    modalTitle?: string;
+    isShowCustomFunction?: boolean;
+    APIConfig: APIConfig;
+}
+export type TDisplayFormat = 'number' | 'percentage' | 'currency' | 'datetime';

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

@@ -1,6 +1,6 @@
 import dayjs from 'dayjs';
 import type { TDatetimeFormatSetting, TNumberFormatSettings } from './components';
-import { LabeledTreeValue, LabeledValue } from './AddDynamicContent';
+import { LabeledTreeValue, LabeledValue } from './types';
 export declare function getStringFormatDateDF(formatSettings: TDatetimeFormatSetting): string;
 export declare function formatDatetimeDF(date: string | number | dayjs.Dayjs | Date, formatSettings: TDatetimeFormatSetting): string;
 export declare function formatNumberDF(number: number, fType: 'number' | 'percentage' | 'currency', fOptions?: Omit<TNumberFormatSettings, 'type'>): string;

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

@@ -4,7 +4,7 @@ export interface AlignEditProps {
     className?: string;
     align?: TAlign;
     onChange?: (align: TAlign) => void;
-    style?: object;
+    style?: Object;
 }
 export interface AlignSettingProps extends AlignEditProps {
     label?: string;

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

@@ -1,3 +1,3 @@
 import { TAlign } from './index';
 export declare const mapAlignToJustifyContent: (value: TAlign) => "auto" | "center" | "end" | "start";
-export declare const mapJustifyContentToAlign: (value: "start" | "end" | "center") => string | undefined;
+export declare const mapJustifyContentToAlign: (value: 'start' | 'end' | 'center') => string | undefined;

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

@@ -1,2 +1,3 @@
+/// <reference types="react" />
 export declare const ContentWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const CloseButton: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("antd").FlexProps<import("antd/es/_util/type").AnyObject> & import("react").RefAttributes<HTMLElement>>, any, {}, never>;
+export declare const CloseButton: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("antd/es/flex/interface").FlexProps<import("antd/es/_util/type").AnyObject> & import("react").RefAttributes<HTMLElement>>, any, {}, never>;

package/es/components/molecules/CalendarSelection/CalendarSelection.js

@@ -10,16 +10,15 @@ import { LOCAL_TIMEZONE, RANGE_LIMIT } from './constants';
 import { initState, resetValue } from './actions';
 import { useTriggerOut } from './hooks/useTriggerOut';
 export const CalendarSelection = props => {
-    const initialed = useRef(false);
+    const initialized = useRef(false);
     const { value, rangeLimit = RANGE_LIMIT, timezone = LOCAL_TIMEZONE, timeDisplayProps, popoverProps, rangePickerProps, onChange, } = props;
     const [state, dispatch] = useReducer(reducer, INITIAL_STATE);
     useLayoutEffect(() => {
-        if (!value)
+        if (!value || initialized.current)
             return;
-        const needTriggerOut = !initialed.current;
-        // console.log({ needTriggerOut });
+        const needTriggerOut = !initialized.current;
         dispatch(initState(value, needTriggerOut));
-        initialed.current = true;
+        initialized.current = true;
     }, [value]);
     useLayoutEffect(() => {
         if (!state.open) {

package/es/components/molecules/CalendarSelection/actions.d.ts

@@ -1,14 +1,4 @@
 import { Custom, RangeInfo, CalendarSelectionValue, RangeValue } from './types';
-export declare const ACTION_TYPES: {
-    readonly initState: "init_state";
-    readonly changeRangeType: "change_range_type";
-    readonly updateRangeInfo: "update_range_info";
-    readonly updateRangeValue: "update_range_value";
-    readonly changeAutoUpdateTo: "change_auto_update_to";
-    readonly togglePopover: "toggle_popover";
-    readonly apply: "apply";
-    readonly resetValue: "reset_value";
-};
 export declare const changeRangeType: (rangeType: string, callback?: (rangeInfo: RangeInfo) => void) => {
     type: "change_range_type";
     payload: {
@@ -33,7 +23,7 @@ export declare const updateRangeValue: (rangeValue: RangeValue[], options?: {
         } | undefined;
     };
 };
-export declare const changeAutoUpdateTo: (value: Custom["autoUpdateTo"]) => {
+export declare const changeAutoUpdateTo: (value: Custom['autoUpdateTo']) => {
     type: "change_auto_update_to";
     payload: import("./types").AutoUpdateTo;
 };

package/es/components/molecules/CalendarSelection/actions.js

@@ -1,13 +1,4 @@
-export const ACTION_TYPES = {
-    initState: 'init_state',
-    changeRangeType: 'change_range_type',
-    updateRangeInfo: 'update_range_info',
-    updateRangeValue: 'update_range_value',
-    changeAutoUpdateTo: 'change_auto_update_to',
-    togglePopover: 'toggle_popover',
-    apply: 'apply',
-    resetValue: 'reset_value',
-};
+import { ACTION_TYPES } from './constants';
 export const changeRangeType = (rangeType, callback) => ({
     type: ACTION_TYPES.changeRangeType,
     payload: { rangeType, callback },

package/es/components/molecules/CalendarSelection/components/TimeRangeDisplay/TimeRangeDisplay.d.ts

@@ -1,10 +1,3 @@
 import React from 'react';
-import { CalendarSelectionValue } from '../../types';
-export type TimeRangeDisplayProps = {
-    showType?: boolean;
-    formatStart?: string;
-    formatEnd?: string;
-    operator?: string;
-    render?: (value: CalendarSelectionValue, rangeSelectedTitle: string, rangeValueTitles: string[], handleOpenPopover: () => void) => React.ReactNode;
-};
+import { TimeRangeDisplayProps } from '../../types';
 export declare const TimeRangeDisplay: React.FC<TimeRangeDisplayProps>;