@capillarytech/creatives-library 8.0.309 → 8.0.310

package/v2Containers/SmsWrapper/index.js

@@ -36,7 +36,6 @@ const SmsWrapper = (props) => {
     handleTestAndPreview,
     handleCloseTestAndPreview,
     isTestAndPreviewMode,
-    onValidationFail,
     } = props;
 
   const smsProps = {
@@ -59,7 +58,6 @@ const SmsWrapper = (props) => {
     handleTestAndPreview,
     handleCloseTestAndPreview,
     isTestAndPreviewMode,
-    onValidationFail,
   };
   const isTraiDlt = isTraiDLTEnable(isFullMode, smsRegister);
   return <>

package/v2Containers/TemplatesV2/index.js

@@ -29,18 +29,11 @@ import FTP from '../FTP';
 import Gallery from '../Assets/Gallery';
 import withStyles from '../../hoc/withStyles';
 import styles, { CapTabStyle } from './TemplatesV2.style';
-import { CREATIVES_UI_VIEW, FTP as FTP_CHANNEL, LOYALTY, WHATSAPP, RCS, LINE, EMAIL, ASSETS, JP_LOCALE_HIDE_FEATURE, ZALO, INAPP, WEBPUSH } from '../App/constants';
+import { CREATIVES_UI_VIEW, LOYALTY, WHATSAPP, RCS, LINE, EMAIL, ASSETS, JP_LOCALE_HIDE_FEATURE, ZALO, INAPP, WEBPUSH } from '../App/constants';
 import AccessForbidden from '../../v2Components/AccessForbidden';
 import { getObjFromQueryParams } from '../../utils/v2common';
 import { makeSelectAuthenticated, selectCurrentOrgDetails } from "../../v2Containers/Cap/selectors";
-import {
-  CALL_TASK,
-  COMMON_CHANNELS,
-  LOYALTY_SUPPORTED_ACTION,
-  MOBILE_PUSH,
-  NORMALIZED_CHANNEL_ALIASES,
-  SMS,
-} from "../CreativesContainer/constants";
+import { LOYALTY_SUPPORTED_ACTION, COMMON_CHANNELS } from "../CreativesContainer/constants";
 
 const {CapCustomCardList} = CapCustomCard;
 
@@ -102,16 +95,8 @@ export class TemplatesV2 extends React.Component { // eslint-disable-line react/
       return str.replace(/([a-z0-9])([A-Z])/g, '$1_$2').replace(/[^a-zA-Z0-9]+/g, '_').toLowerCase();
     };
 
-    const buildChannelSet = (channelList) => {
-      const normalized = (channelList || []).map((c) => normalizeChannel(c));
-      const withAliases = normalized.flatMap((norm) => {
-        const canonical = NORMALIZED_CHANNEL_ALIASES[norm];
-        return canonical ? [norm, canonical] : [norm];
-      });
-      return new Set(withAliases);
-    };
-    const normalizedChannelsToHideSet = buildChannelSet(channelsToHide);
-    const normalizedChannelsToDisableSet = buildChannelSet(channelsToDisable);
+    const normalizedChannelsToHideSet = new Set((channelsToHide || []).map((c) => normalizeChannel(c)));
+    const normalizedChannelsToDisableSet = new Set((channelsToDisable || []).map((c) => normalizeChannel(c)));
 
     // Build filtered panes by examining each pane's `key` and checking against normalized hide set
     let filteredPanes = Object.keys(defaultPanes).map((k) => defaultPanes[k]).filter((pane) => {
@@ -123,12 +108,12 @@ export class TemplatesV2 extends React.Component { // eslint-disable-line react/
       filteredPanes.push({ content: <div></div>, tab: intl.formatMessage(messages.gallery), key: 'assets' });
     } else {
       // Add special-mode panes only when not hidden (use normalized checks)
-      if (!normalizedChannelsToHideSet.has(CALL_TASK.toLowerCase())) {
-        filteredPanes.push({ content: <div></div>, tab: intl.formatMessage(messages.callTask), key: CALL_TASK.toLowerCase() });
+      if (!normalizedChannelsToHideSet.has('call_task')) {
+        filteredPanes.push({ content: <div></div>, tab: intl.formatMessage(messages.callTask), key: 'call_task' });
       }
-      if (!normalizedChannelsToHideSet.has(FTP_CHANNEL.toLowerCase())) {
-        filteredPanes.push({ content: <></>, tab: intl.formatMessage(messages.FTP), key: FTP_CHANNEL.toLowerCase() });
-        defaultChannel = FTP_CHANNEL;
+      if (!normalizedChannelsToHideSet.has('ftp')) {
+        filteredPanes.push({ content: <></>, tab: intl.formatMessage(messages.FTP), key: 'ftp' });
+        defaultChannel = 'FTP';
       }
 
       // Create a local copy of COMMON_CHANNELS to avoid mutating the imported array
@@ -178,15 +163,15 @@ export class TemplatesV2 extends React.Component { // eslint-disable-line react/
 
     // If audience is anonymous, prefer mobilepush as default (if not hidden)
     if (isAnonymousType) {
-      const mobilePushNorm = normalizeChannel(MOBILE_PUSH.toLowerCase());
+      const mobilePushNorm = normalizeChannel('mobilepush');
       if (!normalizedChannelsToHideSet.has(mobilePushNorm)) {
-        defaultChannel = MOBILE_PUSH.toLowerCase();
+        defaultChannel = 'mobilepush';
       }
     }
 
-    const defaultChannelOrder = [SMS.toLowerCase(), EMAIL, MOBILE_PUSH.toLowerCase(), LINE, CALL_TASK.toLowerCase()];
+    const channel = ['sms', 'email', 'mobilepush', 'line', 'call_task'];
     if (normalizedChannelsToDisableSet.size > 0) {
-      defaultChannelOrder.some((ch) => {
+      channel.some((ch) => {
         if (!normalizedChannelsToDisableSet.has(ch)) {
           defaultChannel = ch;
           return true;

package/v2Containers/Viber/index.js

@@ -234,6 +234,7 @@ export const Viber = (props) => {
     const { valid, isBraceError } = validateTags({
       content: value,
       tagsParam: tags,
+      injectedTagsParams: injectedTags,
       location,
       tagModule: 'outbound',
       isFullMode,

package/v2Containers/WebPush/Create/hooks/useTagManagement.js

@@ -105,10 +105,12 @@ export const useTagManagement = ({
   const validationConfig = useMemo(
     () => ({
       tagsParam: tags,
+      injectedTagsParams: injectedTags,
       location,
       tagModule: getDefaultTags,
+      eventContextTags,
     }),
-    [tags, location, getDefaultTags],
+    [tags, injectedTags, location, getDefaultTags, eventContextTags],
   );
 
   return {

package/v2Containers/WebPush/Create/hooks/useTagManagement.test.js

@@ -528,19 +528,26 @@ describe('useTagManagement', () => {
 
   describe('validationConfig', () => {
     it('should return validation config with tags', () => {
+      const injectedTags = [{ id: 5, name: 'Injected Tag' }];
+      const eventContextTags = [{ id: 6, name: 'Event Tag' }];
+
       const { result } = renderHook(() =>
         useTagManagement({
           location: defaultLocation,
           globalActions: mockGlobalActions,
           metaEntities: defaultMetaEntities,
+          injectedTags,
+          eventContextTags,
           getDefaultTags: 'custom',
         })
       );
 
       expect(result.current.validationConfig).toEqual({
         tagsParam: defaultMetaEntities.tags.standard,
+        injectedTagsParams: injectedTags,
         location: defaultLocation,
         tagModule: 'custom',
+        eventContextTags,
       });
     });
 

package/v2Containers/WebPush/Create/index.js

@@ -295,8 +295,8 @@ const WebPushCreate = ({
   const validateTemplateName = useCallback((value) => validateTemplateNameUtil(value), []);
 
   const validateTitle = useCallback(
-    (value) => validateTitleUtil(value, formatMessage, messages, restrictPersonalization, validationConfig, isFullMode),
-    [formatMessage, restrictPersonalization, validationConfig, isFullMode],
+    (value) => validateTitleUtil(value, formatMessage, messages, restrictPersonalization),
+    [formatMessage, restrictPersonalization],
   );
 
   const validateUrl = useCallback(

package/v2Containers/WebPush/Create/utils/validation.js

@@ -11,34 +11,19 @@ import { hasPersonalizationTags } from '../../../../utils/commonUtils';
 export const validateTemplateName = (value) => !value || value.trim() === '';
 
 /**
- * Validates notification title (required and optional tag validation)
+ * Validates notification title
  * @param {string} value - The title value
  * @param {Function} formatMessage - i18n format message function
  * @param {Object} messages - Message definitions
- * @param {Object} [validationConfig] - Optional config for tag validation
- * @param {boolean} [isFullMode] - Optional; when set with validationConfig, runs tag validation
  * @returns {string} Error message if invalid, empty string if valid
  */
-export const validateTitle = (value, formatMessage, messages, restrictPersonalization, validationConfig, isFullMode) => {
+export const validateTitle = (value, formatMessage, messages, restrictPersonalization) => {
   if (!value || value.trim() === '') {
     return formatMessage(messages.titleRequired);
   }
   if (restrictPersonalization && hasPersonalizationTags(value)) {
     return formatMessage(messages.personalizationTokensErrorMessage);
   }
-
-  if (validationConfig != null) {
-    const validationResponse = validateTags({
-      content: value,
-      ...validationConfig,
-      isFullMode,
-    }) || {};
-
-    if (validationResponse?.isBraceError) {
-      return formatMessage(globalMessages.unbalanacedCurlyBraces);
-    }
-  }
-
   return '';
 };
 
@@ -80,6 +65,12 @@ export const validateMessageContent = (value, formatMessage, messages, validatio
     isFullMode,
   }) || {};
 
+  if (validationResponse?.unsupportedTags?.length) {
+    return formatMessage(globalMessages.unsupportedTagsValidationError, {
+      unsupportedTags: validationResponse.unsupportedTags.join(', '),
+    });
+  }
+
   if (validationResponse?.isBraceError) {
     return formatMessage(globalMessages.unbalanacedCurlyBraces);
   }

package/v2Containers/WebPush/Create/utils/validation.test.js

@@ -127,40 +127,6 @@ describe('validation', () => {
       expect(result).toBe('Personalization tags are not supported for anonymous customers');
       expect(mockFormatMessage).toHaveBeenCalledWith(mockMessages.personalizationTokensErrorMessage);
     });
-
-    it('should return brace error when validationConfig is provided and validateTags returns isBraceError', () => {
-      const validationConfig = { tagsParam: [], location: {}, tagModule: '' };
-      validateTags.mockReturnValue({ isBraceError: true });
-      const result = validateTitle(
-        'Valid Title',
-        mockFormatMessage,
-        mockMessages,
-        false,
-        validationConfig,
-        false
-      );
-      expect(result).toBe('Unbalanced curly braces');
-      expect(mockFormatMessage).toHaveBeenCalledWith(globalMessages.unbalanacedCurlyBraces);
-      expect(validateTags).toHaveBeenCalledWith({
-        content: 'Valid Title',
-        ...validationConfig,
-        isFullMode: false,
-      });
-    });
-
-    it('should not run tag validation when validationConfig is null', () => {
-      validateTags.mockClear();
-      const result = validateTitle('Valid Title', mockFormatMessage, mockMessages, false, null);
-      expect(result).toBe('');
-      expect(validateTags).not.toHaveBeenCalled();
-    });
-
-    it('should not run tag validation when validationConfig is undefined', () => {
-      validateTags.mockClear();
-      const result = validateTitle('Valid Title', mockFormatMessage, mockMessages, false, undefined);
-      expect(result).toBe('');
-      expect(validateTags).not.toHaveBeenCalled();
-    });
   });
 
   describe('validateUrl', () => {
@@ -217,8 +183,10 @@ describe('validation', () => {
   describe('validateMessageContent', () => {
     const mockValidationConfig = {
       tagsParam: [],
+      injectedTagsParams: [],
       location: {},
       tagModule: '',
+      eventContextTags: [],
     };
 
     beforeEach(() => {
@@ -257,6 +225,17 @@ describe('validation', () => {
       });
     });
 
+    it('should return error message for unsupported tags', () => {
+      validateTags.mockReturnValue({
+        unsupportedTags: ['tag1', 'tag2'],
+      });
+      const result = validateMessageContent('Message with {tag1} and {tag2}', mockFormatMessage, mockMessages, mockValidationConfig);
+      expect(result).toBe('Unsupported tags: tag1, tag2');
+      expect(mockFormatMessage).toHaveBeenCalledWith(globalMessages.unsupportedTagsValidationError, {
+        unsupportedTags: 'tag1, tag2',
+      });
+    });
+
     it('should return error message for unbalanced curly braces', () => {
       validateTags.mockReturnValue({
         isBraceError: true,
@@ -266,11 +245,22 @@ describe('validation', () => {
       expect(mockFormatMessage).toHaveBeenCalledWith(globalMessages.unbalanacedCurlyBraces);
     });
 
+    it('should return error message for both unsupported tags and brace error (unsupported tags takes precedence)', () => {
+      validateTags.mockReturnValue({
+        unsupportedTags: ['tag1'],
+        isBraceError: true,
+      });
+      const result = validateMessageContent('Message with {tag1}', mockFormatMessage, mockMessages, mockValidationConfig);
+      expect(result).toBe('Unsupported tags: tag1');
+    });
+
     it('should pass validation config to validateTags', () => {
       const customConfig = {
         tagsParam: [{ id: 1, name: 'Tag1' }],
+        injectedTagsParams: [{ id: 2, name: 'Tag2' }],
         location: { query: { type: 'test' } },
         tagModule: 'custom',
+        eventContextTags: [{ id: 3, name: 'Tag3' }],
       };
       validateTags.mockReturnValue({});
       validateMessageContent('Valid message', mockFormatMessage, mockMessages, customConfig);
@@ -316,16 +306,6 @@ describe('validation', () => {
       expect(result).toBe('Personalization tags are not supported for anonymous customers');
       expect(mockFormatMessage).toHaveBeenCalledWith(mockMessages.personalizationTokensErrorMessage);
     });
-
-    it('should pass isFullMode to validateTags when provided', () => {
-      validateTags.mockReturnValue({});
-      validateMessageContent('Valid message', mockFormatMessage, mockMessages, mockValidationConfig, true);
-      expect(validateTags).toHaveBeenCalledWith({
-        content: 'Valid message',
-        ...mockValidationConfig,
-        isFullMode: true,
-      });
-    });
   });
 });
 

package/v2Containers/Whatsapp/index.js

@@ -637,21 +637,22 @@ export const Whatsapp = (props) => {
         validateTags({
           content: contentData.join(""),
           tagsParam: tags,
+          injectedTagsParams: injectedTags,
           location,
           tagModule: getDefaultTags,
+          eventContextTags,
           isFullMode,
         }) || {};
+      const unsupportedTagsLengthCheck =
+        validationResponse?.unsupportedTags?.length > 0;
       if (type === HEADER_TEXT) {
         headerTagValidationResponse = validationResponse;
-        updateIsHeaderTagValidationError(validationResponse.isBraceError);
+        updateIsHeaderTagValidationError(unsupportedTagsLengthCheck);
       } else if (type === CAROUSEL_TEXT) {
-        return [
-          { fieldName: "carouselTagValidationErrMessage", value: validationResponse.isBraceError ? validationResponse : {} },
-          { fieldName: "carouselTagValidationErr", value: validationResponse.isBraceError },
-        ];
+        return [{fieldName: "carouselTagValidationErrMessage", value: validationResponse}, {fieldName: "carouselTagValidationErr", value: unsupportedTagsLengthCheck}];
       } else {
         tagValidationResponse = validationResponse;
-        updateIsTagValidationError(validationResponse.isBraceError);
+        updateIsTagValidationError(unsupportedTagsLengthCheck);
       }
     }
   };
@@ -2681,11 +2682,18 @@ const isAuthenticationTemplate = isEqual(templateCategory, WHATSAPP_CATEGORIES.a
     } else {
       validationResponse = tagValidationResponse;
     }
-    const { isBraceError } = validationResponse || {};
+    const { unsupportedTags = [], isBraceError } = validationResponse;
+
+    let tagError = "";
+    if (unsupportedTags.length > 0) {
+      tagError = formatMessage(globalMessages.unsupportedTagsValidationError, {
+        unsupportedTags,
+      });
+    }
     if (isBraceError) {
-      return <CapError>{formatMessage(globalMessages.unbalanacedCurlyBraces)}</CapError>;
+      tagError = formatMessage(globalMessages.unbalanacedCurlyBraces);
     }
-    return null;
+    return <CapError>{tagError}</CapError>;
   };
 
   const editModeContent = () => (