@antscorp/antsomi-ui 1.3.5-beta.972 → 1.3.5-beta.975

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

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import type { PayloadInfo } from '@antscorp/antsomi-ui/es/types';
 export type TDisplayFormat = 'number' | 'percentage' | 'currency' | 'datetime';
 type DisplayFormatProps = {

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

@@ -5,7 +5,7 @@ import { translate, translations } from '@antscorp/antsomi-locales';
 // Components
 import { FormatDatetime, FormatNumber, } from './components';
 import { EditIcon } from '../../icons';
-import { Button, Text } from '../../atoms';
+import { Button, Typography } from '../../atoms';
 // Utils
 import { formatDatetimeDF, formatNumberDF } from './utils';
 // Constants
@@ -43,14 +43,40 @@ export const DisplayFormatSettings = props => {
         if (displayFormatType === 'datetime') {
             formatDFValue = formatDatetimeDF(DATE_TIME_EXAMPLE, settings);
         }
-        return (_jsxs("div", { className: "ants-flex ants-flex-wrap ants-items-center ants-mt-1 ants-gap-2 ant-flex-row", style: { display: 'flex', alignItems: 'end', gap: '8px', marginBottom: '5px' }, ...rest, children: [_jsx(Text, { size: 11, className: "ants-flex", color: "#7F7F7F", dangerouslySetInnerHTML: {
-                        __html: `${translate(translations._ACT_PREVIEW)}: &nbsp;<bdo dir='ltr'>${formatDFValue}</bdo>`,
-                    } }), _jsx(Button, { disabled: disabled, size: "small", icon: _jsx(EditIcon, { width: 16, height: 16, color: "#005EB8" }), className: "ants-border-none", style: {
-                        marginTop: '1px',
+        return (_jsxs("div", { className: "ants-flex ants-items-center ants-gap-2 ant-flex-row", style: {
+                display: 'flex',
+                alignItems: 'center',
+                gap: '8px',
+                marginBottom: '5px',
+                flexShrink: 0,
+                width: '100%',
+                flexWrap: 'nowrap',
+                overflow: 'hidden',
+                marginTop: '5px',
+            }, ...rest, children: [_jsxs(Typography.Text
+                // size={11}
+                , { 
+                    // size={11}
+                    className: "ants-flex", style: {
+                        color: '#7F7F7F',
+                        fontSize: '11px',
+                        whiteSpace: 'nowrap',
+                        maxWidth: 'calc(89%)',
+                    }, children: [translate(translations._ACT_PREVIEW), ": \u00A0", _jsx(Typography.Text, { style: {
+                                color: '#7F7F7F',
+                                fontSize: '11px',
+                                whiteSpace: 'nowrap',
+                                maxWidth: 'calc(81%)',
+                            }, ellipsis: { tooltip: true }, children: _jsx("bdo", { dir: "ltr", children: formatDFValue }) })] }), _jsx(Button, { disabled: disabled, size: "small", icon: _jsx(EditIcon, { width: 16, height: 16, color: "#005EB8" }), className: "ants-border-none", 
+                    // className={`ants-border-none transition-colors duration-300 rounded-md ${
+                    //   showDetailEdit ? 'bg-[#DEEFFE]' : 'hover:bg-[#E0F2FE]'
+                    // }`}
+                    style: {
                         backgroundColor: showDetailEdit ? '#DEEFFE' : 'transparent',
                         border: 'none',
                         boxShadow: 'none',
                         borderRadius: '5px',
+                        flexShrink: 0,
                     }, onClick: () => setShowDetailEdit(prevShow => !prevShow) })] }));
     };
     const renderFormatSetting = () => {

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

@@ -112,18 +112,16 @@ export const FormatNumber = (props) => {
                             ...settingValues,
                             isCompact: checked,
                         });
-                    }, children: t(translations.dynamicContent.modal.label.formNumberDisplayFormat.compact) }) }), _jsx(Form.Item, { label: decimalPlacesLabel, style: { marginBottom: 12 }, colon: false, labelCol: { span: 10 }, wrapperCol: { span: 14 }, children: _jsxs("div", { style: { display: 'flex', marginLeft: '55px', gap: '15px' }, children: [_jsx(Button, { style: { border: 'none', boxShadow: 'none', borderRadius: '5px' }, disabled: decimalPlaces <= 0, onClick: () => onChangeSettingsHandle({
+                    }, children: translate(translations._TITL_EDIT_NUMBER_COMPACT) }) }), _jsx(Form.Item, { label: decimalPlacesLabel, style: { marginBottom: 12 }, colon: false, labelCol: { span: 11 }, wrapperCol: { span: 13 }, children: _jsxs("div", { style: { display: 'flex', marginLeft: '55px', gap: '15px' }, children: [_jsx(Button, { style: { border: 'none', boxShadow: 'none', borderRadius: '5px' }, disabled: decimalPlaces <= 0, onClick: () => onChangeSettingsHandle({
                                 ...settingValues,
                                 decimalPlaces: decimalPlaces - 1,
                             }), size: "small", icon: _jsx(DecreaseDecimalIcon, { color: "#005EB8", style: { padding: '2px' } }) }), _jsx(Button, { style: { border: 'none', boxShadow: 'none', borderRadius: '5px' }, onClick: () => onChangeSettingsHandle({
                                 ...settingValues,
                                 decimalPlaces: decimalPlaces + 1,
-                            }), size: "small", icon: _jsx(IncreaseDecimalIcon, { color: "#005EB8", style: { padding: '2px' } }) })] }) }), _jsx(Form.Item, { label: _jsxs(_Fragment, { children: [_jsx("span", { style: { marginRight: '6px' }, children: translate(translations._DISPLAY_GROUPING) }), _jsx(Tooltip, { placement: "top", title: t(translations.dynamicContent.modal.label.formNumberDisplayFormat
-                                .groupingIconTooltipTitle), style: { marginLeft: 4, opacity: 0.4 }, children: _jsx(ViewDetailsInformationIcon, { size: 14 }) })] }), colon: false, labelCol: { span: 10 }, wrapperCol: { span: 14 }, children: _jsx(Select, { style: { width: 100 }, value: grouping, onChange: value => onChangeSettingsHandle({
+                            }), size: "small", icon: _jsx(IncreaseDecimalIcon, { color: "#005EB8", style: { padding: '2px' } }) })] }) }), _jsx(Form.Item, { label: _jsxs(_Fragment, { children: [_jsx("span", { style: { marginRight: '6px' }, children: translate(translations._DISPLAY_GROUPING) }), _jsx(Tooltip, { placement: "top", title: translate(translations._TOOLTIP__DISPLAY_DECIMAL), style: { marginLeft: 4, opacity: 0.4 }, children: _jsx(ViewDetailsInformationIcon, { size: 14 }) })] }), colon: false, labelCol: { span: 10 }, wrapperCol: { span: 14 }, children: _jsx(Select, { style: { width: 100 }, value: grouping, onChange: value => onChangeSettingsHandle({
                         ...settingValues,
                         grouping: value,
-                    }), options: listGroupingSeparatorOptions }) }), _jsx(Form.Item, { label: _jsxs(_Fragment, { children: [_jsx("span", { style: { marginRight: '6px' }, children: translate(translations._DISPLAY_DECIMAL) }), _jsx(Tooltip, { placement: "top", title: t(translations.dynamicContent.modal.label.formNumberDisplayFormat
-                                .decimalIconTooltipTitle), style: { marginLeft: 4, opacity: 0.4 }, children: _jsx(ViewDetailsInformationIcon, { size: 14 }) })] }), labelCol: { span: 10 }, wrapperCol: { span: 14 }, colon: false, children: _jsx(Select, { style: { width: 100 }, value: decimal, onChange: value => onChangeSettingsHandle({
+                    }), options: listGroupingSeparatorOptions }) }), _jsx(Form.Item, { label: _jsxs(_Fragment, { children: [_jsx("span", { style: { marginRight: '6px' }, children: translate(translations._DISPLAY_DECIMAL) }), _jsx(Tooltip, { placement: "top", title: translate(translations._TOOLTIP__DISPLAY_GROUPING), style: { marginLeft: 4, opacity: 0.4 }, children: _jsx(ViewDetailsInformationIcon, { size: 14 }) })] }), labelCol: { span: 10 }, wrapperCol: { span: 14 }, colon: false, children: _jsx(Select, { style: { width: 100 }, value: decimal, onChange: value => onChangeSettingsHandle({
                         ...settingValues,
                         decimal: value,
                     }), options: listDecimalSeparatorOptions }) })] }));

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

