@antscorp/antsomi-ui 1.3.5-beta.783 → 1.3.5-beta.785

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

@@ -21,8 +21,7 @@ import { acceptablePatternChecking, getCachedRegex, getPersonalizeTagInfo, patte
 import { EMOJI, PERSONALIZE_PTN, SHORT_LINK, defaultCssVariables, tagifyDefaultProps, } from './constants';
 const TagifyInput = forwardRef((props, ref) => {
     // Props
-    const { initialValue, readonly, disabled, maxLength, placeholder, acceptableTagPattern, mapAttributes, maxPersonalizeTags, name, children, cssTagifyVariables, onTagClick, onChange, } = props;
-    console.count('------------ re-render ------------');
+    const { initialValue, status, readonly, disabled, maxLength, placeholder, acceptableTagPattern, mapAttributes, maxPersonalizeTags, name, children, cssTagifyVariables, onTagClick, onChange, } = props;
     // States
     const [inputTypeDebounce, , setInputTyping] = useDebounce(initialValue, 450);
     // Refs
@@ -86,10 +85,23 @@ const TagifyInput = forwardRef((props, ref) => {
                 // Check readonly
                 if (readonly)
                     return;
+                const currentTagData = tagifyRef.current.getSetTagData(currentTagEle);
+                const currentTagValue = currentTagData?.value;
+                const newTagValue = newTag.value;
+                const spaceEle = tagifyRef.current.insertAfterTag(currentTagEle, '\u00A0'); //  <- adds space after the tag to keep valid caret positioning
                 tagifyRef.current.replaceTag(currentTagEle, newTag);
+                // Only update data if value is changed
+                if (currentTagValue !== newTagValue) {
+                    // Change data out
+                    const inputValue = tagifyRef.current.getInputValue();
+                    const convertedValue = convertInputStringToOriginal(inputValue);
+                    onChange(convertedValue);
+                }
+                tagifyRef.current.placeCaretAfterNode(spaceEle); // <- restore the caret after the edited tag
             }
         },
     }), [onChange]);
+    console.log('tagifyRef', tagifyRef);
     const onTagItemClick = useCallback((event) => {
         if (event.detail && onTagClick) {
             const { tagify } = event.detail;
@@ -291,7 +303,7 @@ const TagifyInput = forwardRef((props, ref) => {
             }
         };
     }, []);
-    return (_jsxs(TagifyWrapper, { ref: tagifyWrapperRef, "$cssTagifyVariables": cssVariablesMemoized, className: "tagify-container", id: "tagify-container", "data-test": "tagify-wrapper", children: [_jsx(TagTextArea, { id: "tagify-textarea", ref: inputRef, name: name, defaultValue: parsedDefaultValue, "data-test": "tagify-input" }), _jsx(WrapperPlaceHolder, { ref: placeHolderRef, "$isShow": !!children, children: children })] }));
+    return (_jsxs(TagifyWrapper, { ref: tagifyWrapperRef, "$cssTagifyVariables": cssVariablesMemoized, className: "tagify-container", id: "tagify-container", "data-test": "tagify-wrapper", "$status": status, children: [_jsx(TagTextArea, { id: "tagify-textarea", ref: inputRef, name: name, defaultValue: parsedDefaultValue, "data-test": "tagify-input" }), _jsx(WrapperPlaceHolder, { ref: placeHolderRef, "$isShow": !!children, children: children })] }));
 });
 TagifyInput.defaultProps = tagifyDefaultProps;
 export default memo(TagifyInput);

package/es/components/molecules/TagifyInput/hooks/useSettingsTagify.js

@@ -1,12 +1,13 @@
 /* eslint-disable react-hooks/exhaustive-deps */
 // Libraries
