cap-creatives-ui 8.0.280 → 8.0.321

package/app/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/app/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/app/v2Containers/MobilePushNew/index.js

@@ -77,7 +77,6 @@ import { getContent } from "../MobilePush/commonMethods";
 import { getMessageObject } from "../../utils/messageUtils";
 import { gtmPush } from "../../utils/gtmTrackers";
 import mobilePushReducer from "./reducer";
-import { hasLiquidSupportFeature } from "../../utils/common";
 import formBuilderMessages from "../../v2Components/FormBuilder/messages";
 import { validateMobilePushContent } from "../../utils/commonUtils";
 import { getSingleTab } from "../InApp/utils";
@@ -89,13 +88,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 +506,9 @@ const MobilePushNew = ({
   isGetFormData,
   getTemplateDetailsInProgress,
   onCreateComplete,
+  // new flag from parent - when true personalization via tags should be disabled
+  restrictPersonalization = false,
+  onPersonalizationTokensChange,
 }) => {
   const { formatMessage } = intl;
 
@@ -799,10 +802,9 @@ const MobilePushNew = ({
     (value) => {
       let errorTemplateDescMessage = "";
 
-      const { unsupportedTags, isBraceError } = validateTags({
+      const { isBraceError } = validateTags({
         content: value,
         tagsParam: tags,
-        injectedTagsParams: injectedTags,
         location,
         tagModule: getDefaultTags,
         isFullMode,
@@ -812,14 +814,6 @@ const MobilePushNew = ({
           messages.emptyTemplateDescErrorMessage
         );
       }
-      if (unsupportedTags?.length > 0) {
-        errorTemplateDescMessage = formatMessage(
-          globalMessages.unsupportedTagsValidationError,
-          {
-            unsupportedTags,
-          }
-        );
-      }
       if (isBraceError) {
         errorTemplateDescMessage = formatMessage(
           globalMessages.unbalanacedCurlyBraces
@@ -836,6 +830,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 +849,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(
@@ -1724,6 +1734,29 @@ const MobilePushNew = ({
   const isAndroidSupported = accountData?.configs?.android === '1';
   const isIosSupported = accountData?.configs?.ios === '1';
 
+  // Notify parent when personalization tokens are added/removed (for anonymous user flow)
+  useEffect(() => {
+    if (!restrictPersonalization || typeof onPersonalizationTokensChange !== 'function') return;
+    const hasToken = (value) => value && (
+      (value.includes('{{') && value.includes('}}'))
+      || (value.includes('[') && value.includes(']'))
+    );
+    const hasTokens = (
+      (isAndroidSupported && (hasToken(androidContent?.title) || hasToken(androidContent?.message)))
+      || (isIosSupported && (hasToken(iosContent?.title) || hasToken(iosContent?.message)))
+    );
+    onPersonalizationTokensChange(hasTokens);
+  }, [
+    restrictPersonalization,
+    androidContent?.title,
+    androidContent?.message,
+    iosContent?.title,
+    iosContent?.message,
+    isAndroidSupported,
+    isIosSupported,
+    onPersonalizationTokensChange,
+  ]);
+
   // Validation logic for template creation/update
   const isAndroidFieldsMissing = isAndroidSupported && (!androidContent?.title?.trim() || !androidContent?.message?.trim());
   const isIosFieldsMissing = isIosSupported && (!iosContent?.title?.trim() || !iosContent?.message?.trim());
@@ -2001,6 +2034,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 +2139,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 +2175,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 +2185,7 @@ const MobilePushNew = ({
     || templateNameError
     || Object.values(carouselLinkErrors).some((error) => error !== null && error !== "")
     || !isCarouselDataValid()
+    || errorInTitle || errorInMessage
   );
 
   // Validation in handleSave: only show errors for enabled platforms
@@ -2599,6 +2642,12 @@ const MobilePushNew = ({
     };
     const onSuccess = () => handleSave();
 
+    // When liquid is enabled and isFullMode is true, skip liquid validation and proceed directly
+    if (isFullMode) {
+      onSuccess();
+      return;
+    }
+
     validateMobilePushContent([androidContent, iosContent], {
       currentTab: activeTab === ANDROID ? 1 : 2,
       onError,
@@ -2606,20 +2655,6 @@ const MobilePushNew = ({
       getLiquidTags: globalActionsProps.getLiquidTags,
       formatMessage,
       messages: formBuilderMessages,
-      tagLookupMap: metaEntities?.tagLookupMap || {},
-      eventContextTags: metaEntities?.eventContextTags || [],
-      isLiquidFlow: hasLiquidSupportFeature(),
-      forwardedTags: {},
-      skipTags: (tag) => {
-        const skipRegexes = [
-          /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]*\)/,
-        ];
-        return skipRegexes.some((regex) => regex.test(tag));
-      },
       singleTab: getSingleTab(accountData),
     });
   }, [
@@ -2628,12 +2663,10 @@ const MobilePushNew = ({
     activeTab,
     globalActionsProps,
     formatMessage,
-    metaEntities,
     accountData,
+    isFullMode,
   ]);
 
-  const isLiquidFlow = hasLiquidSupportFeature();
-
   useEffect(() => {
     // Always map to { label } for both platforms
     const newButtons = Array.isArray(ctaData)
@@ -2880,16 +2913,22 @@ const MobilePushNew = ({
     setShowTestAndPreviewSlidebox(false);
   }, []);
 
-  // Add useEffect to handle isGetFormData prop changes
+  // Add useEffect to handle isGetFormData prop changes (e.g. Done clicked in footer)
+  // In library mode: run liquid validation (extractTags) first; on success liquidMiddleWare calls handleSave
+  // In full mode: call handleSave directly
   useEffect(() => {
     if (isGetFormData) {
-      handleSave();
+      if (!isFullMode) {
+        liquidMiddleWare();
+      } else {
+        handleSave();
+      }
       // Reset the flag to prevent infinite loop
       if (onValidationFail) {
         onValidationFail();
       }
     }
-  }, [isGetFormData, handleSave, onValidationFail]);
+  }, [isGetFormData, handleSave, onValidationFail, isFullMode, liquidMiddleWare]);
 
   // Add message event listener to handle parent communication (like old MobilePush components)
   useEffect(() => {
@@ -3030,7 +3069,8 @@ const MobilePushNew = ({
                     <CapButton
                       type="primary"
                       onClick={() => {
-                        if (isLiquidFlow) {
+                        // Liquid validation (extractTags) only in library mode
+                        if (!isFullMode) {
                           liquidMiddleWare();
                         } else {
                           handleSave();
@@ -3046,6 +3086,7 @@ const MobilePushNew = ({
                       className="mobilepush-test-preview-btn"
                       type="secondary"
                       style={{ marginLeft: '8px' }}
+                      disabled={isSaveDisabled}
                     >
                       <FormattedMessage {...creativesMessages.testAndPreview} />
                     </CapButton>
@@ -3106,6 +3147,7 @@ MobilePushNew.propTypes = {
   isGetFormData: PropTypes.bool,
   getTemplateDetailsInProgress: PropTypes.bool,
   onCreateComplete: PropTypes.func,
+  onPersonalizationTokensChange: PropTypes.func,
 };
 
 MobilePushNew.defaultProps = {
@@ -3136,6 +3178,7 @@ MobilePushNew.defaultProps = {
   isGetFormData: false,
   getTemplateDetailsInProgress: false,
   onCreateComplete: () => {},
+  onPersonalizationTokensChange: undefined,
 };
 
 const mapStateToProps = createStructuredSelector({

package/app/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/app/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, getLiquidTags, setIsLoadingContent, isGetFormData, query, isFullMode, showTemplateName, type, onValidationFail, onPreviewContentClicked, onTestContentClicked, templateData, eventContextTags = [], waitEventContextTags = {},showTestAndPreviewSlidebox, handleTestAndPreview, handleCloseTestAndPreview, restrictPersonalization, isAnonymousType, onPersonalizationTokensChange} = this.props;
     const {templateName} = this.state;
     const isShowMobilepushCreate = !isEmpty(mobilePushCreateMode);
     return (
@@ -102,6 +102,7 @@ export class MobilepushWrapper extends React.Component { // eslint-disable-line
           <div>
             {isShowMobilepushCreate && <MobilepushCreate
               getFormLibraryData={getFormData}
+              getLiquidTags={getLiquidTags}
               setIsLoadingContent={setIsLoadingContent}
               defaultData={{"template-name": templateName}}
               location={{
@@ -120,10 +121,14 @@ export class MobilepushWrapper extends React.Component { // eslint-disable-line
               templateData={templateData}
               hideTestAndPreviewBtn={this.props.hideTestAndPreviewBtn}
               eventContextTags={eventContextTags}
+              waitEventContextTags={waitEventContextTags}
               showLiquidErrorInFooter={this.props.showLiquidErrorInFooter}
               showTestAndPreviewSlidebox={showTestAndPreviewSlidebox}
               handleTestAndPreview={handleTestAndPreview}
               handleCloseTestAndPreview={handleCloseTestAndPreview}
+              restrictPersonalization={restrictPersonalization}
+              isAnonymousType={isAnonymousType}
+              onPersonalizationTokensChange={onPersonalizationTokensChange}
           />
 
 
@@ -140,6 +145,7 @@ MobilepushWrapper.propTypes = {
   mobilePushCreateMode: PropTypes.string,
   step: PropTypes.string,
   getFormData: PropTypes.string,
+  getLiquidTags: PropTypes.func,
   setIsLoadingContent: PropTypes.func,
   onEnterTemplateName: PropTypes.func,
   onRemoveTemplateName: PropTypes.func,
@@ -150,10 +156,14 @@ MobilepushWrapper.propTypes = {
   type: PropTypes.string,
   onValidationFail: PropTypes.func,
   eventContextTags: PropTypes.array,
+  waitEventContextTags: PropTypes.object,
   showLiquidErrorInFooter: PropTypes.func,
   showTestAndPreviewSlidebox: PropTypes.bool,
   handleTestAndPreview: PropTypes.func,
   handleCloseTestAndPreview: PropTypes.func,
+  restrictPersonalization: PropTypes.bool,
+  isAnonymousType: PropTypes.bool,
+  onPersonalizationTokensChange: PropTypes.func,
 };