@antscorp/antsomi-ui 1.3.5-beta.794 → 1.3.5-beta.796
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/es/components/icons/DecreaseDecimalIcon.js +1 -1
- package/es/components/icons/IncreaseDecimalIcon.js +1 -1
- package/es/components/molecules/TagifyInput/TagifyInput.js +26 -7
- package/es/components/molecules/TagifyInput/constants.d.ts +8 -5
- package/es/components/molecules/TagifyInput/constants.js +8 -5
- package/es/components/molecules/TagifyInput/errorWrapper.js +1 -0
- package/es/components/molecules/TagifyInput/patternHandlers.js +69 -31
- package/es/components/molecules/TagifyInput/types.d.ts +4 -4
- package/es/components/molecules/TagifyInput/utils.d.ts +22 -2
- package/es/components/molecules/TagifyInput/utils.js +101 -19
- package/es/locales/en/google-sheet.json +3 -2
- package/es/locales/i18n.d.ts +3 -0
- package/es/locales/ja/google-sheet.json +83 -82
- package/es/locales/vi/google-sheet.json +6 -5
- package/package.json +1 -1
|
@@ -3,5 +3,5 @@ import { forwardRef } from 'react';
|
|
|
3
3
|
import { useIcon } from './hooks/useIcon';
|
|
4
4
|
export const DecreaseDecimalIcon = forwardRef((props, ref) => {
|
|
5
5
|
const { width, height } = useIcon(props);
|
|
6
|
-
return (_jsx("svg", { viewBox: "0 0 24 24",
|
|
6
|
+
return (_jsx("svg", { viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg", ...props, ref: ref, width: width, height: height, children: _jsx("path", { d: "M3.60675 10.9215C3.41775 11.106 3.32325 11.3363 3.32325 11.6115C3.32325 11.8868 3.41775 12.1163 3.60675 12.3015C3.80025 12.486 4.056 12.579 4.374 12.579C4.692 12.579 4.9455 12.4868 5.1345 12.3015C5.328 12.117 5.42475 11.8868 5.42475 11.6115C5.42475 11.3363 5.328 11.1068 5.1345 10.9215C4.9455 10.737 4.692 10.644 4.374 10.644C4.056 10.644 3.80025 10.7363 3.60675 10.9215ZM13.3027 8.61375V6.98925C13.3027 6.426 13.2532 5.928 13.1542 5.49375C13.0552 5.055 12.9135 4.67925 12.729 4.36575C12.5445 4.04775 12.321 3.7875 12.0585 3.58575C11.796 3.384 11.502 3.2355 11.175 3.141C10.8341 3.03935 10.4799 2.9893 10.1242 2.9925C9.65175 2.9925 9.222 3.06975 8.835 3.22425C8.44708 3.37551 8.10187 3.61904 7.82925 3.93375C7.55025 4.25625 7.33275 4.671 7.17825 5.178C7.0275 5.6805 6.9525 6.285 6.9525 6.98925V8.61375C6.9525 9.18075 7.002 9.684 7.101 10.122C7.2 10.56 7.34175 10.9387 7.52625 11.2567C7.71525 11.5702 7.93875 11.8305 8.19675 12.0367C8.45925 12.243 8.75325 12.3953 9.08025 12.4943C9.4065 12.5888 9.759 12.636 10.1378 12.636C10.6103 12.636 11.04 12.5587 11.427 12.4042C11.814 12.2497 12.147 12.0113 12.426 11.6888C12.7095 11.3625 12.927 10.9455 13.077 10.4377C13.2278 9.92625 13.3027 9.318 13.3027 8.61375ZM11.4398 6.738V8.859C11.4398 9.28425 11.412 9.64575 11.3557 9.942C11.2995 10.2382 11.214 10.479 11.0977 10.6642C10.999 10.8324 10.8564 10.9706 10.6852 11.064C10.515 11.1482 10.3269 11.1901 10.137 11.1862C9.96975 11.1862 9.8145 11.1608 9.67275 11.109C9.53334 11.056 9.40771 10.9721 9.30525 10.8637C9.19161 10.7311 9.10018 10.5809 9.0345 10.419C8.95388 10.2048 8.89777 9.9821 8.86725 9.75525C8.83039 9.45796 8.8131 9.15856 8.8155 8.859V6.738C8.81021 6.37942 8.83833 6.02112 8.8995 5.66775C8.9595 5.3715 9.04575 5.1345 9.1575 4.95825C9.26925 4.7775 9.40425 4.647 9.56325 4.56525C9.73808 4.48108 9.93025 4.4392 10.1242 4.443C10.2915 4.443 10.4445 4.4685 10.5817 4.52025C10.719 4.572 10.842 4.65375 10.9492 4.7655C11.0565 4.87725 11.1472 5.0235 11.22 5.20425C11.2927 5.3805 11.3467 5.595 11.3812 5.84925C11.4202 6.10275 11.439 6.399 11.439 6.73875L11.4398 6.738ZM11.5875 17.7203L14.8748 14.433V16.908H20.6768V18.5317H14.8748V21.0068L11.5875 17.7195V17.7203Z" }) }));
|
|
7
7
|
});
|
|
@@ -3,5 +3,5 @@ import { forwardRef } from 'react';
|
|
|
3
3
|
import { useIcon } from './hooks/useIcon';
|
|
4
4
|
export const IncreaseDecimalIcon = forwardRef((props, ref) => {
|
|
5
5
|
const { width, height } = useIcon(props);
|
|
6
|
-
return (_jsx("svg", { viewBox: "0 0 24 24",
|
|
6
|
+
return (_jsx("svg", { viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg", ...props, ref: ref, width: width, height: height, children: _jsx("path", { d: "M4.24875 10.2637C4.07625 10.4325 3.99 10.6417 3.99 10.893C3.99 11.1442 4.07625 11.3535 4.24875 11.5222C4.425 11.691 4.65825 11.775 4.9485 11.775C5.23875 11.775 5.46975 11.691 5.64225 11.5222C5.8185 11.3535 5.907 11.1442 5.907 10.893C5.907 10.6417 5.8185 10.4325 5.64225 10.2637C5.46975 10.095 5.23875 10.011 4.9485 10.011C4.65825 10.011 4.425 10.095 4.24875 10.2637ZM13.0942 8.15774V6.67574C13.0942 6.16199 13.0492 5.70749 12.9592 5.31149C12.884 4.9504 12.7529 4.60323 12.5707 4.28249C12.402 3.99224 12.198 3.75524 11.9595 3.57074C11.721 3.38624 11.4517 3.25124 11.154 3.16499C10.843 3.07256 10.5199 3.02706 10.1955 3.02999C9.76425 3.02999 9.372 3.10049 9.0195 3.24149C8.66576 3.37962 8.35095 3.60176 8.10225 3.88874C7.84725 4.18274 7.64925 4.56149 7.50825 5.02349C7.371 5.48249 7.30275 6.03299 7.30275 6.67574V8.15774C7.30275 8.67524 7.34775 9.13424 7.43775 9.53399C7.52775 9.93374 7.6575 10.2787 7.82625 10.569C7.99875 10.8555 8.20275 11.0925 8.4375 11.2807C8.67675 11.469 8.94525 11.6077 9.243 11.6985C9.54075 11.7847 9.8625 11.8275 10.2075 11.8275C10.6387 11.8275 11.031 11.757 11.3835 11.616C11.736 11.475 12.0405 11.2575 12.2947 10.9635C12.5535 10.6657 12.7515 10.2855 12.8887 9.82274C13.026 9.35624 13.0942 8.80125 13.0942 8.1585V8.15774ZM11.394 6.44625V8.38125C11.394 8.76975 11.3685 9.09899 11.3175 9.36899C11.2665 9.63899 11.1885 9.85874 11.082 10.0275C10.98 10.1925 10.8548 10.314 10.7055 10.392C10.5503 10.4687 10.379 10.507 10.206 10.5037C10.053 10.5037 9.912 10.4805 9.78225 10.4332C9.65513 10.3849 9.54054 10.3085 9.447 10.2097C9.34373 10.0885 9.26043 9.95149 9.20025 9.80399C9.12658 9.6084 9.07525 9.40511 9.04725 9.19799C9.0136 8.92682 8.99782 8.65374 9 8.38049V6.44549C9 6.06149 9.0255 5.73599 9.0765 5.46899C9.13125 5.19824 9.21 4.98299 9.312 4.82174C9.414 4.65674 9.53775 4.53749 9.6825 4.46324C9.84193 4.38655 10.0171 4.34828 10.194 4.35149C10.347 4.35149 10.4858 4.37474 10.6118 4.42199C10.7378 4.46924 10.8487 4.54349 10.947 4.64549C11.0452 4.74749 11.127 4.88099 11.1937 5.04524C11.2605 5.20574 11.3093 5.40224 11.3408 5.63324C11.376 5.86424 11.394 6.135 11.394 6.44475V6.44625ZM20.01 8.15774V6.67574C20.01 6.16199 19.965 5.70749 19.875 5.31149C19.7996 4.95054 19.6688 4.60343 19.4872 4.28249C19.3185 3.99224 19.1145 3.75524 18.876 3.57074C18.6375 3.38624 18.3682 3.25124 18.0705 3.16499C17.7595 3.07256 17.4364 3.02706 17.112 3.02999C16.6807 3.02999 16.2885 3.10049 15.936 3.24149C15.5822 3.37946 15.2673 3.60163 15.0187 3.88874C14.7637 4.18274 14.5657 4.56149 14.4247 5.02349C14.2875 5.48249 14.2192 6.03299 14.2192 6.67574V8.15774C14.2192 8.67524 14.2642 9.13424 14.3542 9.53399C14.4442 9.93374 14.574 10.2787 14.7427 10.569C14.9152 10.8555 15.1193 11.0925 15.354 11.2807C15.5933 11.469 15.8617 11.6077 16.1595 11.6985C16.4572 11.7847 16.779 11.8275 17.124 11.8275C17.5553 11.8275 17.9475 11.757 18.3 11.616C18.6525 11.475 18.957 11.2575 19.2112 10.9635C19.47 10.6657 19.668 10.2855 19.8052 9.82274C19.9425 9.35624 20.0107 8.80125 20.0107 8.1585L20.01 8.15774ZM18.3105 6.44625V8.38125C18.3105 8.76975 18.285 9.09899 18.234 9.36899C18.183 9.63899 18.105 9.85874 17.9985 10.0275C17.8965 10.1925 17.7713 10.314 17.622 10.392C17.4666 10.4688 17.295 10.5071 17.1218 10.5037C16.9688 10.5037 16.8277 10.4805 16.698 10.4332C16.5709 10.3849 16.4563 10.3085 16.3627 10.2097C16.2595 10.0885 16.1762 9.95149 16.116 9.80399C16.0423 9.6084 15.991 9.40511 15.963 9.19799C15.9294 8.92682 15.9136 8.65374 15.9158 8.38049V6.44549C15.9158 6.06149 15.9412 5.73599 15.9922 5.46899C16.047 5.19824 16.1257 4.98299 16.2277 4.82174C16.3297 4.65674 16.4535 4.53749 16.5983 4.46324C16.7577 4.38655 16.9329 4.34828 17.1097 4.35149C17.2627 4.35149 17.4015 4.37474 17.5275 4.42199C17.6535 4.46924 17.7645 4.54349 17.8627 4.64549C17.961 4.74749 18.0427 4.88099 18.1095 5.04524C18.1762 5.20574 18.225 5.40224 18.2565 5.63324C18.2917 5.86424 18.309 6.135 18.309 6.44475L18.3105 6.44625ZM13.4295 14.9722L16.4288 17.9715L13.4288 20.9707V18.7125H8.136V17.2312H13.4295V14.973V14.9722Z" }) }));
|
|
7
7
|
});
|
|
@@ -15,7 +15,7 @@ import '@yaireo/tagify/dist/tagify.css';
|
|
|
15
15
|
// Styled
|
|
16
16
|
import { TagTextArea, TagifyWrapper, WrapperPlaceHolder } from './styled';
|
|
17
17
|
// Utils
|
|
18
|
-
import { parseTagStringToTagify, convertInputStringToOriginal, emojiManufacturer, getEmojiTag, isPersonalizeTagType, } from './utils';
|
|
18
|
+
import { parseTagStringToTagify, convertInputStringToOriginal, emojiManufacturer, getEmojiTag, isPersonalizeTagType, generateTagContent, unescapeString, } from './utils';
|
|
19
19
|
import { acceptablePatternChecking, getCachedRegex, getPersonalizeTagInfo, patternHandlers, } from './patternHandlers';
|
|
20
20
|
// Constants
|
|
21
21
|
import { EMOJI, PERSONALIZE_PTN, SHORT_LINK, defaultCssVariables, tagifyDefaultProps, } from './constants';
|
|
@@ -123,6 +123,7 @@ const TagifyInput = forwardRef((props, ref) => {
|
|
|
123
123
|
}
|
|
124
124
|
},
|
|
125
125
|
}), [onChange]);
|
|
126
|
+
// console.log('tagifyRef', tagifyRef);
|
|
126
127
|
const onTagItemClick = useCallback((event) => {
|
|
127
128
|
if (event.detail && onTagClick) {
|
|
128
129
|
const { tagify } = event.detail;
|
|
@@ -158,6 +159,8 @@ const TagifyInput = forwardRef((props, ref) => {
|
|
|
158
159
|
const emojiPath = emojiManufacturer(value, collection);
|
|
159
160
|
visibleTagContent = getEmojiTag({ src: emojiPath, emoji: label, code: value });
|
|
160
161
|
}
|
|
162
|
+
const dataAttrs = new Map();
|
|
163
|
+
dataAttrs.set('tag-type', tagData.type);
|
|
161
164
|
return `
|
|
162
165
|
<tag
|
|
163
166
|
contenteditable='false'
|
|
@@ -167,9 +170,11 @@ const TagifyInput = forwardRef((props, ref) => {
|
|
|
167
170
|
${tagify.getAttributes(tagData)}
|
|
168
171
|
>
|
|
169
172
|
${closeIcon}
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
173
|
+
|
|
174
|
+
${generateTagContent({
|
|
175
|
+
tagData,
|
|
176
|
+
content: visibleTagContent,
|
|
177
|
+
})}
|
|
173
178
|
</tag>`;
|
|
174
179
|
}, []);
|
|
175
180
|
/*
|
|
@@ -266,7 +271,15 @@ const TagifyInput = forwardRef((props, ref) => {
|
|
|
266
271
|
const { DOM, settings } = tagifyRef.current;
|
|
267
272
|
const { classList } = DOM?.scope;
|
|
268
273
|
const { classNames } = settings;
|
|
269
|
-
if (!classList.contains(classNames.focus)) {
|
|
274
|
+
if (!classList.contains(classNames.focus) && DOM.input) {
|
|
275
|
+
const range = document.createRange();
|
|
276
|
+
const selection = window.getSelection();
|
|
277
|
+
// Move the range to the end of the input's content
|
|
278
|
+
range.selectNodeContents(DOM.input);
|
|
279
|
+
range.collapse(false);
|
|
280
|
+
// Remove any existing selection and add the new range
|
|
281
|
+
selection?.removeAllRanges();
|
|
282
|
+
selection?.addRange(range);
|
|
270
283
|
tagifyRef.current.DOM.input.focus();
|
|
271
284
|
}
|
|
272
285
|
}
|
|
@@ -331,8 +344,14 @@ const TagifyInput = forwardRef((props, ref) => {
|
|
|
331
344
|
}, [onTagItemClick, onTagifyTyping, onTagifyRemoved]);
|
|
332
345
|
useUpdateEffect(() => {
|
|
333
346
|
const convertedValue = convertInputStringToOriginal(inputTypeDebounce);
|
|
334
|
-
|
|
335
|
-
|
|
347
|
+
if (escapeHTML) {
|
|
348
|
+
const unescapedValue = unescapeString(convertedValue);
|
|
349
|
+
onChange(unescapedValue);
|
|
350
|
+
}
|
|
351
|
+
else {
|
|
352
|
+
onChange(convertedValue);
|
|
353
|
+
}
|
|
354
|
+
}, [inputTypeDebounce, escapeHTML]);
|
|
336
355
|
// Removes all tags and resets the original input tag's value property if the initial value back to is empty string
|
|
337
356
|
useUpdateEffect(() => {
|
|
338
357
|
if (initialValue === '' && tagifyRef.current) {
|
|
@@ -42,9 +42,16 @@ export declare const TAG_TYPE: {
|
|
|
42
42
|
readonly CONTENT_SOURCE_GROUP: "groups";
|
|
43
43
|
};
|
|
44
44
|
export declare const CUSTOMER: "customer", VISITOR: "visitor", EVENT: "event", PROMOTION_CODE: "promotion_code", CUSTOM_FN: "custom", EMOJI: "emoji", SHORT_LINK: "shortlink", OBJECT_WIDGET: "objectWidget", CONTENT_SOURCE_GROUP: "groups";
|
|
45
|
+
export declare const SHORT_LINK_TYPE: {
|
|
46
|
+
readonly INDIVIDUAL: "shortlink";
|
|
47
|
+
readonly GENERAL: "shortlink_static";
|
|
48
|
+
};
|
|
45
49
|
export declare const TAG_COLOR: {
|
|
46
50
|
readonly customer: string | undefined;
|
|
47
|
-
readonly shortlink:
|
|
51
|
+
readonly shortlink: {
|
|
52
|
+
readonly shortlink: "#CAFEDD";
|
|
53
|
+
readonly shortlink_static: "#EFE2D9";
|
|
54
|
+
};
|
|
48
55
|
readonly visitor: "#e8feca";
|
|
49
56
|
readonly event: "#fecaca";
|
|
50
57
|
readonly promotion_code: "#d8cafe";
|
|
@@ -57,8 +64,4 @@ export declare const EMOJI_COLLECTIONS: {
|
|
|
57
64
|
readonly VIBER: "viber";
|
|
58
65
|
readonly LINE: "line";
|
|
59
66
|
};
|
|
60
|
-
export declare const SHORT_LINK_TYPE: {
|
|
61
|
-
readonly INDIVIDUAL: "shortlink";
|
|
62
|
-
readonly GENERAL: "shortlink_static";
|
|
63
|
-
};
|
|
64
67
|
export declare const PREFIX_PATTERN_LINE_MESSAGE = "line";
|
|
@@ -57,9 +57,16 @@ export const TAG_TYPE = {
|
|
|
57
57
|
CONTENT_SOURCE_GROUP: 'groups',
|
|
58
58
|
};
|
|
59
59
|
export const { CUSTOMER, VISITOR, EVENT, PROMOTION_CODE, CUSTOM_FN, EMOJI, SHORT_LINK, OBJECT_WIDGET, CONTENT_SOURCE_GROUP, } = TAG_TYPE;
|
|
60
|
+
export const SHORT_LINK_TYPE = {
|
|
61
|
+
INDIVIDUAL: 'shortlink', // Individual link
|
|
62
|
+
GENERAL: 'shortlink_static', // General link
|
|
63
|
+
};
|
|
60
64
|
export const TAG_COLOR = {
|
|
61
65
|
[CUSTOMER]: globalToken?.blue2,
|
|
62
|
-
[SHORT_LINK]:
|
|
66
|
+
[SHORT_LINK]: {
|
|
67
|
+
[SHORT_LINK_TYPE.INDIVIDUAL]: '#CAFEDD',
|
|
68
|
+
[SHORT_LINK_TYPE.GENERAL]: '#EFE2D9',
|
|
69
|
+
},
|
|
63
70
|
[VISITOR]: '#e8feca',
|
|
64
71
|
[EVENT]: '#fecaca',
|
|
65
72
|
[PROMOTION_CODE]: '#d8cafe',
|
|
@@ -72,8 +79,4 @@ export const EMOJI_COLLECTIONS = {
|
|
|
72
79
|
VIBER: 'viber',
|
|
73
80
|
LINE: 'line',
|
|
74
81
|
};
|
|
75
|
-
export const SHORT_LINK_TYPE = {
|
|
76
|
-
INDIVIDUAL: 'shortlink', // Individual link
|
|
77
|
-
GENERAL: 'shortlink_static', // General link
|
|
78
|
-
};
|
|
79
82
|
export const PREFIX_PATTERN_LINE_MESSAGE = 'line';
|
|
@@ -80,36 +80,54 @@ export const getPersonalizeTagInfo = (originalTag, mapAttributes) => {
|
|
|
80
80
|
}
|
|
81
81
|
};
|
|
82
82
|
const createTagPattern = (tagInfo) => `[[${JSON.stringify(tagInfo)}]]`;
|
|
83
|
-
const generateShortlinkLabel = () => {
|
|
84
|
-
const
|
|
85
|
-
|
|
83
|
+
const generateShortlinkLabel = (params) => {
|
|
84
|
+
const { type } = params;
|
|
85
|
+
switch (type) {
|
|
86
|
+
case SHORT_LINK_TYPE.INDIVIDUAL: {
|
|
87
|
+
return 'Individual Shortlink';
|
|
88
|
+
}
|
|
89
|
+
case SHORT_LINK_TYPE.GENERAL: {
|
|
90
|
+
return 'General Shortlink';
|
|
91
|
+
}
|
|
92
|
+
default: {
|
|
93
|
+
const randomId = random(5);
|
|
94
|
+
return `https://ants.ly/${randomId}`;
|
|
95
|
+
}
|
|
96
|
+
}
|
|
86
97
|
};
|
|
98
|
+
const PERSONALIZE_PTN_PATTERN = '#\\{(?!shortlink|line|viber)([^}]+?)\\}';
|
|
87
99
|
/*
|
|
88
100
|
* Function to handle #{shortlink(...)} pattern
|
|
89
101
|
*
|
|
90
102
|
*/
|
|
91
103
|
const handleShortlinkIndividualPattern = match => {
|
|
92
104
|
const [fullMatch] = match;
|
|
93
|
-
const urlRegex = getCachedRegex('\\(([^)]+)\\)', 'g', 'urlRegex');
|
|
94
105
|
let matchUrl;
|
|
95
106
|
let url = '';
|
|
96
|
-
const
|
|
107
|
+
const urlRegex = getCachedRegex('\\(([^)]+)\\)', 'g', 'urlRegex');
|
|
108
|
+
const label = generateShortlinkLabel({ type: SHORT_LINK_TYPE.INDIVIDUAL });
|
|
97
109
|
while ((matchUrl = urlRegex.exec(fullMatch)) !== null) {
|
|
98
110
|
[, url] = matchUrl;
|
|
99
111
|
}
|
|
100
|
-
const
|
|
112
|
+
const urlForValidate = url.replace(new RegExp(PERSONALIZE_PTN_PATTERN, 'g'), 'personalize_pattern');
|
|
113
|
+
const isValid = validateURL(urlForValidate);
|
|
101
114
|
// Validate the URL inside the shortlink pattern
|
|
102
115
|
if (!isValid) {
|
|
103
|
-
console.error(`Invalid URL detected in shortlink individual: Full match: ${fullMatch} - URL: ${url}`);
|
|
104
|
-
return {
|
|
116
|
+
console.error(`Invalid URL detected in shortlink individual: Full match: ${fullMatch} - URL: ${url} - Validate URL: ${urlForValidate}`);
|
|
117
|
+
return {
|
|
118
|
+
isValid,
|
|
119
|
+
tag: '[[Invalid URL]]',
|
|
120
|
+
tagData: undefined,
|
|
121
|
+
};
|
|
105
122
|
}
|
|
106
|
-
const
|
|
123
|
+
const tagData = {
|
|
107
124
|
label,
|
|
108
125
|
type: SHORT_LINK,
|
|
109
126
|
shortlinkType: SHORT_LINK_TYPE.INDIVIDUAL,
|
|
110
127
|
value: fullMatch,
|
|
111
|
-
}
|
|
112
|
-
|
|
128
|
+
};
|
|
129
|
+
const tag = createTagPattern(tagData);
|
|
130
|
+
return { isValid, tag, tagData };
|
|
113
131
|
};
|
|
114
132
|
/*
|
|
115
133
|
* Function to handle #{shortlink_static(...)} pattern
|
|
@@ -117,10 +135,10 @@ const handleShortlinkIndividualPattern = match => {
|
|
|
117
135
|
*/
|
|
118
136
|
const handleShortlinkGeneralPattern = match => {
|
|
119
137
|
const [fullMatch] = match;
|
|
120
|
-
const urlRegex = getCachedRegex('\\(([^)]+)\\)', 'g', 'urlRegex');
|
|
121
138
|
let matchUrl;
|
|
122
139
|
let url = '';
|
|
123
|
-
const
|
|
140
|
+
const urlRegex = getCachedRegex('\\(([^)]+)\\)', 'g', 'urlRegex');
|
|
141
|
+
const label = generateShortlinkLabel({ type: SHORT_LINK_TYPE.GENERAL });
|
|
124
142
|
while ((matchUrl = urlRegex.exec(fullMatch)) !== null) {
|
|
125
143
|
[, url] = matchUrl;
|
|
126
144
|
}
|
|
@@ -128,15 +146,20 @@ const handleShortlinkGeneralPattern = match => {
|
|
|
128
146
|
// Validate the URL inside the shortlink general pattern
|
|
129
147
|
if (!isValid) {
|
|
130
148
|
console.error(`Invalid URL detected in shortlink general: fullMatch:: ${fullMatch}`);
|
|
131
|
-
return {
|
|
149
|
+
return {
|
|
150
|
+
isValid,
|
|
151
|
+
tag: '[[Invalid URL]]',
|
|
152
|
+
tagData: undefined,
|
|
153
|
+
};
|
|
132
154
|
}
|
|
133
|
-
const
|
|
155
|
+
const tagData = {
|
|
134
156
|
label,
|
|
135
157
|
type: SHORT_LINK,
|
|
136
158
|
shortlinkType: SHORT_LINK_TYPE.GENERAL,
|
|
137
159
|
value: fullMatch,
|
|
138
|
-
}
|
|
139
|
-
|
|
160
|
+
};
|
|
161
|
+
const tag = createTagPattern(tagData);
|
|
162
|
+
return { isValid, tag, tagData };
|
|
140
163
|
};
|
|
141
164
|
/*
|
|
142
165
|
* Function to handle $((line:<ProductId>:<CodeImage>)) pattern
|
|
@@ -146,15 +169,20 @@ const handleLinePattern = match => {
|
|
|
146
169
|
const lineValue = `$((${PREFIX_PATTERN_LINE_MESSAGE}:${lineProductId}:${lineCodeImage}))`;
|
|
147
170
|
if (!lineProductId || !lineCodeImage) {
|
|
148
171
|
console.error('Invalid line pattern detected: ', lineValue);
|
|
149
|
-
return {
|
|
172
|
+
return {
|
|
173
|
+
isValid: false,
|
|
174
|
+
tag: '[[Invalid Emoji Line]]',
|
|
175
|
+
tagData: undefined,
|
|
176
|
+
};
|
|
150
177
|
}
|
|
151
|
-
const
|
|
178
|
+
const tagData = {
|
|
152
179
|
label: lineValue,
|
|
153
180
|
value: lineValue,
|
|
154
181
|
type: EMOJI,
|
|
155
182
|
collection: EMOJI_COLLECTIONS.LINE,
|
|
156
|
-
}
|
|
157
|
-
|
|
183
|
+
};
|
|
184
|
+
const tag = createTagPattern(tagData);
|
|
185
|
+
return { isValid: true, tag, tagData };
|
|
158
186
|
};
|
|
159
187
|
/*
|
|
160
188
|
* Function to handle generic of personalize #{...} pattern
|
|
@@ -165,16 +193,21 @@ const handlePersonalizeTagPattern = match => {
|
|
|
165
193
|
const [type, attributeName, subAttributeName] = tagCode.split('.');
|
|
166
194
|
if (!tagCode || !type) {
|
|
167
195
|
console.error('Invalid personalize pattern detected: ', tagCode);
|
|
168
|
-
return {
|
|
196
|
+
return {
|
|
197
|
+
isValid: false,
|
|
198
|
+
tag: '[[Invalid Personalize]]',
|
|
199
|
+
tagData: undefined,
|
|
200
|
+
};
|
|
169
201
|
}
|
|
170
202
|
const isContentSourceTag = type === CONTENT_SOURCE_GROUP;
|
|
171
203
|
const label = isContentSourceTag && subAttributeName ? subAttributeName : attributeName || type;
|
|
172
|
-
const
|
|
204
|
+
const tagData = {
|
|
173
205
|
label,
|
|
174
206
|
type: type,
|
|
175
207
|
value: personalizeTag,
|
|
176
|
-
}
|
|
177
|
-
|
|
208
|
+
};
|
|
209
|
+
const tag = createTagPattern(tagData);
|
|
210
|
+
return { isValid: true, tag, tagData };
|
|
178
211
|
};
|
|
179
212
|
/*
|
|
180
213
|
* Function to handle Viber (...) pattern
|
|
@@ -184,16 +217,21 @@ const handleViberPattern = match => {
|
|
|
184
217
|
const [, viberContent] = match;
|
|
185
218
|
const isValid = !!viberContent && isViberEmoji(viberContent);
|
|
186
219
|
if (!isValid) {
|
|
187
|
-
console.error('Invalid viber pattern detected: ', viberContent);
|
|
188
|
-
return {
|
|
220
|
+
// console.error('Invalid viber pattern detected: ', viberContent);
|
|
221
|
+
return {
|
|
222
|
+
isValid: false,
|
|
223
|
+
tag: '[[Invalid Viber]]',
|
|
224
|
+
tagData: undefined,
|
|
225
|
+
};
|
|
189
226
|
}
|
|
190
|
-
const
|
|
227
|
+
const tagData = {
|
|
191
228
|
type: EMOJI,
|
|
192
229
|
value: `(${viberContent})`,
|
|
193
230
|
label: viberContent,
|
|
194
231
|
collection: EMOJI_COLLECTIONS.VIBER,
|
|
195
|
-
}
|
|
196
|
-
|
|
232
|
+
};
|
|
233
|
+
const tag = createTagPattern(tagData);
|
|
234
|
+
return { isValid, tag, tagData };
|
|
197
235
|
};
|
|
198
236
|
// Map of regex patterns to their respective wrapped handlers
|
|
199
237
|
export const patternHandlers = {
|
|
@@ -226,7 +264,7 @@ export const patternHandlers = {
|
|
|
226
264
|
},
|
|
227
265
|
// NOTE: Personalize patterns now include lookahead to ensure they do not match any known pattern like shortlink.
|
|
228
266
|
[PERSONALIZE_PTN]: {
|
|
229
|
-
pattern:
|
|
267
|
+
pattern: PERSONALIZE_PTN_PATTERN,
|
|
230
268
|
name: PERSONALIZE_PTN, // Used to cache the regex, please keep the name unique for each pattern
|
|
231
269
|
acceptablePattern: PERSONALIZE_PTN,
|
|
232
270
|
handler: errorWrapper(handlePersonalizeTagPattern),
|
|
@@ -76,17 +76,17 @@ export type ShortLinkType = (typeof SHORT_LINK_TYPE)[keyof typeof SHORT_LINK_TYP
|
|
|
76
76
|
export type PatternCacheType = (typeof PATTERN_CACHE_TYPE)[keyof typeof PATTERN_CACHE_TYPE];
|
|
77
77
|
export type PatterTagName = Exclude<PatternCacheType, 'shortlink_pattern'>;
|
|
78
78
|
export type AcceptablePattern = Exclude<PatternCacheType, 'shortlink_individual_pattern' | 'shortlink_general_pattern'>;
|
|
79
|
-
interface TagDataText extends TagData {
|
|
79
|
+
export interface TagDataText extends TagData {
|
|
80
80
|
value: string;
|
|
81
81
|
label: string;
|
|
82
82
|
type: TagType;
|
|
83
83
|
}
|
|
84
|
-
interface TagDataEmoji extends Omit<TagDataText, 'type'> {
|
|
84
|
+
export interface TagDataEmoji extends Omit<TagDataText, 'type'> {
|
|
85
85
|
value: string;
|
|
86
86
|
type: Extract<TagType, 'emoji'>;
|
|
87
87
|
collection: EmojiCollection;
|
|
88
88
|
}
|
|
89
|
-
interface TagDataShortLink extends Omit<TagDataText, 'type'> {
|
|
89
|
+
export interface TagDataShortLink extends Omit<TagDataText, 'type'> {
|
|
90
90
|
value: string;
|
|
91
91
|
type: Extract<TagType, 'shortlink'>;
|
|
92
92
|
shortlinkType: ShortLinkType;
|
|
@@ -100,6 +100,7 @@ export interface EmojiTag {
|
|
|
100
100
|
export type PatternHandler = (match: RegExpExecArray) => {
|
|
101
101
|
isValid: boolean;
|
|
102
102
|
tag: string;
|
|
103
|
+
tagData: TagDataCustomize | undefined;
|
|
103
104
|
};
|
|
104
105
|
export interface PatternHandlerWrapper {
|
|
105
106
|
pattern: string;
|
|
@@ -107,4 +108,3 @@ export interface PatternHandlerWrapper {
|
|
|
107
108
|
acceptablePattern: AcceptablePattern;
|
|
108
109
|
handler: PatternHandler;
|
|
109
110
|
}
|
|
110
|
-
export {};
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { AcceptablePattern, EmojiCollection, EmojiTag, StatusType, TagType } from './types';
|
|
1
|
+
import { AcceptablePattern, EmojiCollection, EmojiTag, StatusType, TagDataCustomize, TagType } from './types';
|
|
2
2
|
/**
|
|
3
3
|
* Parses the input string and replaces matching patterns with processed tags.
|
|
4
4
|
* This function iterates over predefined regex patterns and replaces each match
|
|
@@ -43,6 +43,26 @@ export declare const getImageSourceViberEmoji: (fileName?: string) => any;
|
|
|
43
43
|
*/
|
|
44
44
|
export declare const emojiManufacturer: (text: string, collectionType: EmojiCollection) => string[];
|
|
45
45
|
export declare const getEmojiTag: ({ src, emoji, code }: EmojiTag) => string;
|
|
46
|
-
export declare const getStyledTags: () => string;
|
|
47
46
|
export declare const isPersonalizeTagType: (type: TagType) => boolean;
|
|
48
47
|
export declare const getBackgroundInputStatus: (status?: StatusType) => string;
|
|
48
|
+
export declare const getStyledTags: () => string;
|
|
49
|
+
export declare const generateTagContent: (params: {
|
|
50
|
+
tagData: TagDataCustomize;
|
|
51
|
+
content: string;
|
|
52
|
+
}) => string;
|
|
53
|
+
/**
|
|
54
|
+
* Unescapes specific HTML entities in a string.
|
|
55
|
+
*
|
|
56
|
+
* This function replaces the following HTML entities:
|
|
57
|
+
* - '"' with a double quote (")
|
|
58
|
+
* - ' ' with a space
|
|
59
|
+
* - 'nbsp;' with a space
|
|
60
|
+
*
|
|
61
|
+
* @param {string} str - The input string containing HTML entities to unescape.
|
|
62
|
+
* @returns {string} The input string with specified HTML entities unescaped.
|
|
63
|
+
*
|
|
64
|
+
* @example
|
|
65
|
+
* // returns 'Hello "world" with spaces'
|
|
66
|
+
* unescapeString('Hello "world" with spaces');
|
|
67
|
+
*/
|
|
68
|
+
export declare const unescapeString: (str: string) => string;
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
// Libraries
|
|
2
2
|
import stringReplaceToArray from 'string-replace-to-array';
|
|
3
3
|
// Constants
|
|
4
|
-
import { CONTENT_SOURCE_GROUP, CUSTOMER, CUSTOM_FN, EMOJI, EMOJI_COLLECTIONS, EVENT, OBJECT_WIDGET, PREFIX_PATTERN_LINE_MESSAGE, PROMOTION_CODE, TAG_COLOR, TAG_TYPE, VISITOR, } from './constants';
|
|
4
|
+
import { CONTENT_SOURCE_GROUP, CUSTOMER, CUSTOM_FN, EMOJI, EMOJI_COLLECTIONS, EVENT, OBJECT_WIDGET, PREFIX_PATTERN_LINE_MESSAGE, PROMOTION_CODE, SHORT_LINK, SHORT_LINK_TYPE, TAG_COLOR, TAG_TYPE, VISITOR, } from './constants';
|
|
5
5
|
import { iconsViber } from './iconsViber';
|
|
6
6
|
import { globalToken } from '@antscorp/antsomi-ui/es/constants';
|
|
7
7
|
// Utils
|
|
@@ -57,6 +57,10 @@ export const parseTagStringToTagify = (input, acceptableTagPattern) => {
|
|
|
57
57
|
matches.sort((a, b) => a.startIndex - b.startIndex);
|
|
58
58
|
// Iterate over sorted matches to build the final result
|
|
59
59
|
matches.forEach(({ startIndex, endIndex, replacement }) => {
|
|
60
|
+
// Some tags, such as Individual Shortlink can include custom tags.
|
|
61
|
+
const isInOtherTag = matches.some(compareTag => compareTag.startIndex < startIndex && endIndex < compareTag.endIndex);
|
|
62
|
+
if (isInOtherTag)
|
|
63
|
+
return;
|
|
60
64
|
// Add text before the current match
|
|
61
65
|
resultParts.push(input.slice(lastIndex, startIndex));
|
|
62
66
|
// Add the replacement string
|
|
@@ -131,7 +135,7 @@ export function convertInputStringToOriginal(input) {
|
|
|
131
135
|
}
|
|
132
136
|
return formatTag(parsedTag);
|
|
133
137
|
});
|
|
134
|
-
return result
|
|
138
|
+
return result; // Remove any trailing whitespace
|
|
135
139
|
}
|
|
136
140
|
export const getLinkLineURLImage = (productId = '', code = '') => `https://stickershop.line-scdn.net/sticonshop/v1/sticon/${productId}/android/${code}.png?detect-emoji=line-message&v=1`;
|
|
137
141
|
export const getImageSourceViberEmoji = (fileName = '') => {
|
|
@@ -310,23 +314,6 @@ export const getEmojiTag = ({ src, emoji, code }) => `
|
|
|
310
314
|
height="16px"
|
|
311
315
|
style="transform: translateY(3.5px); cursor: text;"
|
|
312
316
|
/>`;
|
|
313
|
-
export const getStyledTags = () => {
|
|
314
|
-
const styledTags = Object.values(TAG_TYPE).map(type => {
|
|
315
|
-
if (type === EMOJI) {
|
|
316
|
-
return `
|
|
317
|
-
&[data-tag-type='${EMOJI}'] {
|
|
318
|
-
padding: 0;
|
|
319
|
-
}
|
|
320
|
-
`;
|
|
321
|
-
}
|
|
322
|
-
return `
|
|
323
|
-
&[data-tag-type='${type}'] {
|
|
324
|
-
background: ${TAG_COLOR[type]};
|
|
325
|
-
}
|
|
326
|
-
`;
|
|
327
|
-
});
|
|
328
|
-
return styledTags.join('');
|
|
329
|
-
};
|
|
330
317
|
export const isPersonalizeTagType = (type) => [
|
|
331
318
|
CUSTOMER,
|
|
332
319
|
VISITOR,
|
|
@@ -349,3 +336,98 @@ export const getBackgroundInputStatus = (status) => {
|
|
|
349
336
|
}
|
|
350
337
|
}
|
|
351
338
|
};
|
|
339
|
+
export const getStyledTags = () => {
|
|
340
|
+
const getBackgroundColor = (tag) => {
|
|
341
|
+
const { type } = tag;
|
|
342
|
+
switch (type) {
|
|
343
|
+
case TAG_TYPE.SHORT_LINK: {
|
|
344
|
+
const { shortlinkType } = tag;
|
|
345
|
+
if (!shortlinkType)
|
|
346
|
+
break;
|
|
347
|
+
return TAG_COLOR[SHORT_LINK][shortlinkType];
|
|
348
|
+
}
|
|
349
|
+
default: {
|
|
350
|
+
if (!type)
|
|
351
|
+
return 'white';
|
|
352
|
+
return TAG_COLOR[type];
|
|
353
|
+
}
|
|
354
|
+
}
|
|
355
|
+
return null;
|
|
356
|
+
};
|
|
357
|
+
const backgroundStyles = Object.values(TAG_TYPE)
|
|
358
|
+
.map(type => {
|
|
359
|
+
const background = getBackgroundColor({ type });
|
|
360
|
+
if (!background)
|
|
361
|
+
return '';
|
|
362
|
+
return `
|
|
363
|
+
&[data-tag-type~='${type}'] {
|
|
364
|
+
background: ${getBackgroundColor({ type })};
|
|
365
|
+
};
|
|
366
|
+
`;
|
|
367
|
+
})
|
|
368
|
+
.join(' ');
|
|
369
|
+
return `
|
|
370
|
+
${backgroundStyles}
|
|
371
|
+
|
|
372
|
+
&[data-tag-type~='${EMOJI}'] {
|
|
373
|
+
padding: 0;
|
|
374
|
+
};
|
|
375
|
+
|
|
376
|
+
&[data-tag-${TAG_TYPE.SHORT_LINK}-type~='${SHORT_LINK_TYPE.INDIVIDUAL}'] {
|
|
377
|
+
background: ${getBackgroundColor({
|
|
378
|
+
type: TAG_TYPE.SHORT_LINK,
|
|
379
|
+
shortlinkType: SHORT_LINK_TYPE.INDIVIDUAL,
|
|
380
|
+
})};
|
|
381
|
+
};
|
|
382
|
+
|
|
383
|
+
&[data-tag-${TAG_TYPE.SHORT_LINK}-type~='${SHORT_LINK_TYPE.GENERAL}'] {
|
|
384
|
+
background: ${getBackgroundColor({
|
|
385
|
+
type: TAG_TYPE.SHORT_LINK,
|
|
386
|
+
shortlinkType: SHORT_LINK_TYPE.GENERAL,
|
|
387
|
+
})};
|
|
388
|
+
};
|
|
389
|
+
`;
|
|
390
|
+
};
|
|
391
|
+
export const generateTagContent = (params) => {
|
|
392
|
+
const { tagData, content } = params;
|
|
393
|
+
let dataAttrsString = '';
|
|
394
|
+
const dataAttrs = new Map([['tag-type', tagData.type]]);
|
|
395
|
+
if (tagData.type === TAG_TYPE.SHORT_LINK) {
|
|
396
|
+
const { shortlinkType } = tagData;
|
|
397
|
+
dataAttrs.set(`tag-${TAG_TYPE.SHORT_LINK}-type`, shortlinkType);
|
|
398
|
+
}
|
|
399
|
+
dataAttrs.forEach((value, key) => {
|
|
400
|
+
dataAttrsString = dataAttrsString.concat(` data-${key}="${value}"`);
|
|
401
|
+
});
|
|
402
|
+
return `
|
|
403
|
+
<div ${dataAttrsString}>
|
|
404
|
+
${content}
|
|
405
|
+
</div>
|
|
406
|
+
`;
|
|
407
|
+
};
|
|
408
|
+
/**
|
|
409
|
+
* Unescapes specific HTML entities in a string.
|
|
410
|
+
*
|
|
411
|
+
* This function replaces the following HTML entities:
|
|
412
|
+
* - '"' with a double quote (")
|
|
413
|
+
* - ' ' with a space
|
|
414
|
+
* - 'nbsp;' with a space
|
|
415
|
+
*
|
|
416
|
+
* @param {string} str - The input string containing HTML entities to unescape.
|
|
417
|
+
* @returns {string} The input string with specified HTML entities unescaped.
|
|
418
|
+
*
|
|
419
|
+
* @example
|
|
420
|
+
* // returns 'Hello "world" with spaces'
|
|
421
|
+
* unescapeString('Hello "world" with spaces');
|
|
422
|
+
*/
|
|
423
|
+
export const unescapeString = (str) => str.replace(/"| |nbsp;/gm, (match) => {
|
|
424
|
+
switch (match) {
|
|
425
|
+
case '"':
|
|
426
|
+
return '"';
|
|
427
|
+
case ' ':
|
|
428
|
+
case 'nbsp;':
|
|
429
|
+
return ' ';
|
|
430
|
+
default:
|
|
431
|
+
return match;
|
|
432
|
+
}
|
|
433
|
+
});
|
|
@@ -2291,6 +2291,7 @@
|
|
|
2291
2291
|
"_BLCK_OTP_EVENT_TRIGGER": "Event Trigger",
|
|
2292
2292
|
"_BLCK_OTP_EVENT": "Event",
|
|
2293
2293
|
"_BLCK_OTP_EVENT_SOURCE": "Event Source",
|
|
2294
|
+
"_CHANNEL_CUSTOM_API": "Custom Channel",
|
|
2294
2295
|
"_CHANNEL_DES_WEB": "Dynamically tailors website content based on user behavior and preferences, optimizing engagement and conversion rates",
|
|
2295
2296
|
"_CHANNEL_DES_WEB_NOTI": "Send real-time messages to engage website visitors, fostering timely interactions and conversions",
|
|
2296
2297
|
"_CHANNEL_DES_APP_NOTI": "Send immediate notifications exclusively to mobile apps, fostering instant engagement and interaction",
|
|
@@ -2655,8 +2656,8 @@
|
|
|
2655
2656
|
"_COOKIE_DM_INSTRUCTION": "Instruction",
|
|
2656
2657
|
"_COOKIE_DM_DEFINITION_1": "The cookie domain allows you to specify a domain where tracking cookies will be set, ensuring consistent cross-subdomain tracking and preventing fragmented audience profiles.",
|
|
2657
2658
|
"_COOKIE_DM_INSTRUCTION_1_SUM": "Identify the Primary Domain: ",
|
|
2658
|
-
"_COOKIE_DM_INSTRUCTION_1_DES_1": "This is the base domain for all subdomains you want to track. ",
|
|
2659
|
-
"_COOKIE_DM_INSTRUCTION_1_DES_2": "Example: {{x}}",
|
|
2659
|
+
"_COOKIE_DM_INSTRUCTION_1_DES_1": "This is the base domain for all subdomains you want to track. \n",
|
|
2660
|
+
"_COOKIE_DM_INSTRUCTION_1_DES_2": "This is the base domain for all subdomains you want to track. Example: {{x}}",
|
|
2660
2661
|
"_COOKIE_DM_INSTRUCTION_2_SUM": "Configure the Cookie Domain:",
|
|
2661
2662
|
"_COOKIE_DM_INSTRUCTION_2_DES_1": "Input {{x}} to track data across all subdomains (eg: {{y}} or {{z}})",
|
|
2662
2663
|
"_ZALO_TEMP_SELECT_1": "Various styles by Zalo Official Account",
|
package/es/locales/i18n.d.ts
CHANGED
|
@@ -2293,6 +2293,7 @@ export declare const translationsJson: {
|
|
|
2293
2293
|
_BLCK_OTP_EVENT_TRIGGER: string;
|
|
2294
2294
|
_BLCK_OTP_EVENT: string;
|
|
2295
2295
|
_BLCK_OTP_EVENT_SOURCE: string;
|
|
2296
|
+
_CHANNEL_CUSTOM_API: string;
|
|
2296
2297
|
_CHANNEL_DES_WEB: string;
|
|
2297
2298
|
_CHANNEL_DES_WEB_NOTI: string;
|
|
2298
2299
|
_CHANNEL_DES_APP_NOTI: string;
|
|
@@ -5644,6 +5645,7 @@ export declare const translationsJson: {
|
|
|
5644
5645
|
_BLCK_OTP_EVENT_TRIGGER: string;
|
|
5645
5646
|
_BLCK_OTP_EVENT: string;
|
|
5646
5647
|
_BLCK_OTP_EVENT_SOURCE: string;
|
|
5648
|
+
_CHANNEL_CUSTOM_API: string;
|
|
5647
5649
|
_CHANNEL_DES_WEB: string;
|
|
5648
5650
|
_CHANNEL_DES_WEB_NOTI: string;
|
|
5649
5651
|
_CHANNEL_DES_APP_NOTI: string;
|
|
@@ -8534,6 +8536,7 @@ export declare const translationsJson: {
|
|
|
8534
8536
|
_BLCK_OTP_EVENT_TRIGGER: string;
|
|
8535
8537
|
_BLCK_OTP_EVENT: string;
|
|
8536
8538
|
_BLCK_OTP_EVENT_SOURCE: string;
|
|
8539
|
+
_CHANNEL_CUSTOM_API: string;
|
|
8537
8540
|
_CHANNEL_DES_WEB: string;
|
|
8538
8541
|
_CHANNEL_DES_WEB_NOTI: string;
|
|
8539
8542
|
_CHANNEL_DES_APP_NOTI: string;
|