@@ -149,3 +149,24 @@ export declare const DYNAMIC_CONTENT_DF_FORMAT_TYPE: {
     number: string;
     datetime: string;
 };
+export declare const TYPE_FORMAT_OPTIONS: {
+    SHORT: string;
+    MEDIUM: string;
+    LONG: string;
+};
+export declare const DATE_FORMAT_LIST_TEST: {
+    [x: string]: {
+        [x: string]: {
+            label: string;
+            value: string;
+        };
+    };
+};
+export declare const TIME_FORMAT_LIST_TEST: {
+    [x: string]: {
+        [x: string]: {
+            label: string;
+            value: string;
+        };
+    };
+};

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

@@ -239,3 +239,68 @@ export const DYNAMIC_CONTENT_DF_FORMAT_TYPE = {
     number: 'number',
     datetime: 'datetime',
 };
+export const TYPE_FORMAT_OPTIONS = {
+    SHORT: 'short',
+    MEDIUM: 'medium',
+    LONG: 'long',
+};
+export const DATE_FORMAT_LIST_TEST = {
+    [DATE_FORMAT_OPTIONS[0].value]: {
+        [TYPE_FORMAT_OPTIONS.SHORT]: {
+            label: translate(translations._DATE_SHORT_FORMAT1),
+            value: 'MM/DD/YYYY',
+        },
+        [TYPE_FORMAT_OPTIONS.MEDIUM]: {
+            label: translate(translations._DATE_MEDIUM_FORMAT1),
+            value: 'MMM DD, YYYY',
+        },
+        [TYPE_FORMAT_OPTIONS.LONG]: {
+            label: translate(translations._DATE_LONG_FORMAT1),
+            value: 'MMMM DD, YYYY',
+        },
+    },
+    [DATE_FORMAT_OPTIONS[1].value]: {
+        [TYPE_FORMAT_OPTIONS.SHORT]: {
+            label: translate(translations._DATE_SHORT_FORMAT2),
+            value: 'DD/MM/YYYY',
+        },
+        [TYPE_FORMAT_OPTIONS.MEDIUM]: {
+            label: translate(translations._DATE_MEDIUM_FORMAT2),
+            value: 'DD MMM, YYYY',
+        },
+        [TYPE_FORMAT_OPTIONS.LONG]: {
+            label: translate(translations._DATE_LONG_FORMAT2),
+            value: 'DD MMMM, YYYY',
+        },
+    },
+};
+export const TIME_FORMAT_LIST_TEST = {
+    [TIME_FORMAT_OPTIONS[0].value]: {
+        [TYPE_FORMAT_OPTIONS.SHORT]: {
+            label: translate(translations._TIME_SHORT_FOTMAT1),
+            value: 'h:mm A',
+        },
+        [TYPE_FORMAT_OPTIONS.MEDIUM]: {
+            label: translate(translations._TIME_MEDIUM_FORMAT1),
+            value: 'h:mm:ss A',
+        },
+        [TYPE_FORMAT_OPTIONS.LONG]: {
+            label: translate(translations._TIME_LONG_FORMAT1),
+            value: 'h:mm:ss A [GMT]',
+        },
+    },
+    [TIME_FORMAT_OPTIONS[1].value]: {
+        [TYPE_FORMAT_OPTIONS.SHORT]: {
+            label: translate(translations._TIME_SHORT_FOTMAT2),
+            value: 'H:mm',
+        },
+        [TYPE_FORMAT_OPTIONS.MEDIUM]: {
+            label: translate(translations._TIME_MEDIUM_FORMAT2),
+            value: 'H:mm:ss',
+        },
+        [TYPE_FORMAT_OPTIONS.LONG]: {
+            label: translate(translations._TIME_LONG_FORMAT2),
+            value: 'H:mm:ss [GMT]',
+        },
+    },
+};