-import { useLayoutEffect } from 'react';
+import { useEffect, useLayoutEffect } from 'react';
 export const useSettingsTagify = (tagifyInstance, settings) => {
     const { readonly, disabled, placeholder, maxPersonalizeTags } = settings;
     // Set read only
-    useLayoutEffect(() => {
+    useEffect(() => {
         if (tagifyInstance && typeof readonly !== 'undefined') {
             tagifyInstance.setReadonly(readonly);
+            console.log('newReadonly', readonly, tagifyInstance);
         }
     }, [readonly]);
     // Set disabled

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

@@ -1,9 +1,10 @@
-import type { TagifyInputProps } from './types';
+import type { StatusType, TagifyInputProps } from './types';
 export declare const WrapperPlaceHolder: import("styled-components").StyledComponent<"div", any, {
     $isShow?: boolean | undefined;
 }, never>;
 export declare const TagifyWrapper: import("styled-components").StyledComponent<"div", any, {
     $cssTagifyVariables?: TagifyInputProps['cssTagifyVariables'];
+    $status?: StatusType | undefined;
 }, never>;
 export declare const TagInput: import("styled-components").StyledComponent<"input", any, {}, never>;
 export declare const TagTextArea: import("styled-components").StyledComponent<"textarea", any, {}, never>;

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

@@ -4,7 +4,7 @@ import styled, { css } from 'styled-components';
 import { globalToken } from '@antscorp/antsomi-ui/es/constants';
 import { MIN_H_WRAPPER, TAG_H } from './constants';
 // Utils
-import { getStyledTags } from './utils';
+import { getBackgroundInputStatus, getStyledTags } from './utils';
 export const WrapperPlaceHolder = styled.div `
   ${({ $isShow }) => $isShow
     ? css `
@@ -17,7 +17,7 @@ export const WrapperPlaceHolder = styled.div `
 `;
 export const TagifyWrapper = styled.div `
   background: ${globalToken?.bw0};
-  border-bottom: 1px solid ${globalToken?.blue1 || '#B8CFE6'};
+  border-bottom: 1px solid ${({ $status }) => getBackgroundInputStatus($status)};
   min-height: ${MIN_H_WRAPPER}px;
   width: 100%;
 

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

@@ -3,6 +3,7 @@
 import { ClassNameSettings, TagData, TagifySettings } from '@yaireo/tagify';
 import { EMOJI_COLLECTIONS, PATTERN_CACHE_TYPE, SHORT_LINK_TYPE, TAG_TYPE } from './constants';
 export type MapAttributesProps = Record<string, Record<string, any>>;
+export type StatusType = 'error' | 'success' | 'warning';
 /**
  * Interface defining the properties for the Tagify input component.
  * Provides configuration options and event handlers to manage Tagify's behavior and appearance.
@@ -37,6 +38,7 @@ export interface TagifyInputProps {
      * Helps enforce constraints by limiting the number of tags a user can input.
      */
     maxPersonalizeTags?: TagifySettings['maxTags'];
+    status?: StatusType;
     /**
      * Defines acceptable patterns or validation rules for tags.
      * Ensures only tags matching specified patterns can be added, enforcing content rules.

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

@@ -1,4 +1,4 @@
-import { AcceptablePattern, EmojiCollection, EmojiTag, TagType } from './types';
+import { AcceptablePattern, EmojiCollection, EmojiTag, StatusType, TagType } from './types';
 /**
  * Parses the input string and replaces matching patterns with processed tags.
  * This function iterates over predefined regex patterns and replaces each match
@@ -45,3 +45,4 @@ export declare const emojiManufacturer: (text: string, collectionType: EmojiColl
 export declare const getEmojiTag: ({ src, emoji, code }: EmojiTag) => string;
 export declare const getStyledTags: () => string;
 export declare const isPersonalizeTagType: (type: TagType) => boolean;
+export declare const getBackgroundInputStatus: (status?: StatusType) => string;

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

@@ -3,6 +3,7 @@ import stringReplaceToArray from 'string-replace-to-array';
 // Constants
 import { CUSTOMER, CUSTOM_FN, EMOJI, EMOJI_COLLECTIONS, EVENT, OBJECT_WIDGET, PREFIX_PATTERN_LINE_MESSAGE, PROMOTION_CODE, TAG_COLOR, TAG_TYPE, VISITOR, } from './constants';
 import { iconsViber } from './iconsViber';
+import { globalToken } from '@antscorp/antsomi-ui/es/constants';
 // Utils
 import { acceptablePatternChecking, getCachedRegex, patternHandlers, tagRegexStringPattern, } from './patternHandlers';
 /**
@@ -327,3 +328,16 @@ export const getStyledTags = () => {
     return styledTags.join('');
 };
 export const isPersonalizeTagType = (type) => [CUSTOMER, VISITOR, EVENT, PROMOTION_CODE, OBJECT_WIDGET, CUSTOM_FN].includes(type);
+export const getBackgroundInputStatus = (status) => {
+    switch (status) {
+        case 'error':
+            return globalToken?.colorError || '#EF3340';
+        case 'warning':
+            return globalToken?.colorWarning || '#faad14';
+        case 'success':
+            return globalToken?.colorSuccess || '#12B800';
+        default: {
+            return globalToken?.blue1 || '#B8CFE6';
+        }
+    }
+};

package/es/components/organism/ActivityTimeline/ActivityTimeline.js

@@ -5,10 +5,9 @@ import { StyledNoData, StyldTitle, StyledRoot, TimelineBottom } from './styled';
 import { Flex, Spin } from '../../atoms';
 import { ItemEvent, TimeLineTitle, ItemGroupEvent } from './components';
 import { useInView } from 'react-intersection-observer';
-import { translate, translations } from '@antscorp/antsomi-ui/es/locales';
+import { translate, translations } from '@antscorp/antsomi-locales';
 import { isEmpty } from 'lodash';
 import { differenceInMonths, formatDateTZ, startOfMonth, subMonths, } from '@antscorp/antsomi-ui/es/utils/date';
-import { getTranslateMessage } from '@antscorp/antsomi-ui/es/locales/i18n';
 import { EmptyData } from '../../molecules';
 export const ActivityTimeline = (props) => {
     const { timelines = [], isLoading = false, title = translate(translations._BLOCK_TIMELINE_CUS), timezone = Intl.DateTimeFormat().resolvedOptions().timeZone, objectName = '_THIS_PERSON_UPPERCASE', onFetchMore, eventTracking: eventTrackingProp = [], header, className, } = props;
@@ -92,7 +91,7 @@ export const ActivityTimeline = (props) => {
             return (_jsxs(_Fragment, { children: [header, _jsx(Flex, { style: { height: 240 }, align: "center", justify: "center", children: _jsx(Spin, { indicatorSize: 24 }) })] }));
         }
         if (!timelines.length) {
-            return (_jsxs(_Fragment, { children: [header, _jsx(StyledNoData, { style: { height: 240 }, align: "center", justify: "center", children: _jsx(EmptyData, { showIcon: false, description: getTranslateMessage(translations.noData).toString() }) })] }));
+            return (_jsxs(_Fragment, { children: [header, _jsx(StyledNoData, { align: "center", justify: "center", children: _jsx(EmptyData, { showIcon: false, title: translate(translations._PROFILES_NO_DATA), description: translate(translations._PROFILES_MESSAGE_NO_DATA_TIMELINE).toString() }) })] }));
         }
         return (_jsxs(_Fragment, { children: [header, showMainContent(timelines, objectName), showBottomComponent()] }));
     };

package/es/components/organism/ActivityTimeline/components/ProductCard/styled.js

@@ -14,10 +14,13 @@ export const ImgPanel = styled.div `
   height: 6.25rem;
   position: relative;
   border: 1px solid rgb(230, 230, 230);
+  border-radius: 10px;
+
   @media screen and (max-width: 767px) {
     width: 80px;
     height: 80px;
   }
+
   &:before {
     content: '';
     position: absolute;
@@ -42,9 +45,11 @@ export const ImgPanel = styled.div `
       }
     }
   }
+
   a {
     width: 100%;
     height: 100%;
+
     & > span {
       display: block;
       width: 100%;
@@ -80,15 +85,5 @@ export const LinkExtendTitle = styled(Typography.Link) `
 `;
 export const PlainCard = styled.div `
   font-size: 0.875rem;
-
-  /* font-size: 0.75rem; */
-
   line-height: 1.25;
-  /* &:last-of-type {
-    /* margin-top: 2.375rem;
-    margin-top: 3rem;
-    @media screen and (max-width: 767px) {
-      margin-top: 12px;
-    }
-  } */
 `;

package/es/components/organism/ActivityTimeline/styled.js

@@ -1,11 +1,17 @@
 import { Flex } from 'antd';
 import styled from 'styled-components';
-export const StyledRoot = styled.div ``;
+export const StyledRoot = styled.div `
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+`;
 export const StyldTitle = styled.div `
   font-size: 16px;
   font-weight: bold;
 `;
-export const StyledNoData = styled(Flex) ``;
+export const StyledNoData = styled(Flex) `
+  height: 100%;
+`;
 export const WrapperContainerRedeem = styled.div `
   display: flex;
   justify-content: space-between;

package/es/locales/en/google-sheet.json

@@ -2613,12 +2613,12 @@
     "_PROFILES_WIDGET_1": "Customer information",
     "_PROFILES_WIDGET_2": "Item recommendation",
     "_PROFILES_WIDGET_3": "User activity",
-    "_PROFILES_WIDGET_4": "Visitor Information",
+    "_PROFILES_WIDGET_4": "Visitor information",
     "_PROFILES_WIDGET_5": "Extended visualizations",
     "_PROFILES_SETTINGS_TAB": "Data",
     "_PROFILES_SETTINGS_1": "Avatar",
     "_PROFILES_SETTINGS_2": "Full name",
-    "_PROFILES_BTN_ADD_SOCIAL_GR": "Add Social Group",
+    "_PROFILES_BTN_ADD_SOCIAL_GR": "Add social group",
     "_PROFILES_AUDIENCE_INFO_1": "Customer since",
     "_PROFILES_AUDIENCE_INFO_2": "Last activity",
     "_PROFILES_BTN_ADD_ATT": "Add attribute",
@@ -2630,10 +2630,17 @@
     "_PROFILES_DEFAULT_TEMP_TOOLTIP": "Default template",
     "_PROFILES_MESSAGE_NO_TEMP": "You don't have any templates to visualize profiles",
     "_PROFILES_USER_GUIDE_2": "Click the button to create a template",
+    "_PROFILES_MESSAGE_NO_DATA_TIMELINE": "Modify the visualization to configure displayed events",
+    "_PROFILES_MESSAGE_NO_DATA_INFOR": "Modify the visualization to configure displayed attributes",
+    "_PROFILES_MESSAGE_NO_DATA_GROUP": "Please add attributes you want to display",
+    "_PROFILES_ADD_EVENT": "Add event",
     "_COOKIE_DM_DEFINITION": "What is it?",
     "_COOKIE_DM_INSTRUCTION": "Instruction",
     "_COOKIE_DM_DEFINITION_1": "The cookie domain allows you to specify a domain where tracking cookies will be set, ensuring seamless data collection across subdomains. This helps maintain a consistent User ID, enabling accurate cross-subdomain tracking and preventing fragmented customer profiles. ",
     "_COOKIE_DM_DEFINITION_2": "By ensuring unified data collection, it enhances personalization, improves analytics, and provides a clearer view of customer behavior across your entire web ecosystem.",
-    "_COOKIE_DM_INSTRUCTION_1": "Identify the Primary Domain: \nThis is the base domain for all subdomains you want to track. \nExample: https://antsomi.com",
-    "_COOKIE_DM_INSTRUCTION_2": "Configure the Cookie Domain: \nInput .antsomi.com to track data across all subdomains (eg: shop.antsomi.com or blog.antsomi.com)"
+    "_COOKIE_DM_INSTRUCTION_1_SUM": "Identify the Primary Domain: ",
+    "_COOKIE_DM_INSTRUCTION_1_DES_1": "This is the base domain for all subdomains you want to track. ",
+    "_COOKIE_DM_INSTRUCTION_1_DES_2": "Example: {{x}}",
+    "_COOKIE_DM_INSTRUCTION_2_SUM": "Configure the Cookie Domain:",
+    "_COOKIE_DM_INSTRUCTION_2_DES_1": "Input {{x}} to track data across all subdomains (eg: {{y}} or {{y}})"
 }

package/es/locales/i18n.d.ts

@@ -2632,12 +2632,19 @@ export declare const translationsJson: {
             _PROFILES_DEFAULT_TEMP_TOOLTIP: string;
             _PROFILES_MESSAGE_NO_TEMP: string;
             _PROFILES_USER_GUIDE_2: string;
+            _PROFILES_MESSAGE_NO_DATA_TIMELINE: string;
+            _PROFILES_MESSAGE_NO_DATA_INFOR: string;
+            _PROFILES_MESSAGE_NO_DATA_GROUP: string;
+            _PROFILES_ADD_EVENT: string;
             _COOKIE_DM_DEFINITION: string;
             _COOKIE_DM_INSTRUCTION: string;
             _COOKIE_DM_DEFINITION_1: string;
             _COOKIE_DM_DEFINITION_2: string;
-            _COOKIE_DM_INSTRUCTION_1: string;
-            _COOKIE_DM_INSTRUCTION_2: string;
+            _COOKIE_DM_INSTRUCTION_1_SUM: string;
+            _COOKIE_DM_INSTRUCTION_1_DES_1: string;
+            _COOKIE_DM_INSTRUCTION_1_DES_2: string;
+            _COOKIE_DM_INSTRUCTION_2_SUM: string;
+            _COOKIE_DM_INSTRUCTION_2_DES_1: string;
             global: {
                 minus: string;
                 plus: string;
@@ -5956,12 +5963,19 @@ export declare const translationsJson: {
             _PROFILES_DEFAULT_TEMP_TOOLTIP: string;
             _PROFILES_MESSAGE_NO_TEMP: string;
             _PROFILES_USER_GUIDE_2: string;
+            _PROFILES_MESSAGE_NO_DATA_TIMELINE: string;
+            _PROFILES_MESSAGE_NO_DATA_INFOR: string;
+            _PROFILES_MESSAGE_NO_DATA_GROUP: string;
+            _PROFILES_ADD_EVENT: string;
             _COOKIE_DM_DEFINITION: string;
             _COOKIE_DM_INSTRUCTION: string;
             _COOKIE_DM_DEFINITION_1: string;
             _COOKIE_DM_DEFINITION_2: string;
-            _COOKIE_DM_INSTRUCTION_1: string;
-            _COOKIE_DM_INSTRUCTION_2: string;
+            _COOKIE_DM_INSTRUCTION_1_SUM: string;
+            _COOKIE_DM_INSTRUCTION_1_DES_1: string;
+            _COOKIE_DM_INSTRUCTION_1_DES_2: string;
+            _COOKIE_DM_INSTRUCTION_2_SUM: string;
+            _COOKIE_DM_INSTRUCTION_2_DES_1: string;
             global: {
                 minus: string;
                 plus: string;
@@ -8819,12 +8833,19 @@ export declare const translationsJson: {
             _PROFILES_DEFAULT_TEMP_TOOLTIP: string;
             _PROFILES_MESSAGE_NO_TEMP: string;
             _PROFILES_USER_GUIDE_2: string;
+            _PROFILES_MESSAGE_NO_DATA_TIMELINE: string;
+            _PROFILES_MESSAGE_NO_DATA_INFOR: string;
+            _PROFILES_MESSAGE_NO_DATA_GROUP: string;
+            _PROFILES_ADD_EVENT: string;
             _COOKIE_DM_DEFINITION: string;
             _COOKIE_DM_INSTRUCTION: string;
             _COOKIE_DM_DEFINITION_1: string;
             _COOKIE_DM_DEFINITION_2: string;
-            _COOKIE_DM_INSTRUCTION_1: string;
-            _COOKIE_DM_INSTRUCTION_2: string;
+            _COOKIE_DM_INSTRUCTION_1_SUM: string;
+            _COOKIE_DM_INSTRUCTION_1_DES_1: string;
+            _COOKIE_DM_INSTRUCTION_1_DES_2: string;
+            _COOKIE_DM_INSTRUCTION_2_SUM: string;
+            _COOKIE_DM_INSTRUCTION_2_DES_1: string;
         };
     };
 };