@capillarytech/creatives-library 8.0.242-alpha.10 → 8.0.242-alpha.11

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

@@ -0,0 +1,390 @@
+import { createWebPushPayload } from './payloadBuilder';
+import {
+  WEBPUSH,
+  WEBPUSH_MEDIA_TYPES,
+  IMAGE_UPLOAD_METHODS,
+  BRAND_ICON_OPTIONS,
+  ON_CLICK_BEHAVIOUR_OPTIONS,
+  ACTION_TYPES,
+} from '../../constants';
+
+describe('createWebPushPayload', () => {
+  const defaultParams = {
+    templateName: 'Test Template',
+    notificationTitle: 'Test Title',
+    message: 'Test Message',
+    mediaType: WEBPUSH_MEDIA_TYPES.NONE,
+    accountId: 'account123',
+    isFullMode: true,
+    imageSrc: '',
+    imageUrl: '',
+    imageUploadMethod: IMAGE_UPLOAD_METHODS.UPLOAD_IMAGE,
+    brandIconOption: BRAND_ICON_OPTIONS.DONT_SHOW,
+    brandIconSrc: '',
+    brandIconUrl: '',
+    buttons: [],
+    onClickBehaviour: ON_CLICK_BEHAVIOUR_OPTIONS.OPEN_SITE,
+    redirectUrl: '',
+  };
+
+  describe('Basic Payload Structure', () => {
+    it('should create basic payload with required fields', () => {
+      const payload = createWebPushPayload(defaultParams);
+
+      expect(payload).toEqual({
+        name: 'Test Template',
+        type: WEBPUSH,
+        definition: {
+          accountId: 'account123',
+        },
+        versions: {
+          base: {
+            content: {
+              webpush: {
+                title: 'Test Title',
+                message: 'Test Message',
+                onClickAction: {
+                  type: ACTION_TYPES.OPEN_SITE,
+                },
+              },
+            },
+          },
+        },
+      });
+    });
+
+    it('should use notification title as name when not in full mode', () => {
+      const payload = createWebPushPayload({
+        ...defaultParams,
+        isFullMode: false,
+        templateName: '',
+      });
+
+      expect(payload.name).toBe('Test Title');
+    });
+
+    it('should use notification title as name when template name is empty in full mode', () => {
+      const payload = createWebPushPayload({
+        ...defaultParams,
+        templateName: '',
+      });
+
+      expect(payload.name).toBe('Test Title');
+    });
+
+    it('should trim template name', () => {
+      const payload = createWebPushPayload({
+        ...defaultParams,
+        templateName: '  Test Template  ',
+      });
+
+      expect(payload.name).toBe('Test Template');
+    });
+
+    it('should trim notification title', () => {
+      const payload = createWebPushPayload({
+        ...defaultParams,
+        notificationTitle: '  Test Title  ',
+      });
+
+      expect(payload.versions.base.content.webpush.title).toBe('Test Title');
+    });
+
+    it('should trim message', () => {
+      const payload = createWebPushPayload({
+        ...defaultParams,
+        message: '  Test Message  ',
+      });
+
+      expect(payload.versions.base.content.webpush.message).toBe('Test Message');
+    });
+  });
+
+  describe('Media Type Handling', () => {
+    it('should include mediaType when not NONE', () => {
+      const payload = createWebPushPayload({
+        ...defaultParams,
+        mediaType: WEBPUSH_MEDIA_TYPES.IMAGE,
+      });
+
+      expect(payload.versions.base.content.webpush.mediaType).toBe(WEBPUSH_MEDIA_TYPES.IMAGE);
+    });
+
+    it('should not include mediaType when NONE', () => {
+      const payload = createWebPushPayload({
+        ...defaultParams,
+        mediaType: WEBPUSH_MEDIA_TYPES.NONE,
+      });
+
+      expect(payload.versions.base.content.webpush.mediaType).toBeUndefined();
+    });
+  });
+
+  describe('Image Handling', () => {
+    it('should include image when mediaType is IMAGE and upload method is UPLOAD_IMAGE', () => {
+      const payload = createWebPushPayload({
+        ...defaultParams,
+        mediaType: WEBPUSH_MEDIA_TYPES.IMAGE,
+        imageUploadMethod: IMAGE_UPLOAD_METHODS.UPLOAD_IMAGE,
+        imageSrc: 'secure/path/to/image.jpg',
+      });
+
+      expect(payload.versions.base.content.webpush.image).toBe('secure/path/to/image.jpg');
+    });
+
+    it('should include image when mediaType is IMAGE and upload method is ADD_IMAGE_URL', () => {
+      const payload = createWebPushPayload({
+        ...defaultParams,
+        mediaType: WEBPUSH_MEDIA_TYPES.IMAGE,
+        imageUploadMethod: IMAGE_UPLOAD_METHODS.ADD_IMAGE_URL,
+        imageSrc: 'secure/path/to/image.jpg',
+      });
+
+      expect(payload.versions.base.content.webpush.image).toBe('secure/path/to/image.jpg');
+    });
+
+    it('should not include image when imageSrc is empty', () => {
+      const payload = createWebPushPayload({
+        ...defaultParams,
+        mediaType: WEBPUSH_MEDIA_TYPES.IMAGE,
+        imageUploadMethod: IMAGE_UPLOAD_METHODS.UPLOAD_IMAGE,
+        imageSrc: '',
+      });
+
+      expect(payload.versions.base.content.webpush.image).toBeUndefined();
+    });
+
+    it('should not include image when mediaType is NONE', () => {
+      const payload = createWebPushPayload({
+        ...defaultParams,
+        mediaType: WEBPUSH_MEDIA_TYPES.NONE,
+        imageSrc: 'secure/path/to/image.jpg',
+      });
+
+      expect(payload.versions.base.content.webpush.image).toBeUndefined();
+    });
+  });
+
+  describe('Brand Icon Handling', () => {
+    it('should include brandIcon when option is UPLOAD_IMAGE', () => {
+      const payload = createWebPushPayload({
+        ...defaultParams,
+        brandIconOption: BRAND_ICON_OPTIONS.UPLOAD_IMAGE,
+        brandIconSrc: 'secure/path/to/brand-icon.jpg',
+      });
+
+      expect(payload.versions.base.content.webpush.brandIcon).toBe('secure/path/to/brand-icon.jpg');
+    });
+
+    it('should not include brandIcon when option is DONT_SHOW', () => {
+      const payload = createWebPushPayload({
+        ...defaultParams,
+        brandIconOption: BRAND_ICON_OPTIONS.DONT_SHOW,
+        brandIconSrc: 'secure/path/to/brand-icon.jpg',
+      });
+
+      expect(payload.versions.base.content.webpush.brandIcon).toBeUndefined();
+    });
+
+    it('should not include brandIcon when brandIconSrc is empty', () => {
+      const payload = createWebPushPayload({
+        ...defaultParams,
+        brandIconOption: BRAND_ICON_OPTIONS.UPLOAD_IMAGE,
+        brandIconSrc: '',
+      });
+
+      expect(payload.versions.base.content.webpush.brandIcon).toBeUndefined();
+    });
+  });
+
+  describe('On-Click Behaviour', () => {
+    it('should include onClickAction with URL type when REDIRECT_TO_URL is selected', () => {
+      const payload = createWebPushPayload({
+        ...defaultParams,
+        onClickBehaviour: ON_CLICK_BEHAVIOUR_OPTIONS.REDIRECT_TO_URL,
+        redirectUrl: 'https://example.com',
+      });
+
+      expect(payload.versions.base.content.webpush.onClickAction).toEqual({
+        type: ACTION_TYPES.URL,
+        url: 'https://example.com',
+      });
+    });
+
+    it('should trim redirectUrl', () => {
+      const payload = createWebPushPayload({
+        ...defaultParams,
+        onClickBehaviour: ON_CLICK_BEHAVIOUR_OPTIONS.REDIRECT_TO_URL,
+        redirectUrl: '  https://example.com  ',
+      });
+
+      expect(payload.versions.base.content.webpush.onClickAction.url).toBe('https://example.com');
+    });
+
+    it('should include onClickAction with OPEN_SITE type when OPEN_SITE is selected', () => {
+      const payload = createWebPushPayload({
+        ...defaultParams,
+        onClickBehaviour: ON_CLICK_BEHAVIOUR_OPTIONS.OPEN_SITE,
+      });
+
+      expect(payload.versions.base.content.webpush.onClickAction).toEqual({
+        type: ACTION_TYPES.OPEN_SITE,
+      });
+    });
+
+    it('should not include onClickAction when redirectUrl is empty and REDIRECT_TO_URL is selected', () => {
+      const payload = createWebPushPayload({
+        ...defaultParams,
+        onClickBehaviour: ON_CLICK_BEHAVIOUR_OPTIONS.REDIRECT_TO_URL,
+        redirectUrl: '',
+      });
+
+      // When redirectUrl is empty, onClickAction should not be included
+      expect(payload.versions.base.content.webpush.onClickAction).toBeUndefined();
+    });
+  });
+
+  describe('CTA Buttons', () => {
+    it('should include ctas when buttons array has items', () => {
+      const buttons = [
+        { text: 'Button 1', url: 'https://example.com/1', type: 'primary' },
+        { text: 'Button 2', url: 'https://example.com/2', type: 'secondary' },
+      ];
+
+      const payload = createWebPushPayload({
+        ...defaultParams,
+        buttons,
+      });
+
+      expect(payload.versions.base.content.webpush.ctas).toEqual([
+        {
+          actionText: 'Button 1',
+          type: ACTION_TYPES.URL,
+          actionLink: 'https://example.com/1',
+        },
+        {
+          actionText: 'Button 2',
+          type: ACTION_TYPES.URL,
+          actionLink: 'https://example.com/2',
+        },
+      ]);
+    });
+
+    it('should not include ctas when buttons array is empty', () => {
+      const payload = createWebPushPayload({
+        ...defaultParams,
+        buttons: [],
+      });
+
+      expect(payload.versions.base.content.webpush.ctas).toBeUndefined();
+    });
+
+    it('should not include ctas when buttons is null', () => {
+      const payload = createWebPushPayload({
+        ...defaultParams,
+        buttons: null,
+      });
+
+      expect(payload.versions.base.content.webpush.ctas).toBeUndefined();
+    });
+
+    it('should not include ctas when buttons is undefined', () => {
+      const payload = createWebPushPayload({
+        ...defaultParams,
+        buttons: undefined,
+      });
+
+      expect(payload.versions.base.content.webpush.ctas).toBeUndefined();
+    });
+  });
+
+  describe('Combined Scenarios', () => {
+    it('should create complete payload with all features', () => {
+      const buttons = [
+        { text: 'Click Me', url: 'https://example.com', type: 'primary' },
+      ];
+
+      const payload = createWebPushPayload({
+        templateName: 'Complete Template',
+        notificationTitle: 'Complete Title',
+        message: 'Complete Message',
+        mediaType: WEBPUSH_MEDIA_TYPES.IMAGE,
+        accountId: 'account123',
+        isFullMode: true,
+        imageSrc: 'secure/path/to/image.jpg',
+        imageUrl: 'https://example.com/image.jpg',
+        imageUploadMethod: IMAGE_UPLOAD_METHODS.UPLOAD_IMAGE,
+        brandIconOption: BRAND_ICON_OPTIONS.UPLOAD_IMAGE,
+        brandIconSrc: 'secure/path/to/brand-icon.jpg',
+        brandIconUrl: '',
+        buttons,
+        onClickBehaviour: ON_CLICK_BEHAVIOUR_OPTIONS.REDIRECT_TO_URL,
+        redirectUrl: 'https://example.com/redirect',
+      });
+
+      expect(payload).toEqual({
+        name: 'Complete Template',
+        type: WEBPUSH,
+        definition: {
+          accountId: 'account123',
+        },
+        versions: {
+          base: {
+            content: {
+              webpush: {
+                title: 'Complete Title',
+                message: 'Complete Message',
+                mediaType: WEBPUSH_MEDIA_TYPES.IMAGE,
+                image: 'secure/path/to/image.jpg',
+                brandIcon: 'secure/path/to/brand-icon.jpg',
+                onClickAction: {
+                  type: ACTION_TYPES.URL,
+                  url: 'https://example.com/redirect',
+                },
+                ctas: [
+                  {
+                    actionText: 'Click Me',
+                    type: ACTION_TYPES.URL,
+                    actionLink: 'https://example.com',
+                  },
+                ],
+              },
+            },
+          },
+        },
+      });
+    });
+
+    it('should handle empty strings and null values gracefully', () => {
+      const payload = createWebPushPayload({
+        templateName: '',
+        notificationTitle: '',
+        message: '',
+        mediaType: WEBPUSH_MEDIA_TYPES.NONE,
+        accountId: 'account123',
+        isFullMode: false,
+        imageSrc: '',
+        imageUrl: '',
+        imageUploadMethod: IMAGE_UPLOAD_METHODS.UPLOAD_IMAGE,
+        brandIconOption: BRAND_ICON_OPTIONS.DONT_SHOW,
+        brandIconSrc: '',
+        brandIconUrl: '',
+        buttons: [],
+        onClickBehaviour: ON_CLICK_BEHAVIOUR_OPTIONS.OPEN_SITE,
+        redirectUrl: '',
+      });
+
+      expect(payload.name).toBe('');
+      expect(payload.versions.base.content.webpush.title).toBe('');
+      expect(payload.versions.base.content.webpush.message).toBe('');
+      expect(payload.versions.base.content.webpush.mediaType).toBeUndefined();
+      expect(payload.versions.base.content.webpush.image).toBeUndefined();
+      expect(payload.versions.base.content.webpush.brandIcon).toBeUndefined();
+      expect(payload.versions.base.content.webpush.onClickAction).toEqual({
+        type: ACTION_TYPES.OPEN_SITE,
+      });
+      expect(payload.versions.base.content.webpush.ctas).toBeUndefined();
+    });
+  });
+});
+