package/es/components/molecules/TagifyInput/patternHandlers.js

@@ -1,7 +1,7 @@
 /* eslint-disable no-cond-assign */
 /* eslint-disable no-console */
 // Libraries
-import { has } from 'lodash';
+import { get, has } from 'lodash';
 import { translate, translations } from '@antscorp/antsomi-locales';
 // Utils
 import { errorWrapper } from './errorWrapper';
@@ -261,7 +261,7 @@ export const getPersonalizeTagInfo = (originalTag, mapAttributes, mapErrorAttrib
             true,
             false,
         ];
-        if (!has(mapAttributes, type) && !has(tagProperties, combineAttribute) && !isCsGroup) {
+        if (!has(mapAttributes, type) && !has(tagProperties, attributeName) && !isCsGroup) {
             // return fallback if no mapping
             return {
                 type,
@@ -279,55 +279,49 @@ export const getPersonalizeTagInfo = (originalTag, mapAttributes, mapErrorAttrib
         const label = isCsGroup
             ? getContentSourceLabel(attributeName, subAttributeName, mapAttributes)
             : getLabelAttribute(type, attributeName, subAttributeName, mapAttributes);
-        switch (type) {
+        const tagType = type === CUSTOM_TAG ? get(tagProperties, [attributeName, 'type']) : type;
+        switch (tagType) {
             case PROMOTION_CODE: {
-                // Check if the code is exist in the map
-                const isExistPromotionPool = has(mapAttributes, [type, attributeName]) || has(tagProperties, attributeName);
-                if (!isExistPromotionPool) {
+                if (has(mapErrorAttributes, [tagType, attributeName])) {
                     isValid = false;
                     message = 'This pool does not exist anymore';
-                    if (has(mapErrorAttributes, [type, attributeName])) {
-                        const { 
-                        // isEdit = false,
-                        isView = false, isExist = true, isArchived: _isArchived = false, isActive: _isActive = true, isExpired: _isExpired = false, } = mapErrorAttributes?.[type]?.[attributeName] || {};
-                        if (!isExist) {
-                            // Case Pool Removed
-                            isRemoved = !isExist;
-                            message = translate(translations._PERSONALIZATION_TAG_ERR_REMOVED, 'This pool is removed');
-                        }
-                        else if (_isArchived) {
-                            // Case Pool is Archived
-                            isArchived = true;
-                            message = translate(translations._PERSONALIZATION_TAG_ERR_ATT_ARCHIVE, 'This attribute has been archived');
-                        }
-                        else if (!_isActive) {
-                            // Case Pool is Inactive
-                            isActive = false;
-                            message = translate(translations._PERSONALIZATION_TAG_ERR_POOL_DEACTIVATE, 'This pool has been deactivated. You have to turn it on to use');
-                        }
-                        else if (_isExpired) {
-                            // Case Pool is Expired
-                            isExpired = true;
-                            message = translate(translations._PERSONALIZATION_TAG_ERR_POOL_EXPIRE, 'This pool has expired, new codes could not be allocated');
-                        }
-                        else if (!isView) {
-                            // Case Pool Can't View
-                            canView = isView;
-                            message = translate(translations._PERMISSION_ERR_POOL, 'You do not have permission on this pool');
-                        }
+                    const { 
+                    // isEdit = false,
+                    isView = false, isExist = true, isArchived: _isArchived = false, isActive: _isActive = true, isExpired: _isExpired = false, } = mapErrorAttributes?.[tagType]?.[attributeName] || {};
+                    if (!isExist) {
+                        // Case Pool Removed
+                        isRemoved = !isExist;
+                        message = translate(translations._PERSONALIZATION_TAG_ERR_REMOVED, 'This pool is removed');
+                    }
+                    else if (_isArchived) {
+                        // Case Pool is Archived
+                        isArchived = true;
+                        message = translate(translations._PERSONALIZATION_TAG_ERR_ATT_ARCHIVE, 'This attribute has been archived');
+                    }
+                    else if (!_isActive) {
+                        // Case Pool is Inactive
+                        isActive = false;
+                        message = translate(translations._PERSONALIZATION_TAG_ERR_POOL_DEACTIVATE, 'This pool has been deactivated. You have to turn it on to use');
+                    }
+                    else if (_isExpired) {
+                        // Case Pool is Expired
+                        isExpired = true;
+                        message = translate(translations._PERSONALIZATION_TAG_ERR_POOL_EXPIRE, 'This pool has expired, new codes could not be allocated');
+                    }
+                    else if (!isView) {
+                        // Case Pool Can't View
+                        canView = isView;
+                        message = translate(translations._PERMISSION_ERR_POOL, 'You do not have permission on this pool');
                     }
                 }
+                // }
                 break;
             }
             default: {
-                if (combineAttribute &&
-                    (!has(mapAttributes, [type, combineAttribute]) ||
-                        !has(tagProperties, [type, combineAttribute]))) {
+                if (has(mapErrorAttributes, [tagType, combineAttribute])) {
                     isValid = false;
                     message = 'This attribute does not exist anymore';
-                }
-                if (has(mapErrorAttributes, [type, combineAttribute])) {
-                    const { isArchived: _isArchived = false, isActive: _isActive = true, isExpired: _isExpired = false, } = mapErrorAttributes?.[type]?.[combineAttribute] || {};
+                    const { isArchived: _isArchived = false, isActive: _isActive = true, isExpired: _isExpired = false, } = mapErrorAttributes?.[tagType]?.[combineAttribute] || {};
                     if (_isArchived) {
                         // Case Tag is Archived
                         isArchived = true;

package/es/components/template/TemplateListing/Loadable.d.ts

@@ -3,4 +3,5 @@
  * Asynchronously loads the component for TemplateListing
  *
  */
+/// <reference types="react" />
 export declare const TemplateListing: (props: import("./types").TemplateListingProps<{}>) => JSX.Element;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@antscorp/antsomi-ui",
-  "version": "1.3.5-beta.972",
+  "version": "1.3.5-beta.975",
   "description": "An enterprise-class UI design language and React UI library.",
   "sideEffects": [
     "dist/*",
@@ -61,7 +61,7 @@
     "not op_mini all"
   ],
   "dependencies": {
-    "@antscorp/antsomi-locales": "1.0.32",
+    "@antscorp/antsomi-locales": "1.0.34",
     "@ant-design/cssinjs": "^1.6.2",
     "@antscorp/icons": "0.27.54",
     "@antscorp/image-editor": "1.0.2",