cap-creatives-ui 8.0.280 → 8.0.321

package/app/v2Containers/WebPush/Create/index.js

@@ -72,6 +72,7 @@ import {
 } from '../../Cap/selectors';
 import './index.scss';
 import { WEBPUSH } from '../../CreativesContainer/constants';
+import { isAiContentBotDisabled } from '../../../utils/common';
 
 // Memoized TagList wrapper components for better performance
 const MemoizedTagList = memo(({
@@ -83,8 +84,12 @@ const MemoizedTagList = memo(({
   injectedTags,
   selectedOfferDetails,
   eventContextTags,
+  waitEventContextTags,
   forwardedTags,
   onTagSelect,
+  restrictPersonalization = false,
+  disabled = false,
+  disableTooltipMsg,
 }) => (
   <TagList
     moduleFilterEnabled={moduleFilterEnabled}
@@ -95,8 +100,12 @@ const MemoizedTagList = memo(({
     injectedTags={injectedTags}
     selectedOfferDetails={selectedOfferDetails}
     eventContextTags={eventContextTags}
+    waitEventContextTags={waitEventContextTags}
     forwardedTags={forwardedTags}
     onTagSelect={onTagSelect}
+    restrictPersonalization={restrictPersonalization}
+    disabled={disabled || restrictPersonalization}
+    disableTooltipMsg={disableTooltipMsg}
   />
 ), (prevProps, nextProps) => {
   // Custom comparison function for better memoization
@@ -109,8 +118,12 @@ const MemoizedTagList = memo(({
     && prevProps.injectedTags === nextProps.injectedTags
     && prevProps.selectedOfferDetails === nextProps.selectedOfferDetails
     && prevProps.eventContextTags === nextProps.eventContextTags
+    && prevProps.waitEventContextTags === nextProps.waitEventContextTags
     && prevProps.forwardedTags === nextProps.forwardedTags
     && prevProps.onTagSelect === nextProps.onTagSelect
+    && prevProps.restrictPersonalization === nextProps.restrictPersonalization
+    && prevProps.disabled === nextProps.disabled
+    && prevProps.disableTooltipMsg === nextProps.disableTooltipMsg
   );
 });
 
@@ -142,10 +155,13 @@ const WebPushCreate = ({
   forwardedTags,
   selectedOfferDetails = [],
   eventContextTags = [],
+  waitEventContextTags = {},
   templateActions: templateActionsProps,
   Templates,
+  restrictPersonalization = false,
 }) => {
   const { formatMessage } = intl;
+  const aiContentBotDisabled = isAiContentBotDisabled();
 
   // Form state - kept in main component for now
   const [templateName, setTemplateName] = useState('');
@@ -220,6 +236,7 @@ const WebPushCreate = ({
     supportedTags: memoizedSupportedTags,
     injectedTags,
     eventContextTags,
+    waitEventContextTags,
   });
   const { tags, handleOnTagsContextChange, validationConfig } = tagState;
   const { weCrmAccounts } = Templates;
@@ -285,8 +302,8 @@ const WebPushCreate = ({
   const validateTemplateName = useCallback((value) => validateTemplateNameUtil(value), []);
 
   const validateTitle = useCallback(
-    (value) => validateTitleUtil(value, formatMessage, messages),
-    [formatMessage],
+    (value) => validateTitleUtil(value, formatMessage, messages, restrictPersonalization, validationConfig, isFullMode),
+    [formatMessage, restrictPersonalization, validationConfig, isFullMode],
   );
 
   const validateUrl = useCallback(
@@ -309,8 +326,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 +563,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 +586,7 @@ const WebPushCreate = ({
       return;
     }
 
+    
     // Set flag to indicate save/edit operation has been initiated
     saveInitiatedRef.current = true;
 
@@ -824,9 +842,13 @@ const WebPushCreate = ({
       injectedTags,
       selectedOfferDetails,
       eventContextTags,
+      waitEventContextTags,
       forwardedTags,
+      restrictPersonalization,
+      disabled: restrictPersonalization,
+      disableTooltipMsg: restrictPersonalization ? formatMessage(messages.personalizationNotSupportedAnonymous) : undefined,
     }),
-    [tags, injectedTags, selectedOfferDetails, eventContextTags, forwardedTags],
+    [tags, injectedTags, selectedOfferDetails, eventContextTags, waitEventContextTags, forwardedTags, restrictPersonalization, formatMessage],
   );
 
   // Memoized TagList components with optimized props
@@ -881,6 +903,7 @@ const WebPushCreate = ({
         )
       )
       || (onClickBehaviour === ON_CLICK_BEHAVIOUR_OPTIONS.REDIRECT_TO_URL && (!redirectUrl.trim() || redirectUrlError))
+      || !!titleError || !!messageError
     ),
     [
       createTemplateInProgress,
@@ -906,6 +929,8 @@ const WebPushCreate = ({
       onClickBehaviour,
       redirectUrl,
       redirectUrlError,
+      titleError,
+      messageError,
     ],
   );
 
@@ -980,6 +1005,7 @@ const WebPushCreate = ({
           messageCountRef={messageCountRef}
           messageTextAreaRef={messageTextAreaRef}
           handleMessageTextAreaRef={handleMessageTextAreaRef}
+          isAiContentBotDisabled={aiContentBotDisabled}
         />
         <MediaSection
           mediaType={mediaType}
@@ -1063,7 +1089,9 @@ WebPushCreate.propTypes = {
   forwardedTags: PropTypes.object,
   selectedOfferDetails: PropTypes.array,
   eventContextTags: PropTypes.array,
+  waitEventContextTags: PropTypes.object,
   templateActions: PropTypes.object,
+  restrictPersonalization: PropTypes.bool,
 };
 
 WebPushCreate.defaultProps = {
@@ -1090,8 +1118,10 @@ WebPushCreate.defaultProps = {
   forwardedTags: {},
   selectedOfferDetails: [],
   eventContextTags: [],
+  waitEventContextTags: {},
   templateActions: {},
   Templates: {},
+  restrictPersonalization: false,
 };
 
 const mapStateToProps = createStructuredSelector({

package/app/v2Containers/WebPush/Create/index.scss

@@ -81,6 +81,11 @@
     margin-bottom: -2.5625rem; // approx -41px
   }
 
+  .webpush-message-input-wrapper {
+    position: relative;
+    width: 100%;
+  }
+
   .webpush-buttons-section-heading {
     font-weight: $FONT_WEIGHT_MEDIUM;
     color: $CAP_G16;

package/app/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/app/v2Containers/WebPush/Create/preview/tests/NotificationContainer.test.js

@@ -1016,6 +1016,275 @@ describe('NotificationContainer', () => {
     });
   });
 
+  describe('platform.browser getter — 2-part vs 3-part class names', () => {
+    it('derives browser from 2-part class name (macos-chrome → parts[1])', () => {
+      // 'macos-chrome'.split('-') = ['macos', 'chrome'] → length=2 → browser = parts[1] = 'chrome'
+      const wrapper = mountWithIntl(
+        <NotificationContainer {...defaultProps} selectedOS={OS_MACOS} selectedBrowser={BROWSER_CHROME} />
+      );
+      expect(wrapper.find('.notification-container').hasClass('macos-chrome')).toBe(true);
+    });
+
+    it('derives browser from 3-part class name (android-mobile-chrome → parts[2])', () => {
+      // 'android-mobile-chrome'.split('-') = ['android', 'mobile', 'chrome'] → length=3 → browser = parts[2] = 'chrome'
+      const wrapper = mountWithIntl(
+        <NotificationContainer {...defaultProps} selectedOS={OS_ANDROID_MOBILE} selectedBrowser={BROWSER_CHROME} />
+      );
+      expect(wrapper.find('.notification-container').hasClass('android-mobile-chrome')).toBe(true);
+    });
+
+    it('derives browser from 3-part class name for Android Tablet (android-tablet-firefox → parts[2])', () => {
+      const wrapper = mountWithIntl(
+        <NotificationContainer {...defaultProps} selectedOS={OS_ANDROID_TABLET} selectedBrowser={BROWSER_FIREFOX} />
+      );
+      expect(wrapper.find('.notification-container').hasClass('android-tablet-firefox')).toBe(true);
+    });
+  });
+
+  describe('platform.isIOS getter (selectedOS === OS_IOS)', () => {
+    it('is true for iOS — renders IOSHeader', () => {
+      const wrapper = mountWithIntl(
+        <NotificationContainer {...defaultProps} selectedOS={OS_IOS} selectedBrowser={BROWSER_CHROME} />
+      );
+      expect(wrapper.find(IOSHeader).exists()).toBe(true);
+    });
+
+    it('is false for macOS — does not render IOSHeader', () => {
+      const wrapper = mountWithIntl(
+        <NotificationContainer {...defaultProps} selectedOS={OS_MACOS} selectedBrowser={BROWSER_CHROME} />
+      );
+      expect(wrapper.find(IOSHeader).exists()).toBe(false);
+    });
+
+    it('is false for Android Mobile — does not render IOSHeader', () => {
+      const wrapper = mountWithIntl(
+        <NotificationContainer {...defaultProps} selectedOS={OS_ANDROID_MOBILE} selectedBrowser={BROWSER_CHROME} />
+      );
+      expect(wrapper.find(IOSHeader).exists()).toBe(false);
+    });
+
+    it('is false for Windows — does not render IOSHeader', () => {
+      const wrapper = mountWithIntl(
+        <NotificationContainer {...defaultProps} selectedOS={OS_WINDOWS} selectedBrowser={BROWSER_CHROME} />
+      );
+      expect(wrapper.find(IOSHeader).exists()).toBe(false);
+    });
+  });
+
+  describe('platform.isIPadOS getter (selectedOS === OS_IPADOS)', () => {
+    it('is true for iPadOS — renders IOSHeader', () => {
+      const wrapper = mountWithIntl(
+        <NotificationContainer {...defaultProps} selectedOS={OS_IPADOS} selectedBrowser={BROWSER_CHROME} />
+      );
+      expect(wrapper.find(IOSHeader).exists()).toBe(true);
+    });
+
+    it('is false for Android Tablet — does not render IOSHeader', () => {
+      const wrapper = mountWithIntl(
+        <NotificationContainer {...defaultProps} selectedOS={OS_ANDROID_TABLET} selectedBrowser={BROWSER_CHROME} />
+      );
+      expect(wrapper.find(IOSHeader).exists()).toBe(false);
+      expect(wrapper.find(AndroidMobileChromeHeader).exists()).toBe(true);
+    });
+
+    it('is false for Windows — does not render IOSHeader', () => {
+      const wrapper = mountWithIntl(
+        <NotificationContainer {...defaultProps} selectedOS={OS_WINDOWS} selectedBrowser={BROWSER_CHROME} />
+      );
+      expect(wrapper.find(IOSHeader).exists()).toBe(false);
+    });
+
+    it('is false for macOS — does not render IOSHeader', () => {
+      const wrapper = mountWithIntl(
+        <NotificationContainer {...defaultProps} selectedOS={OS_MACOS} selectedBrowser={BROWSER_SAFARI} />
+      );
+      expect(wrapper.find(IOSHeader).exists()).toBe(false);
+    });
+  });
+
+  describe('platform.isMacOsBrandIconBrowser getter (isMacOs && supportsBrandIcon)', () => {
+    it('is true for macOS + Chrome (Chrome is in BRAND_ICON_SUPPORTED_BROWSERS) — shows brand icon in expanded', () => {
+      const wrapper = mountWithIntl(
+        <NotificationContainer
+          {...defaultProps}
+          selectedOS={OS_MACOS}
+          selectedBrowser={BROWSER_CHROME}
+          notificationState={NOTIFICATION_STATE_EXPANDED}
+          brandIcon="brand.png"
+          enableBrandIconPreview={true}
+        />
+      );
+      expect(wrapper.find(NotificationExpandedContent).prop('shouldShowBrandIconInExpandedMac')).toBe(true);
+    });
+
+    it('is true for macOS + Edge (Edge is in BRAND_ICON_SUPPORTED_BROWSERS)', () => {
+      const wrapper = mountWithIntl(
+        <NotificationContainer
+          {...defaultProps}
+          selectedOS={OS_MACOS}
+          selectedBrowser={BROWSER_EDGE}
+          notificationState={NOTIFICATION_STATE_EXPANDED}
+          brandIcon="brand.png"
+          enableBrandIconPreview={true}
+        />
+      );
+      expect(wrapper.find(NotificationExpandedContent).prop('shouldShowBrandIconInExpandedMac')).toBe(true);
+    });
+
+    it('is true for macOS + Opera (Opera is in BRAND_ICON_SUPPORTED_BROWSERS)', () => {
+      const wrapper = mountWithIntl(
+        <NotificationContainer
+          {...defaultProps}
+          selectedOS={OS_MACOS}
+          selectedBrowser={BROWSER_OPERA}
+          notificationState={NOTIFICATION_STATE_EXPANDED}
+          brandIcon="brand.png"
+          enableBrandIconPreview={true}
+        />
+      );
+      expect(wrapper.find(NotificationExpandedContent).prop('shouldShowBrandIconInExpandedMac')).toBe(true);
+    });
+
+    it('is false for macOS + Safari (Safari is NOT in BRAND_ICON_SUPPORTED_BROWSERS)', () => {
+      const wrapper = mountWithIntl(
+        <NotificationContainer
+          {...defaultProps}
+          selectedOS={OS_MACOS}
+          selectedBrowser={BROWSER_SAFARI}
+          notificationState={NOTIFICATION_STATE_EXPANDED}
+          brandIcon="brand.png"
+          enableBrandIconPreview={true}
+        />
+      );
+      expect(wrapper.find(NotificationExpandedContent).prop('shouldShowBrandIconInExpandedMac')).toBe(false);
+    });
+
+    it('is false for Windows + Chrome (not macOS) — renders WindowsChromeExpanded instead', () => {
+      const wrapper = mountWithIntl(
+        <NotificationContainer
+          {...defaultProps}
+          selectedOS={OS_WINDOWS}
+          selectedBrowser={BROWSER_CHROME}
+          notificationState={NOTIFICATION_STATE_EXPANDED}
+          brandIcon="brand.png"
+          enableBrandIconPreview={true}
+        />
+      );
+      expect(wrapper.find(NotificationExpandedContent).exists()).toBe(false);
+      expect(wrapper.find(WindowsChromeExpanded).exists()).toBe(true);
+    });
+
+    it('is false for macOS + Chrome when brandIcon is empty', () => {
+      const wrapper = mountWithIntl(
+        <NotificationContainer
+          {...defaultProps}
+          selectedOS={OS_MACOS}
+          selectedBrowser={BROWSER_CHROME}
+          notificationState={NOTIFICATION_STATE_EXPANDED}
+          brandIcon=""
+          enableBrandIconPreview={true}
+        />
+      );
+      expect(wrapper.find(NotificationExpandedContent).prop('shouldShowBrandIconInExpandedMac')).toBe(false);
+    });
+  });
+
+  describe('shouldRenderSeparateIOSCTAs behavior', () => {
+    const iosCollapsedWithCTAs = {
+      ...defaultProps,
+      selectedOS: OS_IOS,
+      selectedBrowser: BROWSER_CHROME,
+      notificationState: NOTIFICATION_STATE_COLLAPSED,
+      showSeparateIOSCTAs: true,
+      enableCtas: true,
+      buttons: [{ text: 'Accept' }, { text: 'Dismiss' }],
+    };
+
+    it('renders ios-notification-wrapper when all conditions are satisfied', () => {
+      const wrapper = mountWithIntl(<NotificationContainer {...iosCollapsedWithCTAs} />);
+      expect(wrapper.find('.ios-notification-wrapper').exists()).toBe(true);
+    });
+
+    it('renders ios-cta-container inside the wrapper', () => {
+      const wrapper = mountWithIntl(<NotificationContainer {...iosCollapsedWithCTAs} />);
+      expect(wrapper.find('.ios-cta-container').exists()).toBe(true);
+    });
+
+    it('renders one ios-cta-button per button', () => {
+      const wrapper = mountWithIntl(<NotificationContainer {...iosCollapsedWithCTAs} />);
+      expect(wrapper.find('.ios-cta-button').length).toBe(2);
+    });
+
+    it('renders the correct button label text', () => {
+      const wrapper = mountWithIntl(
+        <NotificationContainer
+          {...iosCollapsedWithCTAs}
+          buttons={[{ text: 'Confirm' }]}
+        />
+      );
+      expect(wrapper.find('.ios-cta-button').first().text()).toBe('Confirm');
+    });
+
+    it('still renders the notification-container inside the wrapper', () => {
+      const wrapper = mountWithIntl(<NotificationContainer {...iosCollapsedWithCTAs} />);
+      const iosWrapper = wrapper.find('.ios-notification-wrapper');
+      expect(iosWrapper.find('.notification-container').exists()).toBe(true);
+    });
+
+    it('does NOT render ios-notification-wrapper when showSeparateIOSCTAs is false', () => {
+      const wrapper = mountWithIntl(
+        <NotificationContainer {...iosCollapsedWithCTAs} showSeparateIOSCTAs={false} />
+      );
+      expect(wrapper.find('.ios-notification-wrapper').exists()).toBe(false);
+    });
+
+    it('does NOT render ios-notification-wrapper when expanded (isExpanded is true)', () => {
+      const wrapper = mountWithIntl(
+        <NotificationContainer
+          {...iosCollapsedWithCTAs}
+          notificationState={NOTIFICATION_STATE_EXPANDED}
+          supportsExpanded={true}
+        />
+      );
+      expect(wrapper.find('.ios-notification-wrapper').exists()).toBe(false);
+    });
+
+    it('does NOT render ios-notification-wrapper when enableCtas is false', () => {
+      const wrapper = mountWithIntl(
+        <NotificationContainer {...iosCollapsedWithCTAs} enableCtas={false} />
+      );
+      expect(wrapper.find('.ios-notification-wrapper').exists()).toBe(false);
+    });
+
+    it('does NOT render ios-notification-wrapper when buttons array is empty', () => {
+      const wrapper = mountWithIntl(
+        <NotificationContainer {...iosCollapsedWithCTAs} buttons={[]} />
+      );
+      expect(wrapper.find('.ios-notification-wrapper').exists()).toBe(false);
+    });
+
+    it('does NOT render ios-notification-wrapper for iPadOS (not an iOS browser)', () => {
+      const wrapper = mountWithIntl(
+        <NotificationContainer {...iosCollapsedWithCTAs} selectedOS={OS_IPADOS} />
+      );
+      expect(wrapper.find('.ios-notification-wrapper').exists()).toBe(false);
+    });
+
+    it('does NOT render ios-notification-wrapper for macOS', () => {
+      const wrapper = mountWithIntl(
+        <NotificationContainer {...iosCollapsedWithCTAs} selectedOS={OS_MACOS} />
+      );
+      expect(wrapper.find('.ios-notification-wrapper').exists()).toBe(false);
+    });
+
+    it('does NOT render ios-notification-wrapper for Android Mobile', () => {
+      const wrapper = mountWithIntl(
+        <NotificationContainer {...iosCollapsedWithCTAs} selectedOS={OS_ANDROID_MOBILE} />
+      );
+      expect(wrapper.find('.ios-notification-wrapper').exists()).toBe(false);
+    });
+  });
+
   describe('Snapshot Tests', () => {
     it('should match snapshot for macOS Chrome collapsed', () => {
       const wrapper = shallowWithIntl(

package/app/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)
@@ -10,16 +11,34 @@ import globalMessages from '../../../Cap/messages';
 export const validateTemplateName = (value) => !value || value.trim() === '';
 
 /**
- * Validates notification title
+ * Validates notification title (required and optional tag validation)
  * @param {string} value - The title value
  * @param {Function} formatMessage - i18n format message function
  * @param {Object} messages - Message definitions
+ * @param {Object} [validationConfig] - Optional config for tag validation
+ * @param {boolean} [isFullMode] - Optional; when set with validationConfig, runs tag validation
  * @returns {string} Error message if invalid, empty string if valid
  */
-export const validateTitle = (value, formatMessage, messages) => {
+export const validateTitle = (value, formatMessage, messages, restrictPersonalization, validationConfig, isFullMode) => {
   if (!value || value.trim() === '') {
     return formatMessage(messages.titleRequired);
   }
+  if (restrictPersonalization && hasPersonalizationTags(value)) {
+    return formatMessage(messages.personalizationTokensErrorMessage);
+  }
+
+  if (validationConfig != null) {
+    const validationResponse = validateTags({
+      content: value,
+      ...validationConfig,
+      isFullMode,
+    }) || {};
+
+    if (validationResponse?.isBraceError) {
+      return formatMessage(globalMessages.unbalanacedCurlyBraces);
+    }
+  }
+
   return '';
 };
 
@@ -34,11 +53,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 +69,24 @@ 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 '';
 };
-