@capillarytech/creatives-library 8.0.287-alpha.3 → 8.0.288

package/v2Containers/Sms/Edit/index.js

@@ -52,7 +52,6 @@ export class Edit extends React.Component { // eslint-disable-line react/prefer-
       modalContent: {title: "Alert", body: "Do you really want to delete this version?", type: 'confirm', id: 'sms-version-modal'},
       showTestAndPreviewSlidebox: false,
       isTestAndPreviewMode: false,
-      pendingGetFormData: false,
     };
     this.saveFormData = this.saveFormData.bind(this);
     this.onFormDataChange = this.onFormDataChange.bind(this);
@@ -135,14 +134,8 @@ export class Edit extends React.Component { // eslint-disable-line react/prefer-
   }
 
   componentWillReceiveProps(nextProps) {
-    if (!nextProps.isFullMode && nextProps.isGetFormData) {
-      this.setState({ startValidation: true, pendingGetFormData: true });
-      this.pendingGetFormDataTimeout = setTimeout(() => {
-        if (this.state.pendingGetFormData && this.props.getFormSubscriptionData) {
-          this.props.getFormSubscriptionData(this.getFormData());
-          this.setState({ pendingGetFormData: false, startValidation: false });
-        }
-      }, 300);
+    if (nextProps.location.query.module === 'library' && nextProps.isGetFormData) {
+      nextProps.getFormSubscriptionData(this.getFormData());
     }
     if ( nextProps.location.query.module === 'library' && nextProps.subscriptionTemplateDetails && nextProps.subscriptionTemplateDetails.name && _.isEmpty(this.state.editData) && !_.isEmpty(this.state.schema)) {
       this.setEditState(nextProps.subscriptionTemplateDetails);
@@ -196,9 +189,6 @@ export class Edit extends React.Component { // eslint-disable-line react/prefer-
   }
 
   componentWillUnmount() {
-    if (this.pendingGetFormDataTimeout) {
-      clearTimeout(this.pendingGetFormDataTimeout);
-    }
     if (this.props.setIsLoadingContent) {
       this.props.setIsLoadingContent(true); // setting isLoading of CreativesContainer so that slidebox foot can be hidden till content is loaded
     }
@@ -327,16 +317,7 @@ export class Edit extends React.Component { // eslint-disable-line react/prefer-
   }
 
   setFormValidity(isFormValid, errorData) {
-    this.setState({ isFormValid, errorData }, () => {
-      if (this.state.pendingGetFormData && this.props.getFormSubscriptionData) {
-        if (this.pendingGetFormDataTimeout) {
-          clearTimeout(this.pendingGetFormDataTimeout);
-          this.pendingGetFormDataTimeout = null;
-        }
-        this.props.getFormSubscriptionData(this.getFormData());
-        this.setState({ pendingGetFormData: false, startValidation: false });
-      }
-    });
+    this.setState({isFormValid, errorData});
   }
 
   getFormData(e, value) {
@@ -942,13 +923,6 @@ export class Edit extends React.Component { // eslint-disable-line react/prefer-
     this.setState({startValidation: false});
   }
   saveFormData() {
-    // In library mode the template is submitted via getFormSubscriptionData, not editTemplate API.
-    // Calling editTemplate here would set editTemplateInProgress: true in redux and, because the
-    // slidebox closes before the API responds, that flag would never be reset – causing the spinner
-    // to be stuck on the next open.
-    if (!this.props.isFullMode) {
-      return;
-    }
     //Logic to save in db etc
     //saveFormData gets called only when validation result is true
 

package/v2Containers/Sms/commonMethods.js

@@ -1,18 +1,18 @@
 import isEmpty from 'lodash/isEmpty';
-import CapNotification from '@capillarytech/cap-ui-library/CapNotification';
+import { CapNotification } from '@capillarytech/cap-ui-library';
 import messages from './Create/messages';
 export function showError() {
   const {intl} = this.props;
   const {errorData} = this.state;
   const errorMessage = {key: 'validation-error', message: intl.formatMessage(messages.validationError)};
   if (!isEmpty(this.state.formData) && !this.state.isFormValid) {
-    const err0 = errorData[0] || {};
-    const isSmsInvalid = Object.values(err0).includes(true);
-    const isBraceError = Boolean(err0['bracket-error']);
+    const isSmsInvalid = Object.values(errorData[0]).includes(true);
     if (isSmsInvalid) {
+      const invalidTags = errorData[0]['invalid-tags'];
+      if (!isEmpty(invalidTags)) {
+        errorMessage.description = `${intl.formatMessage(messages.invalidTags)}: ${invalidTags.join(',')} `;
+      }
       CapNotification.error(errorMessage);
-    } else if (isBraceError) {
-      // Do not trigger toast for this path; footer error is the reliable UX in SMS library flow.
     }
   }
 }

package/v2Containers/SmsTrai/Edit/index.js

@@ -39,8 +39,10 @@ import formBuilderMessages from '../../../v2Components/FormBuilder/messages';
 import UnifiedPreview from '../../../v2Components/CommonTestAndPreview/UnifiedPreview';
 import TestAndPreviewSlidebox from '../../../v2Components/TestAndPreviewSlidebox';
 import withCreatives from '../../../hoc/withCreatives';
+import { validateTags } from '../../../utils/tagValidations';
 import {
   CHARLIMIT,
+  SMS,
   SMS_TRAI_VAR,
   TAG,
   EMBEDDED,
@@ -49,15 +51,16 @@ import {
   ALL,
   LIBRARY,
 } from './constants';
-import { SMS } from '../../CreativesContainer/constants';
 import v2EditSmsReducer from '../../Sms/Edit/reducer';
 import { v2SmsEditSagas } from '../../Sms/Edit/sagas';
 import ErrorInfoNote from '../../../v2Components/ErrorInfoNote';
 import { validateLiquidTemplateContent } from '../../../utils/commonUtils';
+import { hasLiquidSupportFeature } from '../../../utils/common';
 import { ANDROID } from '../../../v2Components/CommonTestAndPreview/constants';
 
 let varMap = {};
 let traiData = {};
+let tagValidationResponse = {};
 const { TextArea } = CapInput;
 const { CapLabelInline } = CapLabel;
 
@@ -91,6 +94,7 @@ export const SmsTraiEdit = (props) => {
   const [tags, updateTags] = useState([]);
   const [textAreaId, updateTextAreaId] = useState();
   const [isValidationError, updateIsValidationError] = useState(false);
+  const [isTagValidationError, updateIsTagValidationError] = useState(false);
   const [totalMessageLength, setTotalMessageLength] = useState(0);
   const [isUnicodeAllowed, updateIsUnicodeAllowed] = useState(true);
   const [showMsgLengthNote, updateshowMsgLengthNote] = useState(false);
@@ -225,6 +229,29 @@ export const SmsTraiEdit = (props) => {
     }
   }, []);
 
+  //performs tag validation
+  useEffect(() => {
+    if (
+      !isFullMode &&
+      updatedSmsEditor?.length > 0 &&
+      !updatedSmsEditor.includes(SMS_TRAI_VAR)
+    ) {
+      tagValidationResponse =
+        validateTags({
+          content: updatedSmsEditor.join(''),
+          tagsParam: tags,
+          injectedTagsParams: injectedTags,
+          location,
+          tagModule: getDefaultTags,
+          eventContextTags,
+          isFullMode,
+        }) || {};
+      updateIsTagValidationError(
+        tagValidationResponse.unsupportedTags.length > 0,
+      );
+    }
+  }, [updatedSmsEditor, tags]);
+
   const computeUpdatedSmsEditor = () => {
     const arr = [...tempMsgArray];
     const varMapKeys = Object.keys(varMap)?.map((key) => Number(key.slice(8)))?.sort((a, b) => a - b) || [];
@@ -261,8 +288,6 @@ export const SmsTraiEdit = (props) => {
   };
 
   const onSubmitWrapper = () => {
-    setIsLiquidValidationError(false);
-    setLiquidErrorMessages({});
     const content = updatedSmsEditor.join('');
     const onError = ({ standardErrors, liquidErrors }) => {
       setLiquidErrorMessages({
@@ -273,8 +298,6 @@ export const SmsTraiEdit = (props) => {
     };
 
     const onSuccess = () => {
-      setIsLiquidValidationError(false);
-      setLiquidErrorMessages({});
       onDoneCallback();
     };
     validateLiquidTemplateContent(content, {
@@ -283,6 +306,10 @@ export const SmsTraiEdit = (props) => {
       messages: formBuilderMessages,
       onError,
       onSuccess,
+      tagLookupMap: metaEntities?.tagLookupMap,
+      eventContextTags,
+      isLiquidFlow: true,
+      forwardedTags: {},
     });
   };
 
@@ -521,6 +548,17 @@ export const SmsTraiEdit = (props) => {
     return countVarChar;
   };
 
+  const tagValidationErrorMessage = () => {
+    const { unsupportedTags = [] } = tagValidationResponse;
+    let tagError = '';
+    if (unsupportedTags.length > 0) {
+      tagError = formatMessage(messages.unsupportedTagsValidationError, {
+        unsupportedTags,
+      });
+    }
+    return <CapError>{tagError}</CapError>;
+  };
+
   const disablehandler = () => {
     if (traiData && !isEmpty(traiData)) {
       const msg = get(traiData, `versions.base.sms-editor`, '');
@@ -566,6 +604,7 @@ export const SmsTraiEdit = (props) => {
     setShowTestAndPreviewSlidebox(false);
   };
 
+  const isLiquidSupportFeatureEnabled = hasLiquidSupportFeature();
   return (
     <>
       <CapSpin spinning={loading || fetchingLiquidTags} tip={fetchingLiquidTags && formatMessage(formBuilderMessages.liquidSpinText)}>
@@ -623,6 +662,7 @@ export const SmsTraiEdit = (props) => {
             <CapRow>
               {smsLengthForVar()}
             </CapRow>
+            {isTagValidationError && tagValidationErrorMessage()}
             <CapCheckbox onChange={unicodeHandler} checked={isUnicodeAllowed} disabled={disablehandler()}>
               {formatMessage(messages.unicodeLabel)}
             </CapCheckbox>
@@ -653,8 +693,9 @@ export const SmsTraiEdit = (props) => {
             <FormattedMessage {...messages.testAndPreviewButtonLabel} />
           </CapButton>
           <CapButton
-            onClick={onSubmitWrapper}
+            onClick={isLiquidSupportFeatureEnabled ? onSubmitWrapper : onDoneCallback}
             className="create-msg"
+            disabled={isTagValidationError || (isLiquidSupportFeatureEnabled && !isObject(metaEntities?.tagLookupMap))}
           >
             <FormattedMessage {...messages.saveButtonLabel} />
           </CapButton>

package/v2Containers/SmsTrai/Edit/tests/__snapshots__/index.test.js.snap

@@ -4265,7 +4265,7 @@ FREE GIFTS-
                         <CapCheckbox
                           checked={false}
                           disabled={false}
-                          key=".3"
+                          key=".4"
                           labelType="h4"
                           onChange={[Function]}
                         >
@@ -4327,7 +4327,7 @@ FREE GIFTS-
                           </div>
                         </CapCheckbox>
                         <div
-                          key=".5"
+                          key=".6"
                           style={
                             Object {
                               "marginBottom": "100px",
@@ -15176,7 +15176,7 @@ FREE GIFTS-
                         <CapCheckbox
                           checked={false}
                           disabled={false}
-                          key=".3"
+                          key=".4"
                           labelType="h4"
                           onChange={[Function]}
                         >
@@ -15238,7 +15238,7 @@ FREE GIFTS-
                           </div>
                         </CapCheckbox>
                         <div
-                          key=".5"
+                          key=".6"
                           style={
                             Object {
                               "marginBottom": "100px",
@@ -26117,7 +26117,7 @@ FREE GIFTS-
                         <CapCheckbox
                           checked={false}
                           disabled={false}
-                          key=".3"
+                          key=".4"
                           labelType="h4"
                           onChange={[Function]}
                         >
@@ -26179,7 +26179,7 @@ FREE GIFTS-
                           </div>
                         </CapCheckbox>
                         <div
-                          key=".5"
+                          key=".6"
                           style={
                             Object {
                               "marginBottom": "100px",

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.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

@@ -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, validationConfig, isFullMode),
-    [formatMessage, validationConfig, isFullMode],
+    (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',
+  },
 });
-