@capillarytech/creatives-library 8.0.224 → 8.0.225
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/package.json +1 -1
- package/utils/tagValidations.js +71 -126
- package/v2Components/FormBuilder/constants.js +8 -7
- package/v2Components/FormBuilder/index.js +2 -2
- package/v2Components/TestAndPreviewSlidebox/SendTestMessage.js +1 -7
- package/v2Components/TestAndPreviewSlidebox/index.js +20 -162
- package/v2Components/TestAndPreviewSlidebox/messages.js +0 -8
package/package.json
CHANGED
package/utils/tagValidations.js
CHANGED
|
@@ -19,6 +19,7 @@ const SUBTAGS = 'subtags';
|
|
|
19
19
|
* @param {Object} tagObject - The tagLookupMap.
|
|
20
20
|
*/
|
|
21
21
|
export const checkSupport = (response = {}, tagObject = {}, eventContextTags = [], isLiquidFlow = false, forwardedTags = {}) => {
|
|
22
|
+
|
|
22
23
|
const supportedList = [];
|
|
23
24
|
// Verifies the presence of the tag in the 'Add Labels' section.
|
|
24
25
|
// Incase of journey event context the tags won't be available in the tagObject(tagLookupMap).
|
|
@@ -39,7 +40,7 @@ export const checkSupport = (response = {}, tagObject = {}, eventContextTags = [
|
|
|
39
40
|
let updatedChildName = childName;
|
|
40
41
|
let updatedWithoutDotChildName = childName;
|
|
41
42
|
if (childName?.includes(".")) {
|
|
42
|
-
updatedChildName =
|
|
43
|
+
updatedChildName = "." + childName?.split(".")?.[1];
|
|
43
44
|
updatedWithoutDotChildName = childName?.split(".")?.[1];
|
|
44
45
|
}
|
|
45
46
|
if (tagObject?.[parentTag]) {
|
|
@@ -70,6 +71,7 @@ export const checkSupport = (response = {}, tagObject = {}, eventContextTags = [
|
|
|
70
71
|
if (item?.children?.length) {
|
|
71
72
|
processChildren(item?.name, item?.children);
|
|
72
73
|
}
|
|
74
|
+
|
|
73
75
|
}
|
|
74
76
|
|
|
75
77
|
|
|
@@ -78,19 +80,19 @@ export const checkSupport = (response = {}, tagObject = {}, eventContextTags = [
|
|
|
78
80
|
|
|
79
81
|
const handleForwardedTags = (forwardedTags) => {
|
|
80
82
|
const result = [];
|
|
81
|
-
Object.keys(forwardedTags).forEach(
|
|
83
|
+
Object.keys(forwardedTags).forEach(key => {
|
|
82
84
|
result.push(key); // Add the main key to the result array
|
|
83
|
-
|
|
85
|
+
|
|
84
86
|
// Check if there are subtags for the current key
|
|
85
87
|
if (forwardedTags[key].subtags) {
|
|
86
88
|
// If subtags exist, add all subtag keys to the result array
|
|
87
|
-
Object.keys(forwardedTags[key].subtags).forEach(
|
|
88
|
-
|
|
89
|
+
Object.keys(forwardedTags[key].subtags).forEach(subkey => {
|
|
90
|
+
result.push(subkey);
|
|
89
91
|
});
|
|
90
92
|
}
|
|
91
93
|
});
|
|
92
94
|
return result;
|
|
93
|
-
}
|
|
95
|
+
}
|
|
94
96
|
|
|
95
97
|
/**
|
|
96
98
|
* Extracts the names from the given data.
|
|
@@ -153,7 +155,7 @@ export const validateTags = ({
|
|
|
153
155
|
unsupportedTags: [],
|
|
154
156
|
isBraceError: false,
|
|
155
157
|
};
|
|
156
|
-
if
|
|
158
|
+
if(tags && tags.length) {
|
|
157
159
|
lodashForEach(tags, ({
|
|
158
160
|
definition: {
|
|
159
161
|
supportedModules,
|
|
@@ -214,7 +216,7 @@ export const validateTags = ({
|
|
|
214
216
|
// validations (eg button) are handled on valid property coming from the response.
|
|
215
217
|
response.isBraceError ? response.valid = false : response.valid = true;
|
|
216
218
|
return response;
|
|
217
|
-
}
|
|
219
|
+
}
|
|
218
220
|
|
|
219
221
|
/**
|
|
220
222
|
* Checks if the given tag is supported based on the injected tags.
|
|
@@ -231,25 +233,25 @@ export const checkIfSupportedTag = (checkingTag, injectedTags) => {
|
|
|
231
233
|
result = true;
|
|
232
234
|
}
|
|
233
235
|
});
|
|
234
|
-
|
|
236
|
+
|
|
235
237
|
return result;
|
|
236
|
-
}
|
|
238
|
+
}
|
|
237
239
|
|
|
238
240
|
const indexOfEnd = (targetString, string) => {
|
|
239
|
-
|
|
241
|
+
let io = targetString.indexOf(string);
|
|
240
242
|
return io == -1 ? -1 : io + string.length;
|
|
241
|
-
}
|
|
243
|
+
}
|
|
242
244
|
|
|
243
245
|
export const skipTags = (tag) => {
|
|
244
246
|
// If the tag contains the word "entryTrigger.", then it's an event context tag and should not be skipped.
|
|
245
247
|
if (tag?.match(ENTRY_TRIGGER_TAG_REGEX)) {
|
|
246
248
|
return false;
|
|
247
249
|
}
|
|
248
|
-
const regexGroups = ["dynamic_expiry_date_after_\\d+_days.FORMAT_\\d", "unsubscribe\\(#[a-zA-Z\\d]{6}\\)",
|
|
250
|
+
const regexGroups = ["dynamic_expiry_date_after_\\d+_days.FORMAT_\\d", "unsubscribe\\(#[a-zA-Z\\d]{6}\\)","Link_to_[a-zA-z]","SURVEY.*.TOKEN", "^[A-Za-z].*\\([a-zA-Z\\d]*\\)"];
|
|
249
251
|
let skipped = false;
|
|
250
252
|
lodashForEach(regexGroups, (group) => {
|
|
251
253
|
const groupRegex = new RegExp(group, "g");
|
|
252
|
-
|
|
254
|
+
let match = groupRegex.exec(tag);
|
|
253
255
|
if (match !== null ) {
|
|
254
256
|
skipped = true;
|
|
255
257
|
return true;
|
|
@@ -257,7 +259,7 @@ export const skipTags = (tag) => {
|
|
|
257
259
|
return true;
|
|
258
260
|
});
|
|
259
261
|
return skipped;
|
|
260
|
-
}
|
|
262
|
+
}
|
|
261
263
|
|
|
262
264
|
export const transformInjectedTags = (tags) => {
|
|
263
265
|
lodashForEach(tags, (tag) => {
|
|
@@ -272,100 +274,35 @@ export const transformInjectedTags = (tags) => {
|
|
|
272
274
|
if (subKey !== '') {
|
|
273
275
|
temp['tag-header'] = true;
|
|
274
276
|
if (subKey !== SUBTAGS) {
|
|
275
|
-
temp.subtags =
|
|
277
|
+
temp.subtags =lodashCloneDeep(temp[subKey]);
|
|
276
278
|
delete temp[subKey];
|
|
277
279
|
}
|
|
278
280
|
temp.subtags = transformInjectedTags(temp.subtags);
|
|
279
281
|
}
|
|
280
282
|
});
|
|
281
283
|
return tags;
|
|
282
|
-
}
|
|
284
|
+
}
|
|
283
285
|
|
|
284
286
|
//checks if the opening curly brackets have corresponding closing brackets
|
|
285
287
|
export const validateIfTagClosed = (value) => {
|
|
286
288
|
if (value.includes("{{{{") || value.includes("}}}}")) {
|
|
287
289
|
return false;
|
|
288
290
|
}
|
|
289
|
-
|
|
290
|
-
|
|
291
|
-
|
|
291
|
+
let regex1 = /{{.*?}}/g;
|
|
292
|
+
let regex2 = /{{/g;
|
|
293
|
+
let regex3 = /}}/g;
|
|
292
294
|
|
|
293
|
-
|
|
294
|
-
|
|
295
|
-
|
|
295
|
+
let l1 = value.match(regex1)?.length;
|
|
296
|
+
let l2 = value.match(regex2)?.length;
|
|
297
|
+
let l3 = value.match(regex3)?.length;
|
|
296
298
|
|
|
297
299
|
return (l1 == l2 && l2 == l3 && l1 == l3);
|
|
298
|
-
|
|
299
|
-
|
|
300
|
-
/**
|
|
301
|
-
* Validates tag format: ensures tags are in format {{tag_name}} and checks for invalid patterns
|
|
302
|
-
* Validates against:
|
|
303
|
-
* - Single braces like {tag} (must be {{tag}})
|
|
304
|
-
* - Invalid patterns like {{first or first}}, {{first and first}}
|
|
305
|
-
* - Empty tag names
|
|
306
|
-
* - Unclosed single braces within tag names
|
|
307
|
-
* @param {string} textContent - The text content to validate
|
|
308
|
-
* @returns {boolean} - True if all tags have valid format, false otherwise
|
|
309
|
-
*/
|
|
310
|
-
export const validateTagFormat = (textContent) => {
|
|
311
|
-
// Find all potential tag patterns {{tag_name}}
|
|
312
|
-
const tagPattern = /{{[^}]*}}/g;
|
|
313
|
-
const matches = textContent.match(tagPattern) || [];
|
|
314
|
-
|
|
315
|
-
// Remove all valid {{tag}} patterns from content to check for invalid braces
|
|
316
|
-
let contentWithoutValidTags = textContent;
|
|
317
|
-
matches.forEach((match) => {
|
|
318
|
-
contentWithoutValidTags = contentWithoutValidTags.replace(match, '');
|
|
319
|
-
});
|
|
320
|
-
|
|
321
|
-
// Check if there are any remaining braces (single braces or unclosed braces)
|
|
322
|
-
// These would be invalid patterns like {tag}, {first, first}, etc.
|
|
323
|
-
if (contentWithoutValidTags.includes('{') || contentWithoutValidTags.includes('}')) {
|
|
324
|
-
return false;
|
|
325
|
-
}
|
|
326
|
-
|
|
327
|
-
// Check each tag for valid format
|
|
328
|
-
const allTagsValid = matches.every((match) => {
|
|
329
|
-
// Valid tag format: {{tag_name}} - must start with {{ and end with }}
|
|
330
|
-
if (!match.startsWith('{{') || !match.endsWith('}}')) {
|
|
331
|
-
return false;
|
|
332
|
-
}
|
|
333
|
-
|
|
334
|
-
// Extract tag name (content between {{ and }})
|
|
335
|
-
const tagName = match.slice(2, -2).trim();
|
|
336
|
-
|
|
337
|
-
// Tag name should not be empty
|
|
338
|
-
if (!tagName) {
|
|
339
|
-
return false;
|
|
340
|
-
}
|
|
341
|
-
|
|
342
|
-
// Check for invalid patterns in tag name
|
|
343
|
-
// Invalid patterns: "first or first", "first and first", etc.
|
|
344
|
-
const invalidPatterns = [
|
|
345
|
-
/\s+or\s+/i, // " or " as separate word (e.g., "first or first")
|
|
346
|
-
/\s+and\s+/i, // " and " as separate word
|
|
347
|
-
];
|
|
348
|
-
|
|
349
|
-
const hasInvalidPattern = invalidPatterns.some((pattern) => pattern.test(tagName));
|
|
350
|
-
if (hasInvalidPattern) {
|
|
351
|
-
return false;
|
|
352
|
-
}
|
|
353
|
-
|
|
354
|
-
// Check for unclosed single braces in tag name (e.g., {{first{name}})
|
|
355
|
-
const singleOpenBraces = (tagName.match(/{/g) || []).length;
|
|
356
|
-
const singleCloseBraces = (tagName.match(/}/g) || []).length;
|
|
357
|
-
if (singleOpenBraces !== singleCloseBraces) {
|
|
358
|
-
return false;
|
|
359
|
-
}
|
|
360
|
-
|
|
361
|
-
return true;
|
|
362
|
-
});
|
|
363
|
-
|
|
364
|
-
return allTagsValid;
|
|
300
|
+
|
|
365
301
|
};
|
|
366
302
|
|
|
367
303
|
//replaces encoded string with their respective characters
|
|
368
304
|
export const preprocessHtml = (content) => {
|
|
305
|
+
|
|
369
306
|
const replacements = {
|
|
370
307
|
"'": "'",
|
|
371
308
|
""": "'",
|
|
@@ -373,7 +310,7 @@ export const preprocessHtml = (content) => {
|
|
|
373
310
|
"&": "&",
|
|
374
311
|
"<": "<",
|
|
375
312
|
">": ">",
|
|
376
|
-
"\n": "",
|
|
313
|
+
"\n": "", // Handling newlines by replacing them with an empty string
|
|
377
314
|
};
|
|
378
315
|
|
|
379
316
|
|
|
@@ -387,22 +324,28 @@ export const preprocessHtml = (content) => {
|
|
|
387
324
|
});
|
|
388
325
|
|
|
389
326
|
// Step 2: Perform the standard replacements on the entire content
|
|
390
|
-
return contentWithStyleFixes?.replace(/'|"|&|<|>|"|\n/g,
|
|
327
|
+
return contentWithStyleFixes?.replace(/'|"|&|<|>|"|\n/g, match => replacements[match]);
|
|
391
328
|
};
|
|
392
329
|
|
|
393
330
|
//this is used to get the subtags from custom or extended tags
|
|
394
|
-
export const getTagMapValue = (object = {}) =>
|
|
395
|
-
|
|
396
|
-
|
|
397
|
-
|
|
398
|
-
|
|
399
|
-
|
|
400
|
-
|
|
401
|
-
|
|
402
|
-
|
|
403
|
-
|
|
404
|
-
|
|
405
|
-
|
|
331
|
+
export const getTagMapValue = (object = {}) => {
|
|
332
|
+
return Object.values(
|
|
333
|
+
object
|
|
334
|
+
).reduce((acc, current) => {
|
|
335
|
+
return { ...acc, ...current?.subtags ?? {} };
|
|
336
|
+
}, {});
|
|
337
|
+
};
|
|
338
|
+
|
|
339
|
+
export const getLoyaltyTagsMapValue = (object = {}) => {
|
|
340
|
+
return Object.entries(object).reduce((acc, [key, current]) => {
|
|
341
|
+
if (current?.subtags && Object.keys(current.subtags).length > 0) {
|
|
342
|
+
// If subtags exist → merge them
|
|
343
|
+
return { ...acc, ...(current.subtags ?? {}) };
|
|
344
|
+
}
|
|
345
|
+
// If no subtags → keep the tag itself
|
|
346
|
+
return { ...acc, [key]: current };
|
|
347
|
+
}, {});
|
|
348
|
+
};
|
|
406
349
|
|
|
407
350
|
|
|
408
351
|
/**
|
|
@@ -411,25 +354,27 @@ export const getLoyaltyTagsMapValue = (object = {}) => Object.entries(object).re
|
|
|
411
354
|
* @param {Object} object - The input object containing top-level keys with optional subtags.
|
|
412
355
|
* @returns {Object} - A flat map containing all top-level keys and their subtags.
|
|
413
356
|
*/
|
|
414
|
-
export const getForwardedMapValues = (object = {}) =>
|
|
415
|
-
|
|
416
|
-
|
|
417
|
-
|
|
418
|
-
|
|
419
|
-
|
|
420
|
-
|
|
421
|
-
|
|
422
|
-
|
|
423
|
-
|
|
424
|
-
|
|
425
|
-
|
|
426
|
-
|
|
427
|
-
|
|
428
|
-
|
|
429
|
-
|
|
430
|
-
|
|
431
|
-
|
|
432
|
-
|
|
433
|
-
|
|
434
|
-
|
|
435
|
-
|
|
357
|
+
export const getForwardedMapValues = (object = {}) => {
|
|
358
|
+
return Object?.entries(object)?.reduce((acc, [key, current]) => {
|
|
359
|
+
// Check if current has 'subtags' and it's an object
|
|
360
|
+
if (current && current?.subtags && typeof current?.subtags === 'object') {
|
|
361
|
+
// Add the top-level key with its 'name' and 'desc'
|
|
362
|
+
acc[key] = {
|
|
363
|
+
name: current?.name,
|
|
364
|
+
desc: current?.desc,
|
|
365
|
+
};
|
|
366
|
+
|
|
367
|
+
// Merge the subtags into the accumulator
|
|
368
|
+
acc = { ...acc, ...current?.subtags };
|
|
369
|
+
} else if (current && typeof current === 'object') {
|
|
370
|
+
// If no 'subtags', add the top-level key with its 'name' and 'desc'
|
|
371
|
+
acc[key] = {
|
|
372
|
+
name: current?.name,
|
|
373
|
+
desc: current?.desc,
|
|
374
|
+
};
|
|
375
|
+
}
|
|
376
|
+
|
|
377
|
+
// If the current entry is not an object or lacks 'name'/'desc', skip it
|
|
378
|
+
return acc;
|
|
379
|
+
}, {});
|
|
380
|
+
};
|
|
@@ -4,10 +4,11 @@ export const UPLOAD = 'upload';
|
|
|
4
4
|
export const USE_EDITOR = 'useEditor';
|
|
5
5
|
export const COPY_PRIMARY_LANGUAGE = 'copyPrimaryLanguage';
|
|
6
6
|
export const GLOBAL_CONVERT_OPTIONS = {
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
}
|
|
12
|
-
|
|
13
|
-
|
|
7
|
+
wordwrap: null,
|
|
8
|
+
selectors: [
|
|
9
|
+
...[1, 2, 3, 4, 5, 6].map((level) => ({
|
|
10
|
+
selector: `h${level}`,
|
|
11
|
+
options: { uppercase: false },
|
|
12
|
+
})),
|
|
13
|
+
],
|
|
14
|
+
};
|
|
@@ -54,7 +54,7 @@ import { containsBase64Images } from '../../utils/content';
|
|
|
54
54
|
import { SMS, MOBILE_PUSH, LINE, ENABLE_AI_SUGGESTIONS,AI_CONTENT_BOT_DISABLED, EMAIL, LIQUID_SUPPORTED_CHANNELS, INAPP } from '../../v2Containers/CreativesContainer/constants';
|
|
55
55
|
import globalMessages from '../../v2Containers/Cap/messages';
|
|
56
56
|
import { convert } from 'html-to-text';
|
|
57
|
-
import { OUTBOUND, ADD_LANGUAGE, UPLOAD, USE_EDITOR, COPY_PRIMARY_LANGUAGE } from './constants';
|
|
57
|
+
import { OUTBOUND, ADD_LANGUAGE, UPLOAD, USE_EDITOR, COPY_PRIMARY_LANGUAGE, GLOBAL_CONVERT_OPTIONS } from './constants';
|
|
58
58
|
import { GET_TRANSLATION_MAPPED } from '../../constants/unified';
|
|
59
59
|
import moment from 'moment';
|
|
60
60
|
import { CUSTOMER_BARCODE_TAG , COPY_OF, ENTRY_TRIGGER_TAG_REGEX} from '../../constants/unified';
|
|
@@ -1524,7 +1524,7 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
|
|
|
1524
1524
|
response.unsupportedTags = [];
|
|
1525
1525
|
response.isBraceError = false;
|
|
1526
1526
|
response.isContentEmpty = false;
|
|
1527
|
-
const contentForValidation = isEmail ? convert(content) : content ;
|
|
1527
|
+
const contentForValidation = isEmail ? convert(content, GLOBAL_CONVERT_OPTIONS) : content ;
|
|
1528
1528
|
if(tags && tags.length) {
|
|
1529
1529
|
_.forEach(tags, (tag) => {
|
|
1530
1530
|
_.forEach(tag.definition.supportedModules, (module) => {
|
|
@@ -19,7 +19,6 @@ const SendTestMessage = ({
|
|
|
19
19
|
formData,
|
|
20
20
|
isSendingTestMessage,
|
|
21
21
|
formatMessage,
|
|
22
|
-
isContentValid = true,
|
|
23
22
|
}) => (
|
|
24
23
|
<CapStepsAccordian
|
|
25
24
|
showNumberSteps={false}
|
|
@@ -44,11 +43,7 @@ const SendTestMessage = ({
|
|
|
44
43
|
multiple
|
|
45
44
|
placeholder={formatMessage(messages.testCustomersPlaceholder)}
|
|
46
45
|
/>
|
|
47
|
-
<CapButton
|
|
48
|
-
onClick={handleSendTestMessage}
|
|
49
|
-
disabled={isEmpty(selectedTestEntities) || (isEmpty(formData['template-subject']) && isEmpty(formData[0]?.['template-subject'])) || isSendingTestMessage || !isContentValid}
|
|
50
|
-
title={!isContentValid ? formatMessage(messages.contentInvalid) : ''}
|
|
51
|
-
>
|
|
46
|
+
<CapButton onClick={handleSendTestMessage} disabled={isEmpty(selectedTestEntities) || (isEmpty(formData['template-subject']) && isEmpty(formData[0]?.['template-subject'])) || isSendingTestMessage}>
|
|
52
47
|
<FormattedMessage {...messages.sendTestButton} />
|
|
53
48
|
</CapButton>
|
|
54
49
|
</CapRow>),
|
|
@@ -68,7 +63,6 @@ SendTestMessage.propTypes = {
|
|
|
68
63
|
formData: PropTypes.object.isRequired,
|
|
69
64
|
isSendingTestMessage: PropTypes.bool.isRequired,
|
|
70
65
|
formatMessage: PropTypes.func.isRequired,
|
|
71
|
-
isContentValid: PropTypes.bool,
|
|
72
66
|
};
|
|
73
67
|
|
|
74
68
|
export default SendTestMessage;
|
|
@@ -52,7 +52,6 @@ import {
|
|
|
52
52
|
INITIAL_PAYLOAD, EMAIL, TEST, DESKTOP, ACTIVE, MOBILE,
|
|
53
53
|
} from './constants';
|
|
54
54
|
import { GLOBAL_CONVERT_OPTIONS } from '../FormBuilder/constants';
|
|
55
|
-
import { validateIfTagClosed, validateTagFormat } from '../../utils/tagValidations';
|
|
56
55
|
|
|
57
56
|
const TestAndPreviewSlidebox = (props) => {
|
|
58
57
|
const {
|
|
@@ -104,58 +103,10 @@ const TestAndPreviewSlidebox = (props) => {
|
|
|
104
103
|
const [selectedTestEntities, setSelectedTestEntities] = useState([]);
|
|
105
104
|
const [beeContent, setBeeContent] = useState(''); // Track BEE editor content separately
|
|
106
105
|
const previousBeeContentRef = useRef(''); // Track previous BEE content to prevent unnecessary updates
|
|
107
|
-
const [isContentValid, setIsContentValid] = useState(true); // Track if content tags are valid
|
|
108
106
|
|
|
109
107
|
const isUpdatePreviewDisabled = useMemo(() => (
|
|
110
|
-
requiredTags.some((tag) => !customValues[tag.fullPath])
|
|
111
|
-
), [requiredTags, customValues
|
|
112
|
-
|
|
113
|
-
/**
|
|
114
|
-
* Validates tags in content: checks for proper tag format and balanced braces
|
|
115
|
-
* Uses validateIfTagClosed and validateTagFormat from utils/tagValidations
|
|
116
|
-
* @param {string} content - The HTML content to validate
|
|
117
|
-
* @returns {boolean} - True if content is valid, false otherwise
|
|
118
|
-
*/
|
|
119
|
-
const validateContentTags = (content) => {
|
|
120
|
-
if (!content) return true;
|
|
121
|
-
|
|
122
|
-
try {
|
|
123
|
-
// Convert HTML to text (same as what's used for tag extraction)
|
|
124
|
-
// This ensures we validate the same content that will be used for tag extraction
|
|
125
|
-
const textContent = convert(content, GLOBAL_CONVERT_OPTIONS);
|
|
126
|
-
|
|
127
|
-
// Check if there are any braces in the content
|
|
128
|
-
const hasBraces = textContent.includes('{') || textContent.includes('}');
|
|
129
|
-
|
|
130
|
-
// If no braces exist, content is valid (no tag validation needed)
|
|
131
|
-
if (!hasBraces) {
|
|
132
|
-
return true;
|
|
133
|
-
}
|
|
134
|
-
|
|
135
|
-
// First check if tags are properly closed using the utility function from tagValidations
|
|
136
|
-
// This validates that all opening braces have corresponding closing braces
|
|
137
|
-
if (!validateIfTagClosed(textContent)) {
|
|
138
|
-
return false;
|
|
139
|
-
}
|
|
140
|
-
|
|
141
|
-
// Now validate tag format: tags must be in format {{tag_name}}
|
|
142
|
-
return validateTagFormat(textContent);
|
|
143
|
-
} catch (error) {
|
|
144
|
-
// If conversion fails, fall back to validating the original content
|
|
145
|
-
console.warn('Error converting content for validation:', error);
|
|
146
|
-
const hasBraces = content.includes('{') || content.includes('}');
|
|
147
|
-
if (!hasBraces) {
|
|
148
|
-
return true;
|
|
149
|
-
}
|
|
150
|
-
|
|
151
|
-
// Apply same validation to original content
|
|
152
|
-
if (!validateIfTagClosed(content)) {
|
|
153
|
-
return false;
|
|
154
|
-
}
|
|
155
|
-
|
|
156
|
-
return validateTagFormat(content);
|
|
157
|
-
}
|
|
158
|
-
};
|
|
108
|
+
requiredTags.some((tag) => !customValues[tag.fullPath])
|
|
109
|
+
), [requiredTags, customValues]);
|
|
159
110
|
|
|
160
111
|
// Function to resolve tags in text with custom values
|
|
161
112
|
const resolveTagsInText = (text, tagValues) => {
|
|
@@ -202,10 +153,6 @@ const TestAndPreviewSlidebox = (props) => {
|
|
|
202
153
|
if (existingContent && existingContent.trim() !== '') {
|
|
203
154
|
// We already have content, update local state only if it's different
|
|
204
155
|
if (existingContent !== previousBeeContentRef.current) {
|
|
205
|
-
// Validate content tags for BEE editor
|
|
206
|
-
const isValid = validateContentTags(existingContent);
|
|
207
|
-
setIsContentValid(isValid);
|
|
208
|
-
|
|
209
156
|
previousBeeContentRef.current = existingContent;
|
|
210
157
|
setBeeContent(existingContent);
|
|
211
158
|
setPreviewDataHtml({
|
|
@@ -239,10 +186,6 @@ const TestAndPreviewSlidebox = (props) => {
|
|
|
239
186
|
}
|
|
240
187
|
|
|
241
188
|
if (htmlFile) {
|
|
242
|
-
// Validate content tags
|
|
243
|
-
const isValid = validateContentTags(htmlFile);
|
|
244
|
-
setIsContentValid(isValid);
|
|
245
|
-
|
|
246
189
|
// Update our states
|
|
247
190
|
previousBeeContentRef.current = htmlFile;
|
|
248
191
|
setBeeContent(htmlFile);
|
|
@@ -251,16 +194,9 @@ const TestAndPreviewSlidebox = (props) => {
|
|
|
251
194
|
resolvedTitle: formData['template-subject'] || ''
|
|
252
195
|
});
|
|
253
196
|
|
|
254
|
-
//
|
|
255
|
-
|
|
256
|
-
|
|
257
|
-
actions.extractTagsRequested(formData['template-subject'] || '', payloadContent);
|
|
258
|
-
} else {
|
|
259
|
-
// Show error notification for invalid content
|
|
260
|
-
CapNotification.error({
|
|
261
|
-
message: formatMessage(messages.contentInvalid),
|
|
262
|
-
});
|
|
263
|
-
}
|
|
197
|
+
// Always extract tags when content changes
|
|
198
|
+
const payloadContent = convert(htmlFile, GLOBAL_CONVERT_OPTIONS);
|
|
199
|
+
actions.extractTagsRequested(formData['template-subject'] || '', payloadContent);
|
|
264
200
|
}
|
|
265
201
|
|
|
266
202
|
// Restore original handler
|
|
@@ -275,45 +211,23 @@ const TestAndPreviewSlidebox = (props) => {
|
|
|
275
211
|
const templateContent = currentTabData?.[activeTab]?.['template-content'];
|
|
276
212
|
|
|
277
213
|
if (templateContent) {
|
|
278
|
-
// Validate content tags
|
|
279
|
-
const isValid = validateContentTags(templateContent);
|
|
280
|
-
setIsContentValid(isValid);
|
|
281
|
-
|
|
282
214
|
// Update preview with initial content
|
|
283
215
|
setPreviewDataHtml({
|
|
284
216
|
resolvedBody: templateContent,
|
|
285
217
|
resolvedTitle: formData['template-subject'] || ''
|
|
286
218
|
});
|
|
287
219
|
|
|
288
|
-
//
|
|
289
|
-
|
|
290
|
-
|
|
291
|
-
actions.extractTagsRequested(formData['template-subject'] || '', payloadContent);
|
|
292
|
-
} else {
|
|
293
|
-
// Show error notification for invalid content
|
|
294
|
-
CapNotification.error({
|
|
295
|
-
message: formatMessage(messages.contentInvalid),
|
|
296
|
-
});
|
|
297
|
-
}
|
|
220
|
+
// Always extract tags when showing
|
|
221
|
+
const payloadContent = convert(templateContent, GLOBAL_CONVERT_OPTIONS);
|
|
222
|
+
actions.extractTagsRequested(formData['template-subject'] || '', payloadContent);
|
|
298
223
|
} else {
|
|
299
224
|
// Fallback to content prop if no template content
|
|
300
|
-
const
|
|
301
|
-
|
|
302
|
-
|
|
303
|
-
|
|
304
|
-
//
|
|
305
|
-
|
|
306
|
-
const payloadContent = convert(
|
|
307
|
-
contentToValidate,
|
|
308
|
-
GLOBAL_CONVERT_OPTIONS
|
|
309
|
-
);
|
|
310
|
-
actions.extractTagsRequested(formData['template-subject'] || '', payloadContent);
|
|
311
|
-
} else {
|
|
312
|
-
// Show error notification for invalid content
|
|
313
|
-
CapNotification.error({
|
|
314
|
-
message: formatMessage(messages.contentInvalid),
|
|
315
|
-
});
|
|
316
|
-
}
|
|
225
|
+
const payloadContent = convert(
|
|
226
|
+
getCurrentContent,
|
|
227
|
+
GLOBAL_CONVERT_OPTIONS
|
|
228
|
+
);
|
|
229
|
+
// Always extract tags when showing
|
|
230
|
+
actions.extractTagsRequested(formData['template-subject'] || '', payloadContent);
|
|
317
231
|
}
|
|
318
232
|
}
|
|
319
233
|
|
|
@@ -329,28 +243,17 @@ const TestAndPreviewSlidebox = (props) => {
|
|
|
329
243
|
const isDragDrop = currentTabData?.[activeTab]?.is_drag_drop;
|
|
330
244
|
const templateContent = currentTabData?.[activeTab]?.['template-content'];
|
|
331
245
|
|
|
332
|
-
if (templateContent && templateContent.trim() !== ''
|
|
333
|
-
// Common function to handle content update
|
|
246
|
+
if (templateContent && templateContent.trim() !== '') {
|
|
247
|
+
// Common function to handle content update
|
|
334
248
|
const handleContentUpdate = (content) => {
|
|
335
|
-
// Validate content tags for each update
|
|
336
|
-
const isValid = validateContentTags(content);
|
|
337
|
-
setIsContentValid(isValid);
|
|
338
|
-
|
|
339
249
|
setPreviewDataHtml({
|
|
340
250
|
resolvedBody: content,
|
|
341
251
|
resolvedTitle: formData['template-subject'] || ''
|
|
342
252
|
});
|
|
343
253
|
|
|
344
|
-
//
|
|
345
|
-
|
|
346
|
-
|
|
347
|
-
actions.extractTagsRequested(formData['template-subject'] || '', payloadContent);
|
|
348
|
-
} else {
|
|
349
|
-
// Show error notification for invalid content
|
|
350
|
-
CapNotification.error({
|
|
351
|
-
message: formatMessage(messages.contentInvalid),
|
|
352
|
-
});
|
|
353
|
-
}
|
|
254
|
+
// Extract tags from content
|
|
255
|
+
const payloadContent = convert(content, GLOBAL_CONVERT_OPTIONS);
|
|
256
|
+
actions.extractTagsRequested(formData['template-subject'] || '', payloadContent);
|
|
354
257
|
};
|
|
355
258
|
|
|
356
259
|
if (isDragDrop) {
|
|
@@ -384,7 +287,6 @@ const TestAndPreviewSlidebox = (props) => {
|
|
|
384
287
|
setTagsExtracted(false);
|
|
385
288
|
setPreviewDevice('desktop');
|
|
386
289
|
setSelectedTestEntities([]);
|
|
387
|
-
setIsContentValid(true);
|
|
388
290
|
actions.clearPrefilledValues();
|
|
389
291
|
}
|
|
390
292
|
}, [show]);
|
|
@@ -628,22 +530,6 @@ const TestAndPreviewSlidebox = (props) => {
|
|
|
628
530
|
|
|
629
531
|
// Handle update preview
|
|
630
532
|
const handleUpdatePreview = async () => {
|
|
631
|
-
// Re-validate content to get latest state (in case liquid errors were fixed)
|
|
632
|
-
const currentTabData = formData[currentTab - 1];
|
|
633
|
-
const activeTab = currentTabData?.activeTab;
|
|
634
|
-
const templateContent = currentTabData?.[activeTab]?.['template-content'];
|
|
635
|
-
const contentToValidate = templateContent || getCurrentContent;
|
|
636
|
-
const isValid = validateContentTags(contentToValidate);
|
|
637
|
-
setIsContentValid(isValid);
|
|
638
|
-
|
|
639
|
-
// Check if content is valid before updating preview
|
|
640
|
-
if (!isValid) {
|
|
641
|
-
CapNotification.error({
|
|
642
|
-
message: formatMessage(messages.contentInvalid),
|
|
643
|
-
});
|
|
644
|
-
return;
|
|
645
|
-
}
|
|
646
|
-
|
|
647
533
|
try {
|
|
648
534
|
// Include unsubscribe tag if content contains it
|
|
649
535
|
const resolvedTags = { ...customValues };
|
|
@@ -673,20 +559,9 @@ const TestAndPreviewSlidebox = (props) => {
|
|
|
673
559
|
const currentTabData = formData[currentTab - 1];
|
|
674
560
|
const activeTab = currentTabData?.activeTab;
|
|
675
561
|
const templateContent = currentTabData?.[activeTab]?.['template-content'];
|
|
676
|
-
const content = templateContent || getCurrentContent;
|
|
677
|
-
|
|
678
|
-
// Validate content tags before extracting
|
|
679
|
-
const isValid = validateContentTags(content);
|
|
680
|
-
setIsContentValid(isValid);
|
|
681
|
-
|
|
682
|
-
if (!isValid) {
|
|
683
|
-
CapNotification.error({
|
|
684
|
-
message: formatMessage(messages.contentInvalid),
|
|
685
|
-
});
|
|
686
|
-
return;
|
|
687
|
-
}
|
|
688
562
|
|
|
689
563
|
// Check for personalization tags (excluding unsubscribe)
|
|
564
|
+
const content = templateContent || getCurrentContent;
|
|
690
565
|
const tags = content.match(/{{[^}]+}}/g) || [];
|
|
691
566
|
const hasPersonalizationTags = tags.some(tag => !tag.includes('unsubscribe'));
|
|
692
567
|
|
|
@@ -715,22 +590,6 @@ const TestAndPreviewSlidebox = (props) => {
|
|
|
715
590
|
};
|
|
716
591
|
|
|
717
592
|
const handleSendTestMessage = () => {
|
|
718
|
-
// Re-validate content to get latest state (in case liquid errors were fixed)
|
|
719
|
-
const currentTabData = formData[currentTab - 1];
|
|
720
|
-
const activeTab = currentTabData?.activeTab;
|
|
721
|
-
const templateContent = currentTabData?.[activeTab]?.['template-content'];
|
|
722
|
-
const contentToValidate = templateContent || getCurrentContent;
|
|
723
|
-
const isValid = validateContentTags(contentToValidate);
|
|
724
|
-
setIsContentValid(isValid);
|
|
725
|
-
|
|
726
|
-
// Check if content is valid before sending test message
|
|
727
|
-
if (!isValid) {
|
|
728
|
-
CapNotification.error({
|
|
729
|
-
message: formatMessage(messages.contentInvalid),
|
|
730
|
-
});
|
|
731
|
-
return;
|
|
732
|
-
}
|
|
733
|
-
|
|
734
593
|
const allUserIds = [];
|
|
735
594
|
selectedTestEntities.forEach((entityId) => {
|
|
736
595
|
const group = testGroups.find((g) => g.groupId === entityId);
|
|
@@ -826,7 +685,6 @@ const TestAndPreviewSlidebox = (props) => {
|
|
|
826
685
|
formData={formData}
|
|
827
686
|
isSendingTestMessage={isSendingTestMessage}
|
|
828
687
|
formatMessage={formatMessage}
|
|
829
|
-
isContentValid={isContentValid}
|
|
830
688
|
/>
|
|
831
689
|
);
|
|
832
690
|
|
|
@@ -144,12 +144,4 @@ export default defineMessages({
|
|
|
144
144
|
id: `${scope}.invalidJSON`,
|
|
145
145
|
defaultMessage: 'Invalid JSON input',
|
|
146
146
|
},
|
|
147
|
-
contentInvalid: {
|
|
148
|
-
id: `${scope}.contentInvalid`,
|
|
149
|
-
defaultMessage: 'Content is invalid. Please fix the tags in your content before testing or previewing.',
|
|
150
|
-
},
|
|
151
|
-
previewUpdateError: {
|
|
152
|
-
id: `${scope}.previewUpdateError`,
|
|
153
|
-
defaultMessage: 'Failed to update preview',
|
|
154
|
-
},
|
|
155
147
|
});
|