package/v2Containers/WebPush/Create/utils/previewUtils.js

@@ -0,0 +1,89 @@
+import {
+  OS_MACOS,
+  OS_IOS,
+  OS_IPADOS,
+  OS_WINDOWS,
+  OS_ANDROID_MOBILE,
+  OS_ANDROID_TABLET,
+} from '../preview/constants';
+
+/**
+ * Converts OS name to CSS class name format
+ * @param {string} os - Operating system name (e.g., 'macOS', 'Android (Mobile)')
+ * @returns {string} CSS class name (e.g., 'macos', 'android-mobile')
+ */
+export const getOSClassName = (os) => {
+  if (os == null) return '';
+  const osMap = {
+    [OS_MACOS]: 'macos',
+    [OS_IOS]: 'ios',
+    [OS_IPADOS]: 'ipados',
+    [OS_WINDOWS]: 'windows',
+    [OS_ANDROID_MOBILE]: 'android-mobile',
+    [OS_ANDROID_TABLET]: 'android-tablet',
+  };
+  return osMap[os] || String(os).toLowerCase().replace(/\s+/g, '-').replace(/[()]/g, '');
+};
+
+/**
+ * Converts Browser name to CSS class name format
+ * @param {string} browser - Browser name (e.g., 'Chrome', 'Firefox')
+ * @returns {string} CSS class name (e.g., 'chrome', 'firefox')
+ */
+export const getBrowserClassName = (browser) => {
+  if (typeof browser === 'string') {
+    return browser.toLowerCase();
+  }
+  return '';
+};
+
+/**
+ * Gets the combined platform + browser class name for notification-container
+ * @param {string} os - Operating system name
+ * @param {string} browser - Browser name
+ * @returns {string} Combined class name (e.g., 'macos-chrome', 'windows-firefox')
+ */
+export const getNotificationContainerClassName = (os, browser) => {
+  const osClass = os ? getOSClassName(os) : '';
+  const browserClass = browser ? getBrowserClassName(browser) : '';
+  
+  // If both are missing, return empty string
+  if (!osClass && !browserClass) {
+    return '';
+  }
+  
+  // Join non-empty parts with a single hyphen
+  return [osClass, browserClass].filter(Boolean).join('-');
+};
+
+/**
+ * Preview-only: strip protocol, drop www. only, remove child paths and trailing slashes
+ * @param {string} rawUrl - Raw URL to format
+ * @returns {string} Formatted URL for preview display
+ */
+export const formatUrlForPreview = (rawUrl) => {
+  // Handle null/undefined
+  if (rawUrl == null) return rawUrl;
+  
+  // Ensure rawUrl is a string before calling string methods
+  if (typeof rawUrl !== 'string') return rawUrl;
+  
+  const withoutProtocol = rawUrl.replace(/^https?:\/\//i, '');
+  const withoutWww = withoutProtocol.startsWith('www.') ? withoutProtocol.slice(4) : withoutProtocol;
+  // Remove child paths (everything after the first slash)
+  const domainOnly = withoutWww.split('/')[0];
+  return domainOnly.replace(/\/+$/, '');
+};
+
+/**
+ * Transforms form buttons to preview format
+ * @param {Array} formButtons - Array of button objects from form
+ * @returns {Array} Transformed buttons with id and label
+ */
+export const transformButtonsForPreview = (formButtons = []) => {
+  return formButtons.map((button, index) => ({
+    id: String(index + 1),
+    label: button?.text || '',
+  }));
+};
+

package/v2Containers/WebPush/Create/utils/urlValidation.js

@@ -0,0 +1,115 @@
+/**
+ * URL Validation Utilities
+ * 
+ * Provides robust URL validation that works across different environments
+ * (browser, Node.js, Jest) with multiple fallback strategies.
+ */
+
+import {
+  SUPPORTED_PROTOCOLS,
+  HTTP_URL_PATTERN,
+  TLD_PATTERN,
+} from '../../constants';
+
+/**
+ * Resolves the URL constructor available in the current environment
+ * @returns {Function|null} URL constructor function or null if not available
+ */
+const resolveUrlConstructor = () => {
+  if (typeof window !== 'undefined' && typeof window.URL === 'function') {
+    return window.URL;
+  }
+
+  if (typeof URL === 'function') {
+    return URL;
+  }
+
+  return null;
+};
+
+/**
+ * Checks if document API is available for DOM-based validation
+ * @returns {boolean} True if document.createElement is available
+ */
+const canUseDocument = () => typeof document !== 'undefined' && typeof document.createElement === 'function';
+
+/**
+ * Validates if a value is a valid HTTP/HTTPS URL
+ * Uses multiple validation strategies for maximum compatibility:
+ * 1. Regex pattern check for http:// or https:// prefix
+ * 2. URL constructor validation (if available)
+ * 3. DOM-based validation using anchor element (if available)
+ * 
+ * @param {string} value - The URL string to validate
+ * @returns {boolean} True if the value is a valid HTTP/HTTPS URL
+ */
+export const isValidHttpUrl = (value) => {
+  if (!value) {
+    return false;
+  }
+
+  const trimmedValue = value.trim();
+  if (!trimmedValue) {
+    return false;
+  }
+
+  // First check: regex pattern for http:// or https:// prefix
+  if (!HTTP_URL_PATTERN.test(trimmedValue)) {
+    return false;
+  }
+
+  // Second check: ensure URL has a valid TLD (Top Level Domain)
+  // URLs like https://google are invalid, but https://google.com is valid
+  if (!TLD_PATTERN.test(trimmedValue)) {
+    return false;
+  }
+
+  // Third check: try URL constructor if available
+  const UrlConstructor = resolveUrlConstructor();
+  if (UrlConstructor) {
+    try {
+      const parsedUrl = new UrlConstructor(trimmedValue);
+      if (SUPPORTED_PROTOCOLS.has(parsedUrl.protocol)) {
+        return true;
+      }
+    } catch (error) {
+      // URL constructor failed, fall back to DOM-based validation
+    }
+  }
+
+  // Fourth check: DOM-based validation using anchor element
+  if (canUseDocument()) {
+    const parser = document.createElement('a');
+    parser.href = trimmedValue;
+    if (SUPPORTED_PROTOCOLS.has(parser.protocol)) {
+      return true;
+    }
+  }
+
+  // If all validation methods failed, return false
+  return false;
+};
+
+/**
+ * Validates a URL value and returns an error message if invalid
+ * This is a higher-level validation function that can be used with form validation
+ * 
+ * @param {string} value - The URL string to validate
+ * @param {Function} formatMessage - Function to format error messages (e.g., react-intl formatMessage)
+ * @param {Object} messages - Object containing error message keys:
+ *   - urlRequired: Message for empty URL
+ *   - urlInvalid: Message for invalid URL format
+ * @returns {string} Empty string if valid, error message if invalid
+ */
+export const validateUrl = (value, formatMessage, messages) => {
+  if (!value || value.trim() === '') {
+    return formatMessage(messages.urlRequired);
+  }
+
+  if (!isValidHttpUrl(value)) {
+    return formatMessage(messages.urlInvalid);
+  }
+
+  return '';
+};
+