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

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

@@ -0,0 +1,12 @@
+import type { PayloadInfo } from '@antscorp/antsomi-ui/es/types';
+export type TDisplayFormat = 'number' | 'percentage' | 'currency' | 'datetime';
+type DisplayFormatProps = {
+    onSettingsChange: (settings: any) => void;
+    formatSettings: any;
+    displayFormatType: TDisplayFormat;
+    dynamicContentType?: string;
+    infos: PayloadInfo;
+    url: string;
+};
+declare const DisplayFormat: (props: DisplayFormatProps) => JSX.Element | null;
+export default DisplayFormat;

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

@@ -0,0 +1,25 @@
+// Libraries
+import React from 'react';
+// Components
+import FormatDatetime from '../FormatDatetime/FormatDatetime';
+import FormatNumber from '../FormatNumber/FormatNumber';
+const DisplayFormat = (props) => {
+    const { infos, url } = props;
+    const renderFormatSetting = () => {
+        switch (props.displayFormatType) {
+            case 'number':
+            case 'percentage':
+            case 'currency': {
+                return (React.createElement(FormatNumber, Object.assign({}, props.formatSettings, { onSettingsChange: props.onSettingsChange, type: props.displayFormatType, url: url, infos: infos })));
+            }
+            case 'datetime': {
+                return (React.createElement(FormatDatetime, Object.assign({}, props.formatSettings, { onSettingsChange: props.onSettingsChange, type: props.displayFormatType, dynamicContentType: props.dynamicContentType })));
+            }
+            default: {
+                return null;
+            }
+        }
+    };
+    return renderFormatSetting();
+};
+export default DisplayFormat;

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

@@ -0,0 +1,3 @@
+import DisplayFormat from './DisplayFormat';
+export * from './DisplayFormat';
+export default DisplayFormat;

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

@@ -0,0 +1,3 @@
+import DisplayFormat from './DisplayFormat';
+export * from './DisplayFormat';
+export default DisplayFormat;

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

@@ -0,0 +1,19 @@
+import React from 'react';
+import dayjs from 'dayjs';
+export type TDatetimeFormatSetting = {
+    hasDateFormat: boolean;
+    hasTimeFormat: boolean;
+    dateParseFormat: 'DD/MM/YYYY' | 'MM/DD/YYYY' | 'YYYY/MM/DD';
+    timeParseFormat: '12hour' | '24hour' | string;
+    dateParseOption: 'short' | 'medium' | 'long' | undefined;
+    timeParseOption: 'short' | 'medium' | 'long' | undefined;
+    language?: string;
+    type?: 'datetime';
+};
+export type FormatDatetimeProps = {
+    onSettingsChange?: (settingValues: TDatetimeFormatSetting) => void;
+    dynamicContentType?: string;
+} & TDatetimeFormatSetting;
+export declare const dateExample: dayjs.Dayjs;
+declare const FormatDatetime: ({ hasDateFormat, hasTimeFormat, dateParseFormat, timeParseFormat, dateParseOption, timeParseOption, onSettingsChange, dynamicContentType, }: FormatDatetimeProps) => React.JSX.Element;
+export default FormatDatetime;

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

