@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 CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@capillarytech/creatives-library",
3
3
  "author": "meharaj",
4
- "version": "8.0.224",
4
+ "version": "8.0.225",
5
5
  "description": "Capillary creatives ui",
6
6
  "main": "./index.js",
7
7
  "module": "./index.es.js",
@@ -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 = `.${childName?.split(".")?.[1]}`;
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((key) => {
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((subkey) => {
88
- result.push(subkey);
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 (tags && tags.length) {
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
- const io = targetString.indexOf(string);
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}\\)", "Link_to_[a-zA-z]", "SURVEY.*.TOKEN", "^[A-Za-z].*\\([a-zA-Z\\d]*\\)"];
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
- const match = groupRegex.exec(tag);
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 = lodashCloneDeep(temp[subKey]);
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
- const regex1 = /{{.*?}}/g;
290
- const regex2 = /{{/g;
291
- const regex3 = /}}/g;
291
+ let regex1 = /{{.*?}}/g;
292
+ let regex2 = /{{/g;
293
+ let regex3 = /}}/g;
292
294
 
293
- const l1 = value.match(regex1)?.length;
294
- const l2 = value.match(regex2)?.length;
295
- const l3 = value.match(regex3)?.length;
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
  "&lt;": "<",
375
312
  "&gt;": ">",
376
- "\n": "", // Handling newlines by replacing them with an empty string
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(/&#39;|&quot;|&amp;|&lt;|&gt;|"|\n/g, (match) => replacements[match]);
327
+ return contentWithStyleFixes?.replace(/&#39;|&quot;|&amp;|&lt;|&gt;|"|\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 = {}) => Object.values(
395
- object
396
- ).reduce((acc, current) => ({ ...acc, ...current?.subtags ?? {} }), {});
397
-
398
- export const getLoyaltyTagsMapValue = (object = {}) => Object.entries(object).reduce((acc, [key, current]) => {
399
- if (current?.subtags && Object.keys(current.subtags).length > 0) {
400
- // If subtags exist → merge them
401
- return { ...acc, ...(current.subtags ?? {}) };
402
- }
403
- // If no subtags keep the tag itself
404
- return { ...acc, [key]: current };
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 = {}) => Object?.entries(object)?.reduce((acc, [key, current]) => {
415
- // Check if current has 'subtags' and it's an object
416
- if (current && current?.subtags && typeof current?.subtags === 'object') {
417
- // Add the top-level key with its 'name' and 'desc'
418
- acc[key] = {
419
- name: current?.name,
420
- desc: current?.desc,
421
- };
422
-
423
- // Merge the subtags into the accumulator
424
- acc = { ...acc, ...current?.subtags };
425
- } else if (current && typeof current === 'object') {
426
- // If no 'subtags', add the top-level key with its 'name' and 'desc'
427
- acc[key] = {
428
- name: current?.name,
429
- desc: current?.desc,
430
- };
431
- }
432
-
433
- // If the current entry is not an object or lacks 'name'/'desc', skip it
434
- return acc;
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
- selectors: [
8
- ...[1, 2, 3, 4, 5, 6].map(level => ({
9
- selector: `h${level}`,
10
- options: { uppercase: false }
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]) || !isContentValid
111
- ), [requiredTags, customValues, isContentValid]);
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
- // Only extract tags if content is valid
255
- if (isValid) {
256
- const payloadContent = convert(htmlFile, GLOBAL_CONVERT_OPTIONS);
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
- // Only extract tags if content is valid
289
- if (isValid) {
290
- const payloadContent = convert(templateContent, GLOBAL_CONVERT_OPTIONS);
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 contentToValidate = getCurrentContent;
301
- const isValid = validateContentTags(contentToValidate);
302
- setIsContentValid(isValid);
303
-
304
- // Only extract tags if content is valid
305
- if (isValid) {
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() !== '' && show) {
333
- // Common function to handle content update with validation
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
- // Only extract tags if content is valid
345
- if (isValid) {
346
- const payloadContent = convert(content, GLOBAL_CONVERT_OPTIONS);
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
  });