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

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

@@ -1,30 +1,10 @@
 import React from 'react';
-import { DisableShortLinkTypeProps } from './PopupShortLink';
-export type KeyTagType = 'shortlink' | 'shortlink_static';
-export type SelectedPropertiesProps = {
-    keyTag: KeyTagType;
-    link: string;
-    urlDetected: string;
-};
-export type InputDynamicProps = {
-    value: string;
-    isViewMode?: boolean;
-    errors?: string[];
-    disabledOpts?: DisableShortLinkTypeProps;
-    canMultipleLine?: boolean;
-    onError?: Function;
-    onChange: (valueOut: string) => any;
-    addMessageToQueue?: Function;
+import { InputDynamicProps } from './types';
+export declare const AllowDynamicType: {
+    readonly SHORTLINK: "shortlink";
+    readonly ADDPERSONALIZATION: "addPersonalization";
 };
 export declare const InputDynamic: {
     (props: InputDynamicProps): React.JSX.Element;
-    defaultProps: {
-        value: string;
-        isViewMode: boolean;
-        errors: never[];
-        canMultipleLine: boolean;
-        onError: () => void;
-        onChange: () => void;
-        addMessageToQueue: () => void;
-    };
+    defaultProps: InputDynamicProps;
 };

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

@@ -1,28 +1,43 @@
+/* eslint-disable @typescript-eslint/no-unused-expressions */
 // Libraries
-import React, { useState, useLayoutEffect, useEffect, useRef, useCallback, } from 'react';
+import React, { useState, useLayoutEffect, useEffect, useRef, useCallback, useMemo, } from 'react';
 import classnames from 'classnames';
+import { has, isEmpty, omit } from 'lodash';
 // Components
 import CaretPositioning from './EditCaretPositioning';
-import { WrapperInputStyle, TooltipHover } from './styled';
+import { WrapperInputStyle, TooltipHover, DynamicItem } from './styled';
+import { Popover } from 'antd';
+import { AddDynamicContent } from '../../molecules/AddDynamicContent';
 import { PopupShortLink } from './PopupShortLink';
 import Icon from '@antscorp/icons';
 // Utils
 import { getObjectPropSafely, random, safeParse } from '@antscorp/antsomi-ui/es/utils';
-import { convertBreakTag, convertDivToBreakTag, convertHtmlText, genShortLinkValue, getInsertLinkPatternWithAppendSpaceEnd, handleUpdateInputPersonalization, initialValue, pasteHtmlAtCaret, removeHtmlTag, spacingNonTracking, validateHTMLTags, } from './utils';
+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';
 const PATH = 'src/components/atoms/InputDynamic/InputDynamic.tsx';
+export const AllowDynamicType = {
+    SHORTLINK: 'shortlink',
+    ADDPERSONALIZATION: 'addPersonalization',
+};
 const defaultProps = {
     value: '',
     isViewMode: false,
     errors: [],
     canMultipleLine: false,
+    apiConfig: {
+        domain: 'https://sandbox-media-template.antsomi.com/cdp',
+        slug: '/api/v1',
+        token: '5474r2x214z2a4b403e4y446p4b4t2b4t474j4t2i5',
+        accountId: '1600085679',
+        userId: '1600085679',
+    },
     onError: () => { },
     onChange: () => { },
     addMessageToQueue: () => { },
 };
 export const InputDynamic = (props) => {
-    const { value, isViewMode, errors, disabledOpts, canMultipleLine, onError, onChange, addMessageToQueue, } = props;
+    const { value, isViewMode, errors, disabledOpts, canMultipleLine, allowDynamicOptions, apiConfig, onError, onChange, addMessageToQueue, } = props;
     // States
     const [textValue, setTextValue] = useState(initialValue(value));
     const [initSelectedProperties, setInitSelectedProperties] = useState({
@@ -30,11 +45,39 @@ export const InputDynamic = (props) => {
         link: '',
         urlDetected: '',
     });
+    const [isShowPopover, setIsShowPopover] = useState(false);
+    const [dynamicContent, setDynamicContent] = useState({
+        visible: false,
+        defaultData: {},
+        activeTagId: '',
+        contentSources: {
+            groups: [],
+            expanded: [],
+            isLoadingDataBO: false,
+        },
+        journeySettings: {
+            unsubscribeSegmentType: 'customer',
+            triggerType: 'event_based',
+            triggerEvent: {
+                eventActionId: '',
+                eventCategoryId: '',
+                insightPropertyIds: [],
+            },
+        },
+    });
     const [popoverOpenShortLink, setPopoverOpenShortLink] = useState(false);
     const [tooltipHoverDebounce, _tooltipHover, setTooltipHover] = useDebounce({ x: 0, y: 0 }, 200);
     // Refs
     const caretPositionRef = useRef(null);
     const personalizationInputRef = useRef(null);
+    const isRenderAddDynamicContent = useMemo(() => {
+        if (isEmpty(apiConfig) ||
+            isEmpty(allowDynamicOptions) ||
+            (allowDynamicOptions &&
+                allowDynamicOptions.findIndex(dynamicKey => dynamicKey === AllowDynamicType.ADDPERSONALIZATION) === -1))
+            return false;
+        return true;
+    }, [apiConfig, allowDynamicOptions]);
     const onTriggerChange = (event = null) => {
         var _a;
         try {
@@ -72,6 +115,16 @@ export const InputDynamic = (props) => {
             console.error(error);
         }
     };
+    const handleHidePopover = () => {
+        setIsShowPopover(false);
+    };
+    const handleOpenChangeAddDynamicContent = useCallback((newChange) => {
+        setDynamicContent(prev => (Object.assign(Object.assign({}, prev), { visible: newChange })));
+    }, []);
+    const handleOpenChange = (newOpen) => {
+        setDynamicContent(prev => (Object.assign(Object.assign({}, prev), { activeTagId: '' })));
+        setIsShowPopover(newOpen);
+    };
     const callback = (type, data) => {
         var _a, _b;
         switch (type) {
@@ -126,6 +179,94 @@ export const InputDynamic = (props) => {
             }
         }
     };
+    const handleCloseAddDynamicContent = () => {
+        setDynamicContent(Object.assign(Object.assign({}, dynamicContent), { visible: false }));
+    };
+    const handleInsertText = (dataObj) => {
+        try {
+            const id = random(5);
+            const { mappingFields = '', type = '', attribute = {}, customFunction = {} } = dataObj;
+            const personalizationCode = `#{${mappingFields}||""}`;
+            const bgColor = getBgColorByContentSourceType(type);
+            const label = getObjectPropSafely(() => type === 'custom' ? customFunction.personalizationName : attribute.label);
+            if (personalizationInputRef.current instanceof HTMLElement) {
+                if (dynamicContent.activeTagId) {
+                    // for case update
+                    const element = document.getElementById(dynamicContent.activeTagId);
+                    const child = createElement('em', {
+                        class: 'editor-icon-remove',
+                        style: 'color: white;font-style: normal;',
+                    }, ['x']);
+                    const newElement = createElement('button', {
+                        id,
+                        class: 'insert-word',
+                        style: `color: white; font-size: inherit; outline: none;border: 1px solid transparent; border-radius: 1.2rem; max-height: 30px; cursor: pointer; backgroundColor: ${bgColor}`,
+                        contentEditable: 'false',
+                        value: `${personalizationCode.replace(/\s/gm, ' ')}`,
+                    }, [
+                        `${getObjectPropSafely(() => type === 'custom' ? customFunction.personalizationName : attribute.label)} `,
+                        child,
+                    ]);
+                    if (element && element.parentNode) {
+                        element.parentNode.replaceChild(newElement, element);
+                    }
+                    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();
+                CaretPositioning.restoreSelection(personalizationInputRef.current, caretPositionRef.current);
+                pasteHtmlAtCaret(getInsertPatternWithAppendSpaceEnd(id, personalizationCode, label, bgColor), null, () => {
+                    caretPositionRef.current = CaretPositioning.saveSelection(personalizationInputRef.current);
+                    onTriggerChange();
+                });
+                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') {
+                addMessageToQueue({
+                    path: PATH,
+                    func: 'handleInsertText',
+                    data: error,
+                });
+            }
+            // eslint-disable-next-line no-console
+            console.log(error);
+        }
+    };
     const handleKeyPress = (e) => {
         if (canMultipleLine)
             return;
@@ -155,21 +296,35 @@ export const InputDynamic = (props) => {
     const toggleShortLinkModal = useCallback(() => {
         setPopoverOpenShortLink(!popoverOpenShortLink);
     }, [popoverOpenShortLink]);
+    const handleClickDynamicItem = (e, dynamicKey) => {
+        e.stopPropagation();
+        handleHidePopover();
+        if (dynamicKey === AllowDynamicType.SHORTLINK) {
+            toggleShortLinkModal();
+        }
+        if (dynamicKey === AllowDynamicType.ADDPERSONALIZATION) {
+            handleOpenChangeAddDynamicContent(true);
+        }
+    };
     /**
-     * [NOTE:open shortlink modal to edit]
+     * [NOTE:open modal to edit]
      */
     useEffect(() => {
         const handleClickTag = (e) => {
             try {
                 e.stopPropagation();
                 if (e.target) {
-                    const { value = '' } = e.target;
+                    const { value = '', id = '' } = e.target;
                     const shortLink = value.replace(/#|{|}|/g, '').split('(');
                     if (shortLink && shortLink.length >= 2) {
                         const link = shortLink[1].substring(0, shortLink[1].length - 1) || '';
                         setInitSelectedProperties(prev => (Object.assign(Object.assign({}, prev), { link, keyTag: shortLink[0], urlDetected: e.currentTarget })));
                         toggleShortLinkModal();
                     }
+                    else {
+                        setDynamicContent(prev => (Object.assign(Object.assign({}, prev), { activeTagId: id })));
+                        handleOpenChangeAddDynamicContent(true);
+                    }
                 }
             }
             catch (err) {
@@ -188,7 +343,7 @@ export const InputDynamic = (props) => {
                 tag.removeEventListener('click', handleClickTag);
             });
         };
-    }, [textValue, toggleShortLinkModal]);
+    }, [handleOpenChangeAddDynamicContent, textValue, toggleShortLinkModal]);
     /** Anchor tooltip */
     useEffect(() => {
         let listElement = [];
@@ -246,11 +401,18 @@ export const InputDynamic = (props) => {
         const buttonElement = document.querySelectorAll('.insert-word');
         const listBtnElement = buttonElement && Array.from(buttonElement);
         const handleRemoveTag = (e) => {
-            var _a, _b, _c, _d, _e;
+            var _a, _b, _c, _d, _e, _f, _g, _h;
             if (e && ((_a = e.target) === null || _a === void 0 ? void 0 : _a.nodeName) === 'EM' && ((_b = e.target) === null || _b === void 0 ? void 0 : _b.className) === 'editor-icon-remove') {
                 e.stopPropagation();
-                (_d = (_c = e.target) === null || _c === void 0 ? void 0 : _c.parentElement) === null || _d === void 0 ? void 0 : _d.remove();
-                setTextValue(personalizationInputRef && ((_e = personalizationInputRef.current) === null || _e === void 0 ? void 0 : _e.innerHTML));
+                if (((_c = e.target) === null || _c === void 0 ? void 0 : _c.parentElement) &&
+                    has(dynamicContent.defaultData, [(_e = (_d = e.target) === null || _d === void 0 ? void 0 : _d.parentElement) === null || _e === void 0 ? void 0 : _e.id])) {
+                    setDynamicContent(prev => {
+                        var _a, _b;
+                        return (Object.assign(Object.assign({}, prev), { activeTagId: '', defaultData: omit(prev.defaultData, [(_b = (_a = e.target) === null || _a === void 0 ? void 0 : _a.parentElement) === null || _b === void 0 ? void 0 : _b.id]) }));
+                    });
+                }
+                (_g = (_f = e.target) === null || _f === void 0 ? void 0 : _f.parentElement) === null || _g === void 0 ? void 0 : _g.remove();
+                setTextValue(personalizationInputRef && ((_h = personalizationInputRef.current) === null || _h === void 0 ? void 0 : _h.innerHTML));
             }
         };
         listIconRemove.forEach(eachIcon => {
@@ -262,7 +424,7 @@ export const InputDynamic = (props) => {
                 eachIcon.removeEventListener('click', handleRemoveTag);
             });
         };
-    }, [textValue]);
+    }, [dynamicContent.defaultData, textValue]);
     useLayoutEffect(() => {
         try {
             // save caret position
@@ -292,6 +454,28 @@ export const InputDynamic = (props) => {
             }
         }
     }, [addMessageToQueue, onError, textValue]);
+    const renderContentDynamicOptions = () => {
+        if (!(allowDynamicOptions === null || allowDynamicOptions === void 0 ? void 0 : allowDynamicOptions.length)) {
+            return null;
+        }
+        return allowDynamicOptions.map((dynamicKey) => (React.createElement(DynamicItem, { key: dynamicKey, onClick: e => handleClickDynamicItem(e, dynamicKey) }, mapLabelPersonalization(dynamicKey))));
+    };
+    const renderAddPersonalizationView = () => {
+        if (isViewMode) {
+            return null;
+        }
+        const isRenderPopover = allowDynamicOptions && (allowDynamicOptions === null || allowDynamicOptions === void 0 ? void 0 : allowDynamicOptions.length) > 0;
+        const iconPersonalization = (React.createElement(Icon, { type: "icon-ants-person-alt", onClick: e => {
+                e.stopPropagation();
+                if (!isRenderPopover) {
+                    toggleShortLinkModal();
+                }
+            }, className: "customize-antsomi-profile", style: { width: 24, height: 24 } }));
+        if (!isRenderPopover) {
+            return iconPersonalization;
+        }
+        return (React.createElement(Popover, { content: renderContentDynamicOptions(), placement: "bottomLeft", rootClassName: "no-padding-content", trigger: "click", open: isShowPopover, onOpenChange: handleOpenChange }, iconPersonalization));
+    };
     return (React.createElement(WrapperInputStyle, { id: "ants-ui-input-personalization" },
         React.createElement("div", { className: classnames({
                 'input-wrapper-outter': true,
@@ -310,11 +494,11 @@ export const InputDynamic = (props) => {
                 dangerouslySetInnerHTML: {
                     __html: getDangerouslySetInnerHTML(textValue),
                 }, onPaste: onPaste }),
-            !isViewMode && (React.createElement(Icon, { type: "icon-ants-person-alt", onClick: e => {
-                    e.stopPropagation();
-                    toggleShortLinkModal();
-                }, className: "customize-antsomi-profile", style: { width: 24, height: 24 } }))),
+            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 }))));
+        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) => {
+                handleInsertText(value);
+            }, onCancel: () => handleCloseAddDynamicContent() }))));
 };
 InputDynamic.defaultProps = defaultProps;

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