@@ -0,0 +1,100 @@
+/* eslint-disable react/no-unused-prop-types */
+// Libraries
+import React from 'react';
+import dayjs from 'dayjs';
+// 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
+import { RadioGroup } from '../../../RadioGroup';
+import { Select } from '../../../Select';
+// Utils
+import customParseFormat from 'dayjs/plugin/customParseFormat';
+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, language: portalLanguage } = i18nInstance;
+    const dfSettings = {
+        hasDateFormat,
+        hasTimeFormat,
+        dateParseFormat,
+        timeParseFormat,
+        dateParseOption,
+        timeParseOption,
+    };
+    const datetimeEx = dayjs(dateExample).locale(portalLanguage);
+    const timezone = Math.round(dayjs(dateExample).utcOffset() / 60);
+    const prefix = timezone > 0 ? '+' : '';
+    const gmtString = `GMT ${prefix}${timezone}`;
+    const handleChange = (updatedSettings) => {
+        if (onSettingsChange) {
+            onSettingsChange(Object.assign(Object.assign({}, updatedSettings), { type: 'datetime', language: portalLanguage }));
+        }
+    };
+    const labelHours = dynamicContentType !== 'custom' ? 'HH:MM:SS' : '';
+    return (React.createElement("div", null,
+        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, { style: { width: 190 }, disabled: !hasDateFormat, defaultValue: dateParseFormat, options: [
+                    {
+                        label: `MM/DD/YYYY ${labelHours}`,
+                        value: 'MM/DD/YYYY',
+                    },
+                    {
+                        label: `DD/MM/YYYY ${labelHours}`,
+                        value: 'DD/MM/YYYY',
+                    },
+                    {
+                        label: `YYYY/MM/DD ${labelHours}`,
+                        value: 'YYYY/MM/DD',
+                    },
+                ], onChange: value => handleChange(Object.assign(Object.assign({}, dfSettings), { dateParseFormat: value })) })),
+        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, style: { marginLeft: '20px' } },
+                    React.createElement(Radio, { value: "short" },
+                        t(translations.dynamicContent.modal.label.datimeDisplayFormat.short),
+                        ' - ',
+                        datetimeEx.format(transformDateFormat(dateParseFormat, 'short'))),
+                    React.createElement(Radio, { value: "medium" },
+                        t(translations.dynamicContent.modal.label.datimeDisplayFormat.medium),
+                        ' - ',
+                        datetimeEx.format(transformDateFormat(dateParseFormat, 'medium'))),
+                    React.createElement(Radio, { value: "long" },
+                        t(translations.dynamicContent.modal.label.datimeDisplayFormat.long),
+                        ' - ',
+                        datetimeEx.format(transformDateFormat(dateParseFormat, 'long')))))),
+        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, { style: { width: 190 }, disabled: !hasTimeFormat, defaultValue: timeParseFormat, options: [
+                    {
+                        label: 'AM/PM',
+                        value: '12hour',
+                    },
+                    {
+                        label: t(translations.dynamicContent.modal.label.datimeDisplayFormat.use24hour),
+                        value: '24hour',
+                    },
+                ], onChange: value => handleChange(Object.assign(Object.assign({}, dfSettings), { timeParseFormat: value })) })),
+        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, style: { marginLeft: '20px' } },
+                    React.createElement(Radio, { value: "short" },
+                        t(translations.dynamicContent.modal.label.datimeDisplayFormat.short),
+                        ' - ',
+                        datetimeEx.format(timeParseFormat === '12hour' ? 'h:mm A' : 'H:mm')),
+                    React.createElement(Radio, { value: "medium" },
+                        t(translations.dynamicContent.modal.label.datimeDisplayFormat.medium),
+                        ' - ',
+                        datetimeEx.format(timeParseFormat === '12hour' ? 'h:mm:ss A' : 'H:mm:ss')),
+                    React.createElement(Radio, { value: "long" },
+                        t(translations.dynamicContent.modal.label.datimeDisplayFormat.long),
+                        ' - ',
+                        datetimeEx.format(timeParseFormat === '12hour'
+                            ? `h:mm:ss A [${gmtString}]`
+                            : `H:mm:ss [${gmtString}]`)))))));
+};
+export default FormatDatetime;

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

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

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

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

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

@@ -0,0 +1,52 @@
+import React from 'react';
+import { TDisplayFormat } from '../DisplayFormat';
+import { PayloadInfo } from '@antscorp/antsomi-ui/es/types';
+declare const groupingOptions: {
+    readonly COMMA: {
+        readonly index: 0;
+        readonly label: ",";
+        readonly value: ",";
+    };
+    readonly DOT: {
+        readonly index: 1;
+        readonly label: ".";
+        readonly value: ".";
+    };
+    readonly NONE: {
+        readonly index: 2;
+        readonly label: "none";
+        readonly value: "none";
+    };
+};
+declare const decimalOptions: {
+    readonly COMMA: {
+        readonly index: 0;
+        readonly label: ",";
+        readonly value: ",";
+    };
+    readonly DOT: {
+        readonly index: 1;
+        readonly label: ".";
+        readonly value: ".";
+    };
+};
+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;
+    decimal: TDecimalSeparator;
+    isCompact: boolean;
+    currencyCode: string;
+    prefixType: 'symbol' | 'code';
+    type?: TDisplayFormat;
+};
+type FormatNumberProps = {
+    onSettingsChange?: (settingValues: TNumberFormatSettings) => void;
+    type: TDisplayFormat;
+} & TNumberFormatSettings & {
+    infos: PayloadInfo;
+    url: string;
+};
+declare const FormatNumber: (props: FormatNumberProps) => React.JSX.Element;
+export default FormatNumber;

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

