@capillarytech/creatives-library 8.0.289 → 8.0.290-alpha.0

package/v2Containers/WebPush/Create/hooks/useTagManagement.test.js

@@ -528,26 +528,19 @@ 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

@@ -295,8 +295,8 @@ const WebPushCreate = ({
   const validateTemplateName = useCallback((value) => validateTemplateNameUtil(value), []);
 
   const validateTitle = useCallback(
-    (value) => validateTitleUtil(value, formatMessage, messages, restrictPersonalization),
-    [formatMessage, restrictPersonalization],
+    (value) => validateTitleUtil(value, formatMessage, messages, restrictPersonalization, validationConfig, isFullMode),
+    [formatMessage, restrictPersonalization, validationConfig, isFullMode],
   );
 
   const validateUrl = useCallback(

package/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/v2Containers/WebPush/Create/utils/validation.js

@@ -11,19 +11,34 @@ import { hasPersonalizationTags } from '../../../../utils/commonUtils';
 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, restrictPersonalization) => {
+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 '';
 };
 

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

@@ -183,10 +183,8 @@ describe('validation', () => {
   describe('validateMessageContent', () => {
     const mockValidationConfig = {
       tagsParam: [],
-      injectedTagsParams: [],
       location: {},
       tagModule: '',
-      eventContextTags: [],
     };
 
     beforeEach(() => {
@@ -225,17 +223,6 @@ describe('validation', () => {
       });
     });
 
-    it('should return error message for unsupported tags', () => {
-      validateTags.mockReturnValue({
-        unsupportedTags: ['tag1', 'tag2'],
-      });
-      const result = validateMessageContent('Message with {tag1} and {tag2}', mockFormatMessage, mockMessages, mockValidationConfig);
-      expect(result).toBe('Unsupported tags: tag1, tag2');
-      expect(mockFormatMessage).toHaveBeenCalledWith(globalMessages.unsupportedTagsValidationError, {
-        unsupportedTags: 'tag1, tag2',
-      });
-    });
-
     it('should return error message for unbalanced curly braces', () => {
       validateTags.mockReturnValue({
         isBraceError: true,
@@ -245,22 +232,11 @@ describe('validation', () => {
       expect(mockFormatMessage).toHaveBeenCalledWith(globalMessages.unbalanacedCurlyBraces);
     });
 
-    it('should return error message for both unsupported tags and brace error (unsupported tags takes precedence)', () => {
-      validateTags.mockReturnValue({
-        unsupportedTags: ['tag1'],
-        isBraceError: true,
-      });
-      const result = validateMessageContent('Message with {tag1}', mockFormatMessage, mockMessages, mockValidationConfig);
-      expect(result).toBe('Unsupported tags: tag1');
-    });
-
     it('should pass validation config to validateTags', () => {
       const customConfig = {
         tagsParam: [{ id: 1, name: 'Tag1' }],
-        injectedTagsParams: [{ id: 2, name: 'Tag2' }],
         location: { query: { type: 'test' } },
         tagModule: 'custom',
-        eventContextTags: [{ id: 3, name: 'Tag3' }],
       };
       validateTags.mockReturnValue({});
       validateMessageContent('Valid message', mockFormatMessage, mockMessages, customConfig);

package/v2Containers/Whatsapp/index.js

@@ -637,22 +637,21 @@ export const Whatsapp = (props) => {
         validateTags({
           content: contentData.join(""),
           tagsParam: tags,
-          injectedTagsParams: injectedTags,
           location,
           tagModule: getDefaultTags,
-          eventContextTags,
           isFullMode,
         }) || {};
-      const unsupportedTagsLengthCheck =
-        validationResponse?.unsupportedTags?.length > 0;
       if (type === HEADER_TEXT) {
         headerTagValidationResponse = validationResponse;
-        updateIsHeaderTagValidationError(unsupportedTagsLengthCheck);
+        updateIsHeaderTagValidationError(validationResponse.isBraceError);
       } else if (type === CAROUSEL_TEXT) {
-        return [{fieldName: "carouselTagValidationErrMessage", value: validationResponse}, {fieldName: "carouselTagValidationErr", value: unsupportedTagsLengthCheck}];
+        return [
+          { fieldName: "carouselTagValidationErrMessage", value: validationResponse.isBraceError ? validationResponse : {} },
+          { fieldName: "carouselTagValidationErr", value: validationResponse.isBraceError },
+        ];
       } else {
         tagValidationResponse = validationResponse;
-        updateIsTagValidationError(unsupportedTagsLengthCheck);
+        updateIsTagValidationError(validationResponse.isBraceError);
       }
     }
   };
@@ -2682,18 +2681,11 @@ const isAuthenticationTemplate = isEqual(templateCategory, WHATSAPP_CATEGORIES.a
     } else {
       validationResponse = tagValidationResponse;
     }
-    const { unsupportedTags = [], isBraceError } = validationResponse;
-
-    let tagError = "";
-    if (unsupportedTags.length > 0) {
-      tagError = formatMessage(globalMessages.unsupportedTagsValidationError, {
-        unsupportedTags,
-      });
-    }
+    const { isBraceError } = validationResponse || {};
     if (isBraceError) {
-      tagError = formatMessage(globalMessages.unbalanacedCurlyBraces);
+      return <CapError>{formatMessage(globalMessages.unbalanacedCurlyBraces)}</CapError>;
     }
-    return <CapError>{tagError}</CapError>;
+    return null;
   };
 
   const editModeContent = () => (

package/v2Containers/Zalo/index.js

@@ -270,23 +270,15 @@ export const Zalo = (props) => {
       validateTags({
         content: message,
         tagsParam: tags,
-        injectedTagsParams: injectedTags,
         location,
         tagModule: getDefaultTags,
-        eventContextTags,
         isFullMode,
       }) || {};
-    const { unsupportedTags = [], isBraceError } = tagValidationResponse;
-    let tagError = '';
-    if (unsupportedTags.length > 0) {
-      tagError = formatMessage(globalMessages.unsupportedTagsValidationError, {
-        unsupportedTags,
-      });
-    }
+    const { isBraceError } = tagValidationResponse;
     if (isBraceError) {
-      tagError = formatMessage(globalMessages.unbalanacedCurlyBraces);
+      return formatMessage(globalMessages.unbalanacedCurlyBraces);
     }
-    return tagError;
+    return '';
   };
 
   //this function is used for checking errror validation in this it validate tags error and length error