@capillarytech/creatives-library 8.0.286 → 8.0.287

package/v2Containers/TagList/index.js

@@ -396,6 +396,17 @@ export class TagList extends React.Component { // eslint-disable-line react/pref
   }
 
   render() {
+    const { restrictPersonalization, disabled, disableTooltipMsg, intl } = this.props;
+    
+    // Compute disabled state and tooltip message
+    let isDisabled = disabled || false;
+    let tooltipMsg = disableTooltipMsg;
+    
+    if (restrictPersonalization && !disabled) {
+      isDisabled = true;
+      tooltipMsg = intl.formatMessage(messages.personalizationNotSupportedAnonymous);
+    }
+    
     return (
       <div className={this.props.className ? this.props.className : ''}>
         <CapTagList
@@ -411,7 +422,9 @@ export class TagList extends React.Component { // eslint-disable-line react/pref
           modalProps={this.props.modalProps}
           currentOrgDetails={this.props.currentOrgDetails}
           channel={this.props.channel}
-          disabled={this.props.disabled}
+          disabled={isDisabled}
+          // custom tooltip message to show when disabled
+          disableTooltipMsg={tooltipMsg}
           fetchingSchemaError={this?.state?.tagsError}
           popoverPlacement={this.props.popoverPlacement}
         />
@@ -445,6 +458,9 @@ TagList.propTypes = {
   fetchingSchemaError: PropTypes.bool,
   eventContextTags: PropTypes.array,
   popoverPlacement: PropTypes.string,
+  // message to show when Add Label button is disabled (e.g. personalization restriction)
+  disableTooltipMsg: PropTypes.string,
+  restrictPersonalization: PropTypes.bool,
   intl: PropTypes.shape({
     formatMessage: PropTypes.func.isRequired,
     locale: PropTypes.string,

package/v2Containers/TagList/messages.js

@@ -15,4 +15,8 @@ export default defineMessages({
     id: `${scope}.entryEvent`,
     defaultMessage: 'Entry event',
   },
+  personalizationNotSupportedAnonymous: {
+    id: `${scope}.personalizationNotSupportedAnonymous`,
+    defaultMessage: 'Personalization tags are not supported for anonymous customers',
+  },
 });

package/v2Containers/TemplatesV2/index.js

@@ -12,7 +12,6 @@ import { createStructuredSelector } from 'reselect';
 import { bindActionCreators, compose } from 'redux';
 import { CapTab, CapCustomCard, CapButton, CapHeader, CapSpin, CapIcon, CapTooltip } from '@capillarytech/cap-ui-library';
 import { find, get } from 'lodash';
-import isEmpty from 'lodash/isEmpty';
 import Helmet from 'react-helmet';
 
 import { UserIsAuthenticated } from '../../utils/authWrapper';
@@ -58,6 +57,7 @@ export class TemplatesV2 extends React.Component { // eslint-disable-line react/
       cap = {},
       loyaltyMetaData = {},
       isLoyaltyModule = false,
+      isAnonymousType = false,
     } = props;
 
     const defaultPanes = {
@@ -89,44 +89,54 @@ export class TemplatesV2 extends React.Component { // eslint-disable-line react/
         key: 'wechat',
       };
     }
-    let filteredPanes = Object.keys(defaultPanes)
-      .filter((key) => !channelsToHide.includes(key)).reduce((obj = [], key) => {
-        obj.push(defaultPanes[key]);
-        return obj;
-      }, []);
-
-      if (isFullMode ) {
-      filteredPanes.push({content: <div></div>, tab: intl.formatMessage(messages.gallery), key: 'assets'});
+    // Robust normalization function: converts camelCase, hyphens, spaces and mixed-case to snake_case lowercase
+    const normalizeChannel = (raw = '') => {
+      const str = (raw || '').toString();
+      return str.replace(/([a-z0-9])([A-Z])/g, '$1_$2').replace(/[^a-zA-Z0-9]+/g, '_').toLowerCase();
+    };
+
+    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) => {
+      const paneKey = normalizeChannel(pane.key);
+      return !normalizedChannelsToHideSet.has(paneKey);
+    });
+
+    if (isFullMode) {
+      filteredPanes.push({ content: <div></div>, tab: intl.formatMessage(messages.gallery), key: 'assets' });
     } else {
-      if (!channelsToHide.includes('callTask')) {
-        filteredPanes.push({content: <div></div>, tab: intl.formatMessage(messages.callTask), key: 'call_task'});
+      // Add special-mode panes only when not hidden (use normalized checks)
+      if (!normalizedChannelsToHideSet.has('call_task')) {
+        filteredPanes.push({ content: <div></div>, tab: intl.formatMessage(messages.callTask), key: 'call_task' });
       }
-      if (!channelsToHide.includes('FTP')) {
-        filteredPanes.push({content: <></>, tab: intl.formatMessage(messages.FTP), key: 'ftp'});
+      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
       const channels = [...COMMON_CHANNELS];
-      const { actionName = ''} = loyaltyMetaData;
+      const { actionName = '' } = loyaltyMetaData;
       if (isLoyaltyModule && actionName === LOYALTY_SUPPORTED_ACTION) {
         channels.push(WHATSAPP, ZALO);
       }
 
-      // we only show channels which other than COMMON_CHANNELS
-      // if it is coming in enableNewChannels array
+      // we only show channels other than COMMON_CHANNELS if they are present in enableNewChannels
       filteredPanes = filteredPanes.filter((item) => {
-        const channel = item.key;
-        if (!channels.includes(channel)) {
-          return enableNewChannels.includes(channel.toUpperCase());
+        const channelKey = normalizeChannel(item.key);
+        if (!channels.includes(channelKey)) {
+          return enableNewChannels.includes(channelKey.toUpperCase());
         }
         return true;
       });
     }
 
 
-    filteredPanes = filteredPanes.map( (pane) => {
-      if (channelsToDisable.includes(pane.key)) {
+    filteredPanes = filteredPanes.map((pane) => {
+      const paneKeyNorm = normalizeChannel(pane.key);
+      if (normalizedChannelsToDisableSet.has(paneKeyNorm)) {
         // eslint-disable-next-line no-param-reassign
         pane.disabled = true;
         if (pane.key === 'facebook' && showDisabledFBInfo) {
@@ -151,10 +161,18 @@ export class TemplatesV2 extends React.Component { // eslint-disable-line react/
     filteredPanes = hideEngagementChannel ? filteredPanes?.filter((pane) => [EMAIL, LINE, ASSETS].includes(pane?.key) && pane) : filteredPanes;
     defaultChannel = hideEngagementChannel ? EMAIL : defaultChannel;
 
+    // If audience is anonymous, prefer mobilepush as default (if not hidden)
+    if (isAnonymousType) {
+      const mobilePushNorm = normalizeChannel('mobilepush');
+      if (!normalizedChannelsToHideSet.has(mobilePushNorm)) {
+        defaultChannel = 'mobilepush';
+      }
+    }
+
     const channel = ['sms', 'email', 'mobilepush', 'line', 'call_task'];
-    if (!isEmpty(channelsToDisable)) {
+    if (normalizedChannelsToDisableSet.size > 0) {
       channel.some((ch) => {
-        if (!channelsToDisable.includes(ch)) {
+        if (!normalizedChannelsToDisableSet.has(ch)) {
           defaultChannel = ch;
           return true;
         }
@@ -380,6 +398,8 @@ TemplatesV2.propTypes = {
   FTPMode: PropTypes.string,
   messageStrategy: PropTypes.string,
   currentOrgDetails: PropTypes.object,
+  restrictPersonalization: PropTypes.bool,
+  isAnonymousType: PropTypes.bool,
 };
 
 TemplatesV2.defaultProps = {

package/v2Containers/Viber/index.scss

@@ -121,5 +121,5 @@
   margin-top: $CAP_SPACE_08;
 }
 .test-and-preview-button {
-  margin-left: 100px;
+  margin-left: 6.25rem;
 }

package/v2Containers/WebPush/Create/index.js

@@ -85,6 +85,9 @@ const MemoizedTagList = memo(({
   eventContextTags,
   forwardedTags,
   onTagSelect,
+  restrictPersonalization = false,
+  disabled = false,
+  disableTooltipMsg,
 }) => (
   <TagList
     moduleFilterEnabled={moduleFilterEnabled}
@@ -97,6 +100,9 @@ const MemoizedTagList = memo(({
     eventContextTags={eventContextTags}
     forwardedTags={forwardedTags}
     onTagSelect={onTagSelect}
+    restrictPersonalization={restrictPersonalization}
+    disabled={disabled || restrictPersonalization}
+    disableTooltipMsg={disableTooltipMsg}
   />
 ), (prevProps, nextProps) => {
   // Custom comparison function for better memoization
@@ -111,6 +117,9 @@ const MemoizedTagList = memo(({
     && prevProps.eventContextTags === nextProps.eventContextTags
     && prevProps.forwardedTags === nextProps.forwardedTags
     && prevProps.onTagSelect === nextProps.onTagSelect
+    && prevProps.restrictPersonalization === nextProps.restrictPersonalization
+    && prevProps.disabled === nextProps.disabled
+    && prevProps.disableTooltipMsg === nextProps.disableTooltipMsg
   );
 });
 
@@ -144,6 +153,7 @@ const WebPushCreate = ({
   eventContextTags = [],
   templateActions: templateActionsProps,
   Templates,
+  restrictPersonalization = false,
 }) => {
   const { formatMessage } = intl;
 
@@ -285,8 +295,8 @@ const WebPushCreate = ({
   const validateTemplateName = useCallback((value) => validateTemplateNameUtil(value), []);
 
   const validateTitle = useCallback(
-    (value) => validateTitleUtil(value, formatMessage, messages),
-    [formatMessage],
+    (value) => validateTitleUtil(value, formatMessage, messages, restrictPersonalization),
+    [formatMessage, restrictPersonalization],
   );
 
   const validateUrl = useCallback(
@@ -309,8 +319,8 @@ const WebPushCreate = ({
 
 
   const validateMessageContent = useCallback(
-    (value) => validateMessageContentUtil(value, formatMessage, messages, validationConfig, isFullMode),
-    [formatMessage, validationConfig, isFullMode],
+    (value) => validateMessageContentUtil(value, formatMessage, messages, validationConfig, isFullMode, restrictPersonalization),
+    [formatMessage, validationConfig, isFullMode, restrictPersonalization],
   );
 
   useEffect(() => {
@@ -546,7 +556,7 @@ const WebPushCreate = ({
   // Pure validator that returns boolean without setting error state
   const validateFormSilent = () => {
     const templateNameInvalid = isFullMode && validateTemplateName(templateName);
-    const titleValidation = validateTitle(notificationTitle);
+    const titleValidation = validateTitle(notificationTitle, restrictPersonalization);
     const messageValidation = validateMessageContent(message);
 
     return !(templateNameInvalid || titleValidation || messageValidation);
@@ -569,6 +579,7 @@ const WebPushCreate = ({
       return;
     }
 
+    
     // Set flag to indicate save/edit operation has been initiated
     saveInitiatedRef.current = true;
 
@@ -825,8 +836,11 @@ const WebPushCreate = ({
       selectedOfferDetails,
       eventContextTags,
       forwardedTags,
+      restrictPersonalization,
+      disabled: restrictPersonalization,
+      disableTooltipMsg: restrictPersonalization ? formatMessage(messages.personalizationNotSupportedAnonymous) : undefined,
     }),
-    [tags, injectedTags, selectedOfferDetails, eventContextTags, forwardedTags],
+    [tags, injectedTags, selectedOfferDetails, eventContextTags, forwardedTags, restrictPersonalization, formatMessage],
   );
 
   // Memoized TagList components with optimized props
@@ -881,6 +895,7 @@ const WebPushCreate = ({
         )
       )
       || (onClickBehaviour === ON_CLICK_BEHAVIOUR_OPTIONS.REDIRECT_TO_URL && (!redirectUrl.trim() || redirectUrlError))
+      || !!titleError || !!messageError
     ),
     [
       createTemplateInProgress,
@@ -906,6 +921,8 @@ const WebPushCreate = ({
       onClickBehaviour,
       redirectUrl,
       redirectUrlError,
+      titleError,
+      messageError,
     ],
   );
 
@@ -1064,6 +1081,7 @@ WebPushCreate.propTypes = {
   selectedOfferDetails: PropTypes.array,
   eventContextTags: PropTypes.array,
   templateActions: PropTypes.object,
+  restrictPersonalization: PropTypes.bool,
 };
 
 WebPushCreate.defaultProps = {
@@ -1092,6 +1110,7 @@ WebPushCreate.defaultProps = {
   eventContextTags: [],
   templateActions: {},
   Templates: {},
+  restrictPersonalization: false,
 };
 
 const mapStateToProps = createStructuredSelector({

package/v2Containers/WebPush/Create/messages.js

@@ -207,5 +207,12 @@ export default defineMessages({
     id: `${scope}.templateIdMissingError`,
     defaultMessage: 'Unable to save template: Template ID is missing. Please refresh the page and try again.',
   },
+  personalizationTokensErrorMessage: {
+    id: `${scope}.personalizationTokensErrorMessage`,
+    defaultMessage: 'Personalization tags are not supported for anonymous customers. Please remove the tags.',
+  },
+  personalizationNotSupportedAnonymous: {
+    id: `${scope}.personalizationNotSupportedAnonymous`,
+    defaultMessage: 'Personalization tags are not supported for anonymous customers',
+  },
 });
-

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

@@ -1,6 +1,7 @@
 import { isValidHttpUrl } from './urlValidation';
 import { validateTags } from '../../../../utils/tagValidations';
 import globalMessages from '../../../Cap/messages';
+import { hasPersonalizationTags } from '../../../../utils/commonUtils';
 
 /**
  * Validates template name (checks if empty)
@@ -16,10 +17,13 @@ export const validateTemplateName = (value) => !value || value.trim() === '';
  * @param {Object} messages - Message definitions
  * @returns {string} Error message if invalid, empty string if valid
  */
-export const validateTitle = (value, formatMessage, messages) => {
+export const validateTitle = (value, formatMessage, messages, restrictPersonalization) => {
   if (!value || value.trim() === '') {
     return formatMessage(messages.titleRequired);
   }
+  if (restrictPersonalization && hasPersonalizationTags(value)) {
+    return formatMessage(messages.personalizationTokensErrorMessage);
+  }
   return '';
 };
 
@@ -34,11 +38,11 @@ export const validateUrl = (value, formatMessage, messages) => {
   if (!value || value.trim() === '') {
     return formatMessage(messages.urlRequired);
   }
-  
+
   if (!isValidHttpUrl(value)) {
     return formatMessage(messages.urlInvalid);
   }
-  
+
   return '';
 };
 
@@ -50,27 +54,30 @@ export const validateUrl = (value, formatMessage, messages) => {
  * @param {Object} validationConfig - Configuration for tag validation
  * @returns {string} Error message if invalid, empty string if valid
  */
-export const validateMessageContent = (value, formatMessage, messages, validationConfig, isFullMode) => {
+export const validateMessageContent = (value, formatMessage, messages, validationConfig, isFullMode, restrictPersonalization) => {
   if (!value || value.trim() === '') {
     return formatMessage(messages.messageRequired);
   }
-  
+
   const validationResponse = validateTags({
     content: value,
     ...validationConfig,
     isFullMode,
   }) || {};
-  
+
   if (validationResponse?.unsupportedTags?.length) {
     return formatMessage(globalMessages.unsupportedTagsValidationError, {
       unsupportedTags: validationResponse.unsupportedTags.join(', '),
     });
   }
-  
+
   if (validationResponse?.isBraceError) {
     return formatMessage(globalMessages.unbalanacedCurlyBraces);
   }
-  
+
+  if (restrictPersonalization && hasPersonalizationTags(value)) {
+    return formatMessage(messages.personalizationTokensErrorMessage);
+  }
+
   return '';
 };
-

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

@@ -44,6 +44,9 @@ describe('validation', () => {
     messageRequired: {
       defaultMessage: 'Message is required',
     },
+    personalizationTokensErrorMessage: {
+      defaultMessage: 'Personalization tags are not supported for anonymous customers',
+    },
   };
 
   beforeEach(() => {
@@ -113,6 +116,17 @@ describe('validation', () => {
       const result = validateTitle('  Valid Title  ', mockFormatMessage, mockMessages);
       expect(result).toBe('');
     });
+
+    it('should return personalization error when restrictPersonalization is true and title has personalization tags', () => {
+      const result = validateTitle(
+        'Hello {{name}}',
+        mockFormatMessage,
+        mockMessages,
+        true
+      );
+      expect(result).toBe('Personalization tags are not supported for anonymous customers');
+      expect(mockFormatMessage).toHaveBeenCalledWith(mockMessages.personalizationTokensErrorMessage);
+    });
   });
 
   describe('validateUrl', () => {
@@ -278,6 +292,20 @@ describe('validation', () => {
         ...mockValidationConfig,
       });
     });
+
+    it('should return personalization error when restrictPersonalization is true and message has personalization tags', () => {
+      validateTags.mockReturnValue({});
+      const result = validateMessageContent(
+        'Hello {{name}}',
+        mockFormatMessage,
+        mockMessages,
+        mockValidationConfig,
+        true,
+        true
+      );
+      expect(result).toBe('Personalization tags are not supported for anonymous customers');
+      expect(mockFormatMessage).toHaveBeenCalledWith(mockMessages.personalizationTokensErrorMessage);
+    });
   });
 });