@@ -0,0 +1,132 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+// Libraries
+import React, { useEffect, useMemo, useState } from 'react';
+// Components
+import { Radio } from '@antscorp/antsomi-ui/es/components/atoms';
+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
+import { ATTRIBUTE_NUMBERIC_FORMAT_OPTION } from '../../constants';
+// Services
+import { getCurrencyList } from '@antscorp/antsomi-ui/es/services/MediaTemplateDesign/ListCurrency';
+// Locales
+import { translations } from '@antscorp/antsomi-ui/es/locales/translations';
+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, language } = i18nInstance;
+    const { onSettingsChange, type: displayType, infos, url } = props;
+    const { currencyCode, decimalPlaces, grouping, decimal, prefixType, isCompact } = props;
+    const settingValues = {
+        decimalPlaces,
+        grouping,
+        decimal,
+        isCompact,
+        currencyCode,
+        prefixType,
+    };
+    const [listCurrencyOptions, setListCurrencyOptions] = useState([]);
+    const [isLoadingCurrencyOptions, setIsLoadingCurrencyOptions] = useState(true);
+    const onChangeSettingsHandle = (settingValues) => {
+        if (onSettingsChange) {
+            onSettingsChange(Object.assign(Object.assign({}, settingValues), { type: displayType }));
+        }
+    };
+    useEffect(() => {
+        (() => __awaiter(void 0, void 0, void 0, function* () {
+            // Regex for getting text between the last brackets (with brakets) of line
+            const regex = /\(([^)]*)\)[^(]*$/;
+            if (listCurrencyOptions.length) {
+                setListCurrencyOptions(prevOptions => prevOptions.map(currencyOption => {
+                    var _a;
+                    // setLabel: Dollal Mỹ (USD) or Dollal Mỹ ($)
+                    currencyOption.label =
+                        prefixType === 'symbol'
+                            ? currencyOption.label.replace(regex, `(${(_a = Currencies[currencyOption.value]) === null || _a === void 0 ? void 0 : _a.symbol})`)
+                            : currencyOption.label.replace(regex, `(${currencyOption.value})`);
+                    return currencyOption;
+                }));
+            }
+            else {
+                setIsLoadingCurrencyOptions(true);
+                try {
+                    const data = yield getCurrencyList({ lang: language, url }, infos);
+                    const currencies = data.reduce((accumulate, currency) => {
+                        var _a;
+                        if (Currencies[currency.code]) {
+                            accumulate.push({
+                                value: currency.code,
+                                // setLabel: Dollal Mỹ (USD) or Dollal Mỹ ($)
+                                label: prefixType === 'symbol'
+                                    ? `${currency.name.replace(regex, '')} (${(_a = Currencies[currency.code]) === null || _a === void 0 ? void 0 : _a.symbol})`
+                                    : `${currency.name.replace(regex, '')} (${currency.code})`,
+                            });
+                        }
+                        else {
+                            // console.log('library not found ', currency.code + ' - ' + currency.name);
+                        }
+                        return accumulate;
+                    }, []);
+                    setListCurrencyOptions(currencies);
+                }
+                catch (err) {
+                    setListCurrencyOptions([]);
+                }
+                finally {
+                    setIsLoadingCurrencyOptions(false);
+                }
+            }
+        }))();
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [prefixType]);
+    const listGroupingSeparatorOptions = useMemo(() => Object.values(groupingOptions)
+        .sort((a, b) => a.index - b.index)
+        .map(grouping => (Object.assign(Object.assign({}, grouping), (grouping.value === decimal && { disabled: true })))), [decimal]);
+    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, { 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, { 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})`, 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), style: { marginLeft: 4, opacity: 0.4 } },
+                            React.createElement(FontAwesomeIcon, { icon: ['fas', 'info-circle'] }))), colon: false },
+                    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), style: { marginLeft: 4, opacity: 0.4 } },
+                            React.createElement(FontAwesomeIcon, { icon: ['fas', 'info-circle'] }))), colon: false },
+                    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/components/FormatNumber/index.d.ts

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

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

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

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

@@ -0,0 +1,3 @@
+export * from './FormatNumber';
+export * from './DisplayFormat';
+export * from './FormatDatetime';

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

@@ -0,0 +1,3 @@
+export * from './FormatNumber';
+export * from './DisplayFormat';
+export * from './FormatDatetime';

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

@@ -0,0 +1,101 @@
+import { TDataType } from './types';
+export declare const DYNAMIC_CONTENT_SETTING_KEY: {
+    EVENT: string;
+    INDEX: string;
+    ATTRIBUTE: string;
+    DYNAMIC_CONTENT_NUMBERIC_ATTR_FORMAT_SETTINGS: string;
+    DYNAMIC_CONTENT_DATETIME_ATTR_FORMAT_SETTINGS: string;
+    DISPLAY_FORMAT_TYPE: string;
+    DYNAMIC_CONTENT_TYPE: string;
+    PROMOTION_POOL: string;
+    SOURCE: string;
+    FUNCTION: string;
+    PERNAME: string;
+    SAVE_AS_TEMPLATE: string;
+    DATA_TYPE: string;
+};
+export declare const DYNAMIC_CONTENT_TYPE_KEY: {
+    readonly BO_SETTINGS: "bo-settings";
+    readonly CUSTOMER_ATTRIBUTE: "customer-attribute";
+    readonly EVENT_ATTRIBUTE: "event-attribute";
+    readonly PROMOTION_CODE: "promotion-code";
+    readonly VISITOR_ATTRIBUTE: "visitor-attribute";
+    readonly CUSTOM_FUNCTION: "custom";
+};
+export declare const DYNAMIC_CONTENT_TYPE: {
+    [key: string]: {
+        index: number;
+        label: string;
+        value: string;
+    };
+};
+export declare const DYNAMIC_CONTENT_ATTR_DF_TYPE: {
+    label: string;
+    value: string;
+    dataType: TDataType;
+}[];
+export declare const DATA_TYPE: {
+    [key: string]: {
+        index: number;
+        label: string;
+        value: string;
+    };
+};
+export declare const ATTRIBUTE_STATUS: {
+    4: {
+        value: number;
+        label: string;
+        errorMessage: string;
+    };
+    DELETE: {
+        value: number;
+        label: string;
+        errorMessage: string;
+    };
+};
+export declare const ATTRIBUTE_TYPE: {
+    ITEM: number;
+};
+export declare const BO_STATUS: {
+    4: {
+        value: number;
+        label: string;
+        errorMessage: string;
+    };
+    DELETE: {
+        value: number;
+        label: string;
+        errorMessage: string;
+    };
+};
+export declare const ATTRIBUTE_NUMBERIC_FORMAT_OPTION: {
+    readonly DECIMAL_SEPARATOR: {
+        readonly COMMA: {
+            readonly index: 0;
+            readonly label: ",";
+            readonly value: ",";
+        };
+        readonly DOT: {
+            readonly index: 1;
+            readonly label: ".";
+            readonly value: ".";
+        };
+    };
+    readonly GROUPING_SEPARATOR: {
+        readonly COMMA: {
+            readonly index: 0;
+            readonly label: ",";
+            readonly value: ",";
+        };
+        readonly DOT: {
+            readonly index: 1;
+            readonly label: ".";
+            readonly value: ".";
+        };
+        readonly NONE: {
+            readonly index: 2;
+            readonly label: "none";
+            readonly value: "none";
+        };
+    };
+};

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

@@ -0,0 +1,152 @@
+export const DYNAMIC_CONTENT_SETTING_KEY = {
+    EVENT: 'event',
+    INDEX: 'index',
+    ATTRIBUTE: 'attribute',
+    DYNAMIC_CONTENT_NUMBERIC_ATTR_FORMAT_SETTINGS: 'numberFormatSettings',
+    DYNAMIC_CONTENT_DATETIME_ATTR_FORMAT_SETTINGS: 'datetimeFormatSettings',
+    DISPLAY_FORMAT_TYPE: 'dfType',
+    DYNAMIC_CONTENT_TYPE: 'type',
+    PROMOTION_POOL: 'pool',
+    SOURCE: 'source',
+    FUNCTION: 'customFunction',
+    PERNAME: 'templateName',
+    SAVE_AS_TEMPLATE: 'saveAsTemplate',
+    DATA_TYPE: 'dataType',
+};
+export const DYNAMIC_CONTENT_TYPE_KEY = {
+    BO_SETTINGS: 'bo-settings',
+    CUSTOMER_ATTRIBUTE: 'customer-attribute',
+    EVENT_ATTRIBUTE: 'event-attribute',
+    PROMOTION_CODE: 'promotion-code',
+    VISITOR_ATTRIBUTE: 'visitor-attribute',
+    CUSTOM_FUNCTION: 'custom',
+};
+export const DYNAMIC_CONTENT_TYPE = {
+    BO_SETTINGS: {
+        index: 4,
+        label: '',
+        value: DYNAMIC_CONTENT_TYPE_KEY.BO_SETTINGS,
+    },
+    CUSTOMER_ATTRIBUTE: {
+        index: 1,
+        label: 'Customer Attribute',
+        value: DYNAMIC_CONTENT_TYPE_KEY.CUSTOMER_ATTRIBUTE,
+    },
+    EVENT_ATTRIBUTE: {
+        index: 2,
+        label: 'Event Attribute',
+        value: DYNAMIC_CONTENT_TYPE_KEY.EVENT_ATTRIBUTE,
+    },
+    PROMOTION_CODE: {
+        index: 3,
+        label: 'Promotion Code',
+        value: DYNAMIC_CONTENT_TYPE_KEY.PROMOTION_CODE,
+    },
+    VISITOR_ATTRIBUTE: {
+        index: 0,
+        label: 'Visitor Attribute',
+        value: DYNAMIC_CONTENT_TYPE_KEY.VISITOR_ATTRIBUTE,
+    },
+};
+export const DYNAMIC_CONTENT_ATTR_DF_TYPE = [
+    {
+        label: 'Number',
+        value: 'number',
+        dataType: 'number',
+    },
+    {
+        label: 'Percentage',
+        value: 'percentage',
+        dataType: 'number',
+    },
+    {
+        label: 'Currency',
+        value: 'currency',
+        dataType: 'number',
+    },
+    {
+        label: 'Datetime',
+        value: 'datetime',
+        dataType: 'datetime',
+    },
+    {
+        label: 'Raw string',
+        value: 'raw_string',
+        dataType: 'string',
+    },
+];
+export const DATA_TYPE = {
+    NUMBER: {
+        index: 0,
+        label: 'Number',
+        value: 'number',
+    },
+    DATE_TIME: {
+        index: 1,
+        label: 'Datetime',
+        value: 'datetime',
+    },
+    STRING: {
+        index: 2,
+        label: 'String',
+        value: 'string',
+    },
+};
+export const ATTRIBUTE_STATUS = {
+    4: {
+        value: 4,
+        label: 'Archive',
+        errorMessage: 'This attribute is not available',
+    },
+    DELETE: {
+        value: 3,
+        label: 'Delete',
+        errorMessage: 'This attribute does not exist',
+    },
+};
+export const ATTRIBUTE_TYPE = {
+    ITEM: 2,
+};
+export const BO_STATUS = {
+    4: {
+        value: 4,
+        label: 'Archive',
+        errorMessage: 'This BO is archive',
+    },
+    DELETE: {
+        value: 3,
+        label: 'Delete',
+        errorMessage: 'This BO does not exist',
+    },
+};
+export const ATTRIBUTE_NUMBERIC_FORMAT_OPTION = {
+    DECIMAL_SEPARATOR: {
+        COMMA: {
+            index: 0,
+            label: ',',
+            value: ',',
+        },
+        DOT: {
+            index: 1,
+            label: '.',
+            value: '.',
+        },
+    },
+    GROUPING_SEPARATOR: {
+        COMMA: {
+            index: 0,
+            label: ',',
+            value: ',',
+        },
+        DOT: {
+            index: 1,
+            label: '.',
+            value: '.',
+        },
+        NONE: {
+            index: 2,
+            label: 'none',
+            value: 'none',
+        },
+    },
+};