@@ -1,5 +1,5 @@
 import { FC } from 'react';
-import type { SelectedPropertiesProps } from './InputDynamic';
+import type { SelectedPropertiesProps } from './types';
 type PopupShortLinkProps = {
     open: any;
     onClose: Function;

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

@@ -0,0 +1,71 @@
+export declare const DATE_AND_TIME_DEFAULT: {
+    type: string;
+    config: {
+        format: string;
+        date: {
+            check: boolean;
+            value: string;
+        };
+        time: {
+            check: boolean;
+            value: string;
+            timeFormat: string;
+        };
+    };
+};
+export declare const MAP_DATA_TYPE: {
+    number: {
+        name: string;
+        label: string;
+        translateCode: string;
+        value: string;
+    };
+    string: {
+        name: string;
+        label: string;
+        translateCode: string;
+        value: string;
+    };
+    text: {
+        name: string;
+        label: string;
+        translateCode: string;
+        value: string;
+    };
+    datetime: {
+        name: string;
+        label: string;
+        translateCode: string;
+        value: string;
+    };
+    boolean: {
+        name: string;
+        label: string;
+        translateCode: string;
+        value: string;
+    };
+    array_number: {
+        name: string;
+        label: string;
+        translateCode: string;
+        value: string;
+    };
+    array_string: {
+        name: string;
+        label: string;
+        translateCode: string;
+        value: string;
+    };
+    array_datetime: {
+        name: string;
+        label: string;
+        translateCode: string;
+        value: string;
+    };
+    object: {
+        name: string;
+        label: string;
+        translateCode: string;
+        value: string;
+    };
+};

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

@@ -0,0 +1,71 @@
+export const DATE_AND_TIME_DEFAULT = {
+    type: 'DATE_AND_TIME',
+    config: {
+        format: 'DD/MM/YYYY',
+        date: {
+            check: true,
+            value: 'long',
+        },
+        time: {
+            check: true,
+            value: 'medium',
+            timeFormat: '24',
+        },
+    },
+};
+export const MAP_DATA_TYPE = {
+    number: {
+        name: 'number',
+        label: 'Number',
+        translateCode: '',
+        value: 'number',
+    },
+    string: {
+        name: 'string',
+        label: 'String',
+        translateCode: '',
+        value: 'string',
+    },
+    text: {
+        name: 'text',
+        label: 'Text',
+        translateCode: '',
+        value: 'text',
+    },
+    datetime: {
+        name: 'datetime',
+        label: 'Datetime',
+        translateCode: '',
+        value: 'datetime',
+    },
+    boolean: {
+        name: 'boolean',
+        label: 'Boolean',
+        translateCode: '',
+        value: 'boolean',
+    },
+    array_number: {
+        name: 'array_number',
+        label: 'Array of Numbers',
+        translateCode: '',
+        value: 'array_number',
+    },
+    array_string: {
+        name: 'array_string',
+        label: 'Array of Strings',
+        translateCode: '',
+        value: 'array_string',
+    },
+    array_datetime: {
+        name: 'array_datetime',
+        label: 'Array of Datetimes',
+        translateCode: '',
+        value: 'array_datetime',
+    },
+    object: {
+        name: 'object',
+        label: 'Object',
+        translateCode: '',
+        value: 'object',
+    },
+};

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

@@ -1,2 +1,2 @@
 export { InputDynamic } from './InputDynamic';
-export type { InputDynamicProps } from './InputDynamic';
+export type { InputDynamicProps } from './types';

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

@@ -10,3 +10,4 @@ export declare const TooltipHover: import("styled-components").StyledComponent<"
     left: number;
     isShow: boolean;
 }, never>;
+export declare const DynamicItem: import("styled-components").StyledComponent<"div", any, {}, never>;

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

@@ -1,4 +1,4 @@
-var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
+var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r;
 // Libraries
 import styled from 'styled-components';
 import { Input } from '../Input/Input';
@@ -264,7 +264,7 @@ export const TooltipHover = styled.div `
   background: rgba(0, 0, 0, 0.62);
   transition: opacity 186ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,
     transform 124ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
-  color: #fff;
+  color: ${(_o = THEME.token) === null || _o === void 0 ? void 0 : _o.bw0};
   font-size: 12px;
   box-shadow: 0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14),
     0px 3px 14px 2px rgba(0, 0, 0, 0.12);
@@ -279,3 +279,15 @@ export const TooltipHover = styled.div `
   overflow: hidden;
   box-sizing: border-box;
 `;
+export const DynamicItem = styled.div `
+  padding: 4px 16px;
+  font-size: 13px;
+  color: ${(_p = THEME.token) === null || _p === void 0 ? void 0 : _p.bw10};
+  cursor: pointer;
+  transition: background-color 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
+
+  &:hover {
+    color: ${(_q = THEME.token) === null || _q === void 0 ? void 0 : _q.bw0};
+    background-color: ${(_r = THEME.token) === null || _r === void 0 ? void 0 : _r.colorPrimary};
+  }
+`;

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

@@ -0,0 +1,110 @@
+import { DisableShortLinkTypeProps } from './PopupShortLink';
+import { AllowDynamicType } from './InputDynamic';
+import { APIConfig, TDataType } from '../../molecules/AddDynamicContent';
+export type KeyTagType = 'shortlink' | 'shortlink_static';
+export type SelectedPropertiesProps = {
+    keyTag: KeyTagType;
+    link: string;
+    urlDetected: string;
+};
+export type AllowDynamicOptions = (typeof AllowDynamicType)[keyof typeof AllowDynamicType];
+export type InputDynamicProps = {
+    value: string;
+    isViewMode?: boolean;
+    errors?: string[];
+    disabledOpts?: DisableShortLinkTypeProps;
+    allowDynamicOptions?: Array<AllowDynamicOptions>;
+    apiConfig?: APIConfig;
+    canMultipleLine?: boolean;
+    onError?: Function;
+    onChange: (valueOut: string) => any;
+    addMessageToQueue?: Function;
+};
+export type TOperatorValue = 'greater_than' | 'greater_than_equal' | 'less_than' | 'less_than_equal' | 'not_equals' | 'equals' | 'between' | 'exists' | 'not_exists' | 'contains' | 'doesnt_contain' | 'start_with' | 'not_start_with' | 'end_with' | 'not_end_with' | 'before_date' | 'after_date' | 'equal_time_ago' | 'not_equal_time_ago' | 'before_time_ago' | 'after_time_ago' | 'between_time_ago' | 'matches' | 'not_matches' | 'includes' | 'doesnt_include' | null;
+export type VisitorMetadata = {
+    item_type_id: string | number;
+    item_type_name: string;
+    item_property_name: string;
+};
+export type CustomerMetadata = VisitorMetadata;
+export type EventMetadata = {
+    insight_property_id: any | any[] | null;
+    insight_property_ids?: string[] | null;
+    event_action_id: string | null;
+    event_category_id: string | null;
+    event_tracking_name: string | null;
+    item_type_id: string | null;
+    item_type_name: string | null;
+    item_property_name: string | null;
+    item_property_label: string | null;
+    event_property_syntax: string | null;
+};
+export type TFilter = {
+    value: any;
+    operator: TOperatorValue;
+    data_type: TDataType;
+    column: string | null;
+    condition_type: 'comp_attr' | null;
+    value_type: 'event' | 'normal' | 'visitor' | 'customer';
+    time_unit?: 'DAY' | 'HOUR';
+    event_metadata?: EventMetadata;
+    visitor_metadata?: VisitorMetadata;
+    customer_metadata?: CustomerMetadata;
+    extend?: any;
+};
+export type TFilters = {
+    OR: {
+        AND: TFilter[];
+    }[];
+};
+export type TRanking = {
+    type: 'algorithms' | 'custom';
+    algorithms: {
+        sort: 'mix' | 'order';
+        value: {
+            value: string;
+            quantity: number;
+            by?: string;
+            last?: number;
+            to?: string;
+            sort_type?: 'desc' | 'asc';
+            [key: string]: any;
+        }[];
+        filters: string[];
+    };
+    custom: string;
+};
+export type TContentSourceGroup = {
+    groupId: string;
+    groupName: string;
+    filters: TFilters;
+    ranking: TRanking;
+    itemTypeId: number | null;
+    itemTypeName: string | null;
+    itemTypeDisplay: string | null;
+    fallback: string;
+    level?: string;
+    data?: Record<string, any>[];
+};
+export type TContentSourceSettings = {
+    groups: TContentSourceGroup[];
+    expanded: string[];
+    isLoadingDataBO: boolean;
+};
+export type DynamicContentProps = {
+    visible: boolean;
+    contentSources: TContentSourceSettings;
+    activeTagId: string;
+    defaultData: {
+        [tagId: string]: Record<string, any>;
+    };
+    journeySettings: {
+        unsubscribeSegmentType?: string | null;
+        triggerType?: string | null;
+        triggerEvent?: {
+            eventActionId: number | string;
+            eventCategoryId: number | string;
+            insightPropertyIds: any[];
+        };
+    };
+};

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

@@ -0,0 +1 @@
+export {};