@capillarytech/creatives-library 8.0.286 → 8.0.287

package/v2Containers/MobilePush/Create/index.js

@@ -161,6 +161,15 @@ export class Create extends React.Component { // eslint-disable-line react/prefe
     const newFormData = cloneDeep(formData);
     const {templateCta} = this.state;
     const { defaultData = {}, isFullMode, showTemplateName} = this.props;
+    
+    // Check for personalization tokens if restriction is enabled and notify parent
+    if (this.props.restrictPersonalization) {
+      const hasTokens = this.checkForPersonalizationTokens(newFormData);
+      if (this.props.onPersonalizationTokensChange) {
+        this.props.onPersonalizationTokensChange(hasTokens);
+      }
+    }
+    
     if (!isEmpty(templateCta)) {
       newFormData[this.state.currentTab - 1][`secondary-cta-${this.state.currentTab - 1}-label`] = get(templateCta, 'name');
       newFormData[this.state.currentTab - 1][`secondary-cta-${this.state.currentTab - 1}-action`] = get(templateCta, 'ctaTemplateDetails[0].buttonText');
@@ -1502,8 +1511,40 @@ export class Create extends React.Component { // eslint-disable-line react/prefe
     this.injectEvents(schema);
   };
 
+  checkForPersonalizationTokens = (formData) => {
+    // Check for {{ }} (liquid tags) and [ ] (event context tags) in mobile push content
+    const tokenRegex = /\{\{[\s\S]*?\}\}|\[[\s\S]*?\]/;
+    
+    // Check all tabs/versions for personalization tokens
+    if (formData && typeof formData === 'object') {
+      for (const key in formData) {
+        const tabData = formData[key];
+        if (tabData && typeof tabData === 'object') {
+          for (const fieldKey in tabData) {
+            const fieldValue = tabData[fieldKey];
+            if (typeof fieldValue === 'string' && tokenRegex.test(fieldValue)) {
+              return true;
+            }
+          }
+        }
+      }
+    }
+    return false;
+  };
+
   saveFormData = (formData) => {
     //this function gets called from form bulder only when the form data is valid
+    
+    // Check for personalization tokens if restriction is enabled
+    if (this.props.restrictPersonalization) {
+      const hasTokens = this.checkForPersonalizationTokens(formData);
+      if (hasTokens) {
+        const message = this.props.intl.formatMessage(messages.personalizationTokensErrorMessage);
+        CapNotification.error({message, key: 'personalizationTokensError'});
+        return;
+      }
+    }
+    
     const obj = this.getTransformedData(formData);
     const content = getContent(obj);
     const {
@@ -1907,6 +1948,7 @@ export class Create extends React.Component { // eslint-disable-line react/prefe
                 isFullMode={this.props.isFullMode}
                 eventContextTags={this.props?.eventContextTags}
                 messageDetails={this.props?.messageDetails}
+                restrictPersonalization={this.props.restrictPersonalization}
               />
             </CapColumn>
             {this.props.iosCtasData && this.state.showIosCtaTable &&
@@ -2011,6 +2053,9 @@ Create.propTypes = {
   showTestAndPreviewSlidebox: PropTypes.bool,
   handleTestAndPreview: PropTypes.func,
   handleCloseTestAndPreview: PropTypes.func,
+  restrictPersonalization: PropTypes.bool,
+  isAnonymousType: PropTypes.bool,
+  onPersonalizationTokensChange: PropTypes.func,
 };
 
 const mapStateToProps = createStructuredSelector({

package/v2Containers/MobilePush/Create/messages.js

@@ -342,4 +342,8 @@ export default defineMessages({
     id: 'creatives.containersV2.MobilePush.Create.thisSectionDisabledHoverText',
     defaultMessage: 'This section is being revamped. Till then it will remain disabled.',
   },
+  "personalizationTokensErrorMessage": {
+    id: 'creatives.containersV2.MobilePush.Create.personalizationTokensErrorMessage',
+    defaultMessage: 'Personalization tags are not supported for anonymous customers. Please remove the tags.',
+  },
 });

package/v2Containers/MobilePush/Edit/index.js

@@ -246,6 +246,15 @@ export class Edit extends React.Component { // eslint-disable-line react/prefer-
   onFormDataChange = (formData, tabCount, currentTab, inputField) => {
     const newFormData = _.cloneDeep(formData);
     const {templateCta} = this.state;
+    
+    // Check for personalization tokens if restriction is enabled and notify parent
+    if (this.props.restrictPersonalization) {
+      const hasTokens = this.checkForPersonalizationTokens(newFormData);
+      if (this.props.onPersonalizationTokensChange) {
+        this.props.onPersonalizationTokensChange(hasTokens);
+      }
+    }
+    
     if (!_.isEmpty(templateCta) && this.state.currentTab === 2) {
       newFormData[this.state.currentTab - 1][`secondary-cta-${this.state.currentTab - 1}-label`] = get(templateCta, 'name');
       newFormData[this.state.currentTab - 1][`secondary-cta-${this.state.currentTab - 1}-action`] = get(templateCta, 'ctaTemplateDetails[0].buttonText');
@@ -1687,10 +1696,42 @@ export class Edit extends React.Component { // eslint-disable-line react/prefer-
   };
 
   saveFormData = (formData) => {
+    // Check for personalization tokens if restriction is enabled
+    if (this.props.restrictPersonalization) {
+      const hasTokens = this.checkForPersonalizationTokens(formData);
+      if (hasTokens) {
+        const message = this.props.intl.formatMessage(messages.personalizationTokensErrorMessage);
+        CapNotification.error({message, key: 'personalizationTokensError'});
+        return;
+      }
+    }
+    
     const obj = this.getTransformedData(formData);
 
     this.props.actions.editTemplate(obj, this.onUpdateTemplateComplete);
   };
+  
+  checkForPersonalizationTokens = (formData) => {
+    // Check for {{ }} (liquid tags) and [ ] (event context tags) in mobile push content
+    const tokenRegex = /\{\{[\s\S]*?\}\}|\[[\s\S]*?\]/;
+    
+    // Check all tabs/versions for personalization tokens
+    if (formData && typeof formData === 'object') {
+      for (const key in formData) {
+        const tabData = formData[key];
+        if (tabData && typeof tabData === 'object') {
+          for (const fieldKey in tabData) {
+            const fieldValue = tabData[fieldKey];
+            if (typeof fieldValue === 'string' && tokenRegex.test(fieldValue)) {
+              return true;
+            }
+          }
+        }
+      }
+    }
+    return false;
+  };
+  
   handleFrameTasks = (e) => {
     //
     const type = e.data;
@@ -2186,6 +2227,7 @@ export class Edit extends React.Component { // eslint-disable-line react/prefer-
                 hideTestAndPreviewBtn={this.props.hideTestAndPreviewBtn}
                 isFullMode={this.props.isFullMode}
                 eventContextTags={this.props?.eventContextTags}
+                restrictPersonalization={this.props.restrictPersonalization}
               />;
               })()}
             </CapColumn>
@@ -2295,6 +2337,9 @@ Edit.propTypes = {
   showTestAndPreviewSlidebox: PropTypes.bool,
   handleTestAndPreview: PropTypes.func,
   handleCloseTestAndPreview: PropTypes.func,
+  restrictPersonalization: PropTypes.bool,
+  isAnonymousType: PropTypes.bool,
+  onPersonalizationTokensChange: PropTypes.func,
 };
 
 const mapStateToProps = createStructuredSelector({

package/v2Containers/MobilePush/Edit/messages.js

@@ -334,4 +334,8 @@ export default defineMessages({
     id: 'creatives.containersV2.MobilePush.Edit.thisSectionDisabledHoverText',
     defaultMessage: 'This section is being revamped. Till then it will remain disabled.',
   },
+  "personalizationTokensErrorMessage": {
+    id: 'creatives.containersV2.MobilePush.Edit.personalizationTokensErrorMessage',
+    defaultMessage: 'Personalization tags are not supported for anonymous customers. Please remove the tags.',
+  },
 });

package/v2Containers/MobilePushNew/components/PlatformContentFields.js

@@ -24,6 +24,7 @@ import {
 import messages from "../messages";
 import MediaUploaders from "./MediaUploaders";
 import CtaButtons from "./CtaButtons";
+import { hasPersonalizationTags } from "../../../utils/commonUtils";
 
 const PlatformContentFields = ({
   deviceType,
@@ -40,8 +41,17 @@ const PlatformContentFields = ({
   tags,
   injectedTags,
   selectedOfferDetails,
+  // new prop to disable personalization features for anonymous users
+  restrictPersonalization = false,
 }) => {
   const { title: titleError, message: messageError } = errors;
+
+  const titleErrorToShow = titleError || (restrictPersonalization && hasPersonalizationTags(content.title)
+    ? formatMessage(messages.personalizationTagsErrorMessage)
+    : "");
+  const messageErrorToShow = messageError || (restrictPersonalization && hasPersonalizationTags(content.message)
+    ? formatMessage(messages.personalizationTagsErrorMessage)
+    : "");
   const {
     handleTitleChange,
     handleMessageChange,
@@ -139,14 +149,19 @@ const PlatformContentFields = ({
   );
 
   const getTagList = useCallback(
-    (index) => (
-      <TagList
-        {...tagListProps}
-        onTagSelect={(value) => onTagSelect(value, index)}
-        onContextChange={handleOnTagsContextChange}
-      />
-    ),
-    [tagListProps, onTagSelect, handleOnTagsContextChange]
+    (index) => {
+      const disableMsg = restrictPersonalization ? formatMessage(messages.personalizationNotSupportedAnonymous) : undefined;
+      return (
+        <TagList
+          {...tagListProps}
+          disabled={restrictPersonalization}
+          disableTooltipMsg={disableMsg}
+          onTagSelect={(value) => onTagSelect(value, index)}
+          onContextChange={handleOnTagsContextChange}
+        />
+      );
+    },
+    [tagListProps, onTagSelect, handleOnTagsContextChange, restrictPersonalization, formatMessage]
   );
 
   const onButtonTagSelect = useCallback(
@@ -178,9 +193,9 @@ const PlatformContentFields = ({
             size="default"
             isRequired
             errorMessage={
-              titleError && (
+              titleErrorToShow && (
                 <CapError className="mobile-push-template-title-error">
-                  {titleError}
+                  {titleErrorToShow}
                 </CapError>
               )
             }
@@ -202,9 +217,9 @@ const PlatformContentFields = ({
             size="default"
             isRequired
             errorMessage={
-              messageError && (
+              messageErrorToShow && (
                 <CapError className="mobile-push-template-message-error">
-                  {messageError}
+                  {messageErrorToShow}
                 </CapError>
               )
             }
@@ -314,6 +329,10 @@ const PlatformContentFields = ({
                           tags={tags}
                           injectedTags={injectedTags}
                           selectedOfferDetails={selectedOfferDetails}
+                          disabled={restrictPersonalization}
+                          disableTooltipMsg={
+                            restrictPersonalization ? formatMessage(messages.personalizationNotSupportedAnonymous) : undefined
+                          }
                         />
                       </CapRow>
                       <CapInput
@@ -389,6 +408,11 @@ PlatformContentFields.propTypes = {
   linkProps: PropTypes.object.isRequired,
   sameContent: PropTypes.bool.isRequired,
   formatMessage: PropTypes.func.isRequired,
+  restrictPersonalization: PropTypes.bool,
+};
+
+PlatformContentFields.defaultProps = {
+  restrictPersonalization: false,
 };
 
 export default PlatformContentFields;

package/v2Containers/MobilePushNew/components/tests/PlatformContentFields.test.js

@@ -11,25 +11,29 @@ import {
 jest.mock("@capillarytech/cap-ui-library/CapRow", () => ({ children }) => <div>{children}</div>);
 jest.mock("@capillarytech/cap-ui-library/CapColumn", () => ({ children }) => <div>{children}</div>);
 jest.mock("@capillarytech/cap-ui-library/CapInput", () => {
-  const MockCapInput = ({ value, onChange, errorMessage, error, ...props }) => (
+  const MockCapInput = ({
+    value, onChange, errorMessage, error, ...props
+  }) => (
     <div>
       <input value={value || ""} onChange={onChange} error={error} {...props} />
       {(errorMessage || error) && <div data-testid="error-message">{errorMessage || error}</div>}
     </div>
   );
-  
-  MockCapInput.TextArea = ({ value, onChange, errorMessage, error, ...props }) => (
+
+  MockCapInput.TextArea = ({
+    value, onChange, errorMessage, error, ...props
+  }) => (
     <div>
-      <textarea 
-        value={value || ""} 
-        onChange={onChange} 
+      <textarea
+        value={value || ""}
+        onChange={onChange}
         data-testid="message-textarea"
         {...props}
       />
       {(errorMessage || error) && <div data-testid="error-message">{errorMessage || error}</div>}
     </div>
   );
-  
+
   return MockCapInput;
 });
 jest.mock("@capillarytech/cap-ui-library/CapHeading", () => ({ children }) => <div>{children}</div>);
@@ -56,17 +60,19 @@ jest.mock("@capillarytech/cap-ui-library/CapLabel", () => ({ children }) => <lab
 jest.mock("@capillarytech/cap-ui-library/CapInfoNote", () => ({ message }) => <div data-testid="info-note">{message}</div>);
 
 // Mock child components
-jest.mock("../../../TagList", () => ({ onTagSelect, onContextChange, label, ...props }) => (
-  <div data-testid="tag-list">
-    <button 
-      type="button" 
+jest.mock("../../../TagList", () => ({
+  onTagSelect, onContextChange, label, disabled, disableTooltipMsg, ...props
+}) => (
+  <div data-testid="tag-list" data-disabled={disabled || false} data-tooltip={disableTooltipMsg || ''}>
+    <button
+      type="button"
       onClick={() => onTagSelect && onTagSelect('test_tag')}
       data-testid="tag-select-button"
     >
       Select Tag
     </button>
-    <button 
-      type="button" 
+    <button
+      type="button"
       onClick={() => onContextChange && onContextChange('test_context')}
       data-testid="tag-context-button"
     >
@@ -99,6 +105,8 @@ jest.mock("../../messages", () => ({
   deepLinkKeysPlaceholder: { id: "deepLinkKeysPlaceholder", defaultMessage: "Enter {key}" },
   deepLinkKeysRequired: { id: "deepLinkKeysRequired", defaultMessage: "Deep link keys are required" },
   addLabels: { id: "addLabels", defaultMessage: "Add labels" },
+  personalizationTagsErrorMessage: { id: "personalizationTagsErrorMessage", defaultMessage: "Personalization tags are not supported for anonymous customers, please remove the tags." },
+  personalizationNotSupportedAnonymous: { id: "personalizationNotSupportedAnonymous", defaultMessage: "Personalization tags are not supported for anonymous customers" },
 }));
 
 // Mock constants
@@ -171,6 +179,7 @@ describe("PlatformContentFields", () => {
     tags: ["tag1", "tag2"],
     injectedTags: [],
     selectedOfferDetails: null,
+    restrictPersonalization: false,
   };
 
   const renderComponent = (props = {}) => render(
@@ -255,6 +264,38 @@ describe("PlatformContentFields", () => {
 
       expect(getByTestId("cap-error")).toHaveTextContent("Message is required");
     });
+
+    it("should show inline personalization error when restricted and tokens present", () => {
+      const personalizationErrorMsg = "Personalization tags are not supported for anonymous customers";
+      const formatMessageStub = jest.fn((msg) => msg?.defaultMessage ?? "");
+      const { container } = renderComponent({
+        restrictPersonalization: true,
+        content: { ...defaultProps.content, message: "Hello {{user}}" },
+        formatMessage: formatMessageStub,
+      });
+      expect(container.textContent).toContain(personalizationErrorMsg);
+      expect(formatMessageStub).toHaveBeenCalledWith(
+        expect.objectContaining({ defaultMessage: expect.stringContaining("Personalization tags") })
+      );
+    });
+  });
+
+  describe("Personalization restriction", () => {
+    it("disables tag list and shows tooltip when restrictPersonalization true", () => {
+      const formatMessageForTooltip = jest.fn((msg) => msg?.defaultMessage ?? "");
+      const { getAllByTestId } = renderComponent({
+        restrictPersonalization: true,
+        formatMessage: formatMessageForTooltip,
+      });
+      const tagLists = getAllByTestId("tag-list");
+      expect(tagLists.length).toBeGreaterThan(0);
+      tagLists.forEach((tag) => {
+        expect(tag).toHaveAttribute('data-disabled', 'true');
+      });
+      expect(formatMessageForTooltip).toHaveBeenCalledWith(
+        expect.objectContaining({ defaultMessage: "Personalization tags are not supported for anonymous customers" })
+      );
+    });
   });
 
   describe("Media Type Selection", () => {
@@ -390,7 +431,7 @@ describe("PlatformContentFields", () => {
   // Deep link keys handling - covering lines 109-120, 134, 297-303
   it('should handle deep link keys with array from selection', () => {
     const mockDeepLink = [
-      { value: 'test-deep-link', keys: ['key1', 'key2'] }
+      { value: 'test-deep-link', keys: ['key1', 'key2'] },
     ];
     const mockLinkProps = {
       deepLink: mockDeepLink,
@@ -428,7 +469,7 @@ describe("PlatformContentFields", () => {
 
   it('should handle deep link keys with single key from selection', () => {
     const mockDeepLink = [
-      { value: 'test-deep-link', keys: 'single-key' }
+      { value: 'test-deep-link', keys: 'single-key' },
     ];
     const mockLinkProps = {
       deepLink: mockDeepLink,
@@ -466,7 +507,7 @@ describe("PlatformContentFields", () => {
 
   it('should handle deep link keys with no keys from selection but existing keys', () => {
     const mockDeepLink = [
-      { value: 'test-deep-link', keys: [] } // No keys from selection
+      { value: 'test-deep-link', keys: [] }, // No keys from selection
     ];
     const mockLinkProps = {
       deepLink: mockDeepLink,
@@ -503,7 +544,7 @@ describe("PlatformContentFields", () => {
 
   it('should handle deep link keys with no keys at all', () => {
     const mockDeepLink = [
-      { value: 'test-deep-link', keys: [] } // No keys from selection
+      { value: 'test-deep-link', keys: [] }, // No keys from selection
     ];
     const mockLinkProps = {
       deepLink: mockDeepLink,
@@ -540,7 +581,7 @@ describe("PlatformContentFields", () => {
 
   it('should handle deep link keys with string value instead of array', () => {
     const mockDeepLink = [
-      { value: 'test-deep-link', keys: 'single-key' }
+      { value: 'test-deep-link', keys: 'single-key' },
     ];
     const mockLinkProps = {
       deepLink: mockDeepLink,
@@ -577,7 +618,7 @@ describe("PlatformContentFields", () => {
 
   it('should handle deep link keys with undefined deepLinkKeysValue', () => {
     const mockDeepLink = [
-      { value: 'test-deep-link', keys: ['key1', 'key2'] }
+      { value: 'test-deep-link', keys: ['key1', 'key2'] },
     ];
     const mockLinkProps = {
       deepLink: mockDeepLink,
@@ -615,7 +656,7 @@ describe("PlatformContentFields", () => {
 
   it('should handle deep link keys placeholder with fallback', () => {
     const mockDeepLink = [
-      { value: 'test-deep-link', keys: ['key1', 'key2'] } // Need keys to trigger the section
+      { value: 'test-deep-link', keys: ['key1', 'key2'] }, // Need keys to trigger the section
     ];
     const mockLinkProps = {
       deepLink: mockDeepLink,
@@ -655,7 +696,7 @@ describe("PlatformContentFields", () => {
 
   it('should handle deep link keys error display', () => {
     const mockDeepLink = [
-      { value: 'test-deep-link', keys: ['key1', 'key2'] }
+      { value: 'test-deep-link', keys: ['key1', 'key2'] },
     ];
     const mockLinkProps = {
       deepLink: mockDeepLink,
@@ -727,7 +768,7 @@ describe("PlatformContentFields", () => {
   describe('Deep link query parameter handling', () => {
     it('should match deep link with query parameters', () => {
       const mockDeepLink = [
-        { value: 'myapp://profile', keys: ['userId'] }
+        { value: 'myapp://profile', keys: ['userId'] },
       ];
       const mockLinkProps = {
         deepLink: mockDeepLink,
@@ -766,7 +807,7 @@ describe("PlatformContentFields", () => {
 
     it('should not match deep link when no base match exists with query parameters', () => {
       const mockDeepLink = [
-        { value: 'myapp://settings', keys: ['theme'] }
+        { value: 'myapp://settings', keys: ['theme'] },
       ];
       const mockLinkProps = {
         deepLink: mockDeepLink,
@@ -805,7 +846,7 @@ describe("PlatformContentFields", () => {
 
     it('should handle multiple query parameters in deep link value', () => {
       const mockDeepLink = [
-        { value: 'testapp://dashboard', keys: ['category', 'filter'] }
+        { value: 'testapp://dashboard', keys: ['category', 'filter'] },
       ];
       const mockLinkProps = {
         deepLink: mockDeepLink,
@@ -844,7 +885,7 @@ describe("PlatformContentFields", () => {
 
     it('should handle empty query parameters in deep link value', () => {
       const mockDeepLink = [
-        { value: 'myapp://search', keys: ['query'] }
+        { value: 'myapp://search', keys: ['query'] },
       ];
       const mockLinkProps = {
         deepLink: mockDeepLink,
@@ -860,7 +901,7 @@ describe("PlatformContentFields", () => {
         linkType: 'DEEP_LINK',
       };
 
-      const { getByText } = render(        
+      const { getByText } = render(
         <IntlProvider locale="en">
           <PlatformContentFields
             deviceType="ANDROID"
@@ -884,7 +925,7 @@ describe("PlatformContentFields", () => {
 
   it('should handle tag selection for external link in buttons', () => {
     const mockHandleExternalLinkChange = jest.fn();
-    
+
     // Create a test that actually renders the component and triggers the useCallback
     const { container } = renderComponent({
       content: {

package/v2Containers/MobilePushNew/index.js

@@ -89,13 +89,14 @@ import { PlatformContentFields } from "./components";
 import { CREATE, EDIT, TRACK_CREATE_MPUSH } from "../App/constants";
 import { validateExternalLink, validateDeepLink } from "./utils";
 import messages from "./messages";
-import { EXTERNAL_URL } from "../CreativesContainer/constants";
+import { EXTERNAL_URL, MOBILE_PUSH } from "../CreativesContainer/constants";
 import createMobilePushPayloadWithIntl from "../../utils/createMobilePushPayload";
 import { MOBILEPUSH } from "../../v2Components/CapVideoUpload/constants";
 import { StyledCapTab } from "./style";
 import TestAndPreviewSlidebox from "../../v2Components/TestAndPreviewSlidebox";
-import { MOBILE_PUSH } from "../CreativesContainer/constants";
+
 import creativesMessages from "../CreativesContainer/messages";
+import { error } from "jquery";
 
 // Helper function to extract deep link keys from URL where value equals key
 const extractDeepLinkKeys = (deepLinkValue) => {
@@ -506,6 +507,8 @@ const MobilePushNew = ({
   isGetFormData,
   getTemplateDetailsInProgress,
   onCreateComplete,
+  // new flag from parent - when true personalization via tags should be disabled
+  restrictPersonalization = false,
 }) => {
   const { formatMessage } = intl;
 
@@ -836,6 +839,14 @@ const MobilePushNew = ({
       if (!value || value.trim() === "") {
         error = formatMessage(messages.emptyTemplateDescErrorMessage);
       }
+      // personalization restriction check
+      if (
+        restrictPersonalization
+        && value
+        && ((value.includes("{{") && value.includes("}}")) || (value.includes("[") && value.includes("]")))
+      ) {
+        error = formatMessage(creativesMessages.personalizationTokensErrorMessage);
+      }
       return error || "";
     },
     [templateDescErrorHandler, formatMessage]
@@ -847,9 +858,17 @@ const MobilePushNew = ({
       if (!value || value.trim() === "") {
         error = formatMessage(messages.emptyTemplateDescErrorMessage);
       }
+      // personalization restriction check
+      if (
+        restrictPersonalization
+        && value
+        && ((value.includes("{{") && value.includes("}}")) || (value.includes("[") && value.includes("]")))
+      ) {
+        error = formatMessage(creativesMessages.personalizationTokensErrorMessage);
+      }
       return error || "";
     },
-    [templateDescErrorHandler, formatMessage]
+    [templateDescErrorHandler, formatMessage, restrictPersonalization]
   );
 
   const handleOnTagsContextChange = useCallback(
@@ -2001,6 +2020,11 @@ const MobilePushNew = ({
         tags: tags || [],
         injectedTags: injectedTags || {},
         selectedOfferDetails,
+        // disable tag button when personalization is restricted
+        disabled: restrictPersonalization,
+        disableTooltipMsg: restrictPersonalization
+          ? formatMessage(creativesMessages.personalizationNotSupportedAnonymous)
+          : undefined,
       };
 
       // Fix nested ternary for videoAssetList and gifAssetList
@@ -2101,6 +2125,7 @@ const MobilePushNew = ({
           tags={tags}
           injectedTags={injectedTags}
           selectedOfferDetails={selectedOfferDetails}
+          restrictPersonalization={restrictPersonalization}
         />
       );
     }, [androidContent, iosContent, androidTitleError, iosTitleError, androidMessageError, iosMessageError, androidExternalLinkError, iosExternalLinkError, androidDeepLinkError, iosDeepLinkError, androidDeepLinkKeysError, iosDeepLinkKeysError, formatMessage, activeTab, imageSrc, isFullMode, imageData, androidAssetList, iosAssetList, videoState, videoData, location, tags, injectedTags, selectedOfferDetails, primaryButtonAndroid, secondaryButtonAndroid, primaryButtonIos, secondaryButtonIos, ctaData, deepLink, mobilePushActions, carouselActiveTabIndex, carouselLinkErrors, handleTitleChange, handleMessageChange, handleMediaTypeChange, handleActionOnClickChange, handleLinkTypeChange, handleDeepLinkChange, handleDeepLinkKeysChange, handleExternalLinkChange, onTagSelect, handleOnTagsContextChange, setUpdateMpushImageSrc, updateOnMpushImageReUpload, setUpdateMpushVideoSrc, updateOnMpushVideoReUpload, clearImageDataByMediaType, handleCarouselDataChange, updateCarouselLinkError, sameContent, updateHandler, deleteHandler]
@@ -2136,6 +2161,9 @@ const MobilePushNew = ({
     return panes;
   }, [isAndroidSupported, isIosSupported, renderContentFields, formatMessage]);
 
+  const errorInTitle = activeTab === ANDROID ? androidTitleError : iosTitleError;
+  const errorInMessage = activeTab === ANDROID ? androidMessageError : iosMessageError;
+
   // Save button disabled logic: only check enabled platforms
   const isSaveDisabled = (
     (isAndroidSupported && (!androidContent?.title?.trim() || !androidContent?.message?.trim()))
@@ -2143,6 +2171,7 @@ const MobilePushNew = ({
     || templateNameError
     || Object.values(carouselLinkErrors).some((error) => error !== null && error !== "")
     || !isCarouselDataValid()
+    || errorInTitle || errorInMessage
   );
 
   // Validation in handleSave: only show errors for enabled platforms

package/v2Containers/MobilePushNew/messages.js

@@ -269,4 +269,12 @@ export default defineMessages({
     id: `${scope}.gifFileTypeError`,
     defaultMessage: 'Only GIF files are allowed',
   },
+  personalizationTagsErrorMessage: {
+    id: `${scope}.personalizationTagsErrorMessage`,
+    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/MobilepushWrapper/index.js

@@ -72,7 +72,7 @@ export class MobilepushWrapper extends React.Component { // eslint-disable-line
   }
 
   render() {
-    const {mobilePushCreateMode, step, getFormData, setIsLoadingContent, isGetFormData, query, isFullMode, showTemplateName, type, onValidationFail, onPreviewContentClicked, onTestContentClicked, templateData, eventContextTags = [], showTestAndPreviewSlidebox, handleTestAndPreview, handleCloseTestAndPreview} = this.props;
+    const {mobilePushCreateMode, step, getFormData, setIsLoadingContent, isGetFormData, query, isFullMode, showTemplateName, type, onValidationFail, onPreviewContentClicked, onTestContentClicked, templateData, eventContextTags = [], showTestAndPreviewSlidebox, handleTestAndPreview, handleCloseTestAndPreview, restrictPersonalization, isAnonymousType, onPersonalizationTokensChange} = this.props;
     const {templateName} = this.state;
     const isShowMobilepushCreate = !isEmpty(mobilePushCreateMode);
     return (
@@ -124,6 +124,9 @@ export class MobilepushWrapper extends React.Component { // eslint-disable-line
               showTestAndPreviewSlidebox={showTestAndPreviewSlidebox}
               handleTestAndPreview={handleTestAndPreview}
               handleCloseTestAndPreview={handleCloseTestAndPreview}
+              restrictPersonalization={restrictPersonalization}
+              isAnonymousType={isAnonymousType}
+              onPersonalizationTokensChange={onPersonalizationTokensChange}
           />
 
 
@@ -154,6 +157,9 @@ MobilepushWrapper.propTypes = {
   showTestAndPreviewSlidebox: PropTypes.bool,
   handleTestAndPreview: PropTypes.func,
   handleCloseTestAndPreview: PropTypes.func,
+  restrictPersonalization: PropTypes.bool,
+  isAnonymousType: PropTypes.bool,
+  onPersonalizationTokensChange: PropTypes.func,
 };
 
 

package/v2Containers/SmsTrai/Create/index.scss

@@ -98,5 +98,5 @@
 }
 
 .create-dlt-msg {
-  margin-left: 100px;
+  margin-left: 6.25rem;
 }