@capillarytech/creatives-library 8.0.256 → 8.0.258

package/constants/unified.js

@@ -51,6 +51,7 @@ export const EXTENDED_TAG = 'ExtendedTagMessage';
 export const BADGES_UI_ENABLED = 'BADGES_UI_ENABLED';
 export const JP_LOCALE_HIDE_FEATURE = 'JP_LOCALE_HIDE_FEATURE';
 export const ENABLE_WECHAT = 'ENABLE_WECHAT';
+export const ENABLE_WEBPUSH = 'ENABLE_WEBPUSH';
 export const ENABLE_CUSTOMER_BARCODE_TAG = 'ENABLE_CUSTOMER_BARCODE_TAG';
 export const EMAIL_UNSUBSCRIBE_TAG_MANDATORY = 'EMAIL_UNSUBSCRIBE_TAG_MANDATORY';
 export const ENABLE_AI_SUGGESTIONS = 'ENABLE_AI_SUGGESTIONS';

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@capillarytech/creatives-library",
   "author": "meharaj",
-  "version": "8.0.256",
+  "version": "8.0.258",
   "description": "Capillary creatives ui",
   "main": "./index.js",
   "module": "./index.es.js",

package/services/api.js

@@ -287,6 +287,11 @@ export const createMobilePushTemplateV2 = (template) => {
   return request(url, getAPICallObject('POST', template));
 };
 
+export const createWebPushTemplate = (template) => {
+  const url = `${API_ENDPOINT}/templates/WEBPUSH`;
+  return request(url, getAPICallObject('POST', template));
+};
+
 export const duplicateTemplate = ({id, channel}) => {
   const url = `${API_ENDPOINT}/templates/duplicate/${id}/${channel}`;
   return request(url, getAPICallObject('GET'));

package/translations/en.json

@@ -165,7 +165,7 @@
   "creatives.componentsV2.CapDocumentUpload.imageDimenstionDescription": "Dimensions upto: {width}px x {height}px",
   "creatives.componentsV2.CapDocumentUpload.or": "OR",
   "creatives.componentsV2.CapDocumentUpload.uploadComputer": "Select from computer",
-  "creatives.componentsV2.CapDocumentUpload.whatsappDocSize": "Size upto: {size}",
+  "creatives.componentsV2.CapDocumentUpload.whatsappDocSize": "Size up to: {size}",
   "creatives.componentsV2.CapImageUpload.aspectRatio": "Aspect ratio: 1:1",
   "creatives.componentsV2.CapImageUpload.dragAndDrop": "Drag and drop image here",
   "creatives.componentsV2.CapImageUpload.format": "Format: JPEG, JPG, PNG",
@@ -173,13 +173,13 @@
   "creatives.componentsV2.CapImageUpload.imageErrorDesc": "Please upload the image with allowed file extension, size, dimension and aspect ratio",
   "creatives.componentsV2.CapImageUpload.imageGallery": "Gallery",
   "creatives.componentsV2.CapImageUpload.imageReUpload": "Reupload",
-  "creatives.componentsV2.CapImageUpload.imageSize": "Size upto: 2MB",
+  "creatives.componentsV2.CapImageUpload.imageSize": "Size up to: 2MB",
   "creatives.componentsV2.CapImageUpload.or": "OR",
   "creatives.componentsV2.CapImageUpload.uploadComputer": "Select from computer",
   "creatives.componentsV2.CapImageUpload.uploadGallery": "Gallery",
   "creatives.componentsV2.CapImageUpload.uploadImageDescription": "The relevant image that complements the message context.",
   "creatives.componentsV2.CapImageUpload.whatsappAspectRatio": "Max aspect ratio: 1.91:1",
-  "creatives.componentsV2.CapImageUpload.whatsappImageSize": "Size upto: 5MB",
+  "creatives.componentsV2.CapImageUpload.whatsappImageSize": "Size up to: 5MB",
   "creatives.componentsV2.CapTagList.Cancel": "Cancel",
   "creatives.componentsV2.CapTagList.Ok": "Ok",
   "creatives.componentsV2.CapTagList.all": "All",
@@ -2022,6 +2022,7 @@
   "creatives.containersV2.Whatsapp.vietnamese": "Vietnamese",
   "creatives.containersV2.Whatsapp.whatsappCreateNotification": "{name} has been sent for approval",
   "creatives.containersV2.Whatsapp.zulu": "Zulu",
+  "creatives.containersV2.WebPush.addLabels": "Add labels",
   "creatives.containersV2.addLabels": "Add labels",
   "creatives.containersV2.appName": "App Name",
   "creatives.containersV2.applyNow": "Apply now",

package/utils/common.js

@@ -21,6 +21,7 @@ import {
   EMAIL_UNSUBSCRIBE_TAG_MANDATORY,
   BADGES_ISSUE,
   ENABLE_WECHAT,
+  ENABLE_WEBPUSH,
   LIQUID_SUPPORT,
   ENABLE_NEW_MPUSH
 } from '../constants/unified';
@@ -116,6 +117,11 @@ export const hasWechatFeatureEnabled = Auth.hasFeatureAccess.bind(
   ENABLE_WECHAT,
 );
 
+export const hasWebPushFeatureEnabled = Auth.hasFeatureAccess.bind(
+  null,
+  ENABLE_WEBPUSH,
+);
+
 export const hasCustomerBarcodeFeatureEnabled = Auth.hasFeatureAccess.bind(
   null,
   ENABLE_CUSTOMER_BARCODE_TAG,

package/utils/imageUrlUpload.js

@@ -0,0 +1,141 @@
+/**
+ * Utility functions for uploading images from URLs
+ * 
+ * NOTE: CORS-limited; will be replaced with backend implementation.
+ * Flow currently hidden (not removed) from frontend.
+ */
+
+import {
+  DEFAULT_ALLOWED_CONTENT_TYPES,
+  MIME_TYPE_TO_EXTENSION,
+  DEFAULT_IMAGE_EXTENSION,
+} from '../v2Components/CapImageUrlUpload/constants';
+
+/**
+ * Fetches an image from a URL
+ * 
+ * @param {string} url - The image URL to fetch
+ * @returns {Promise<Response>} - The fetch response object
+ * @throws {Error} - If the fetch fails (network/CORS error)
+ */
+export const fetchImageFromUrl = async (url) => {
+  const trimmedUrl = url?.trim() || '';
+  
+  if (!trimmedUrl) {
+    throw new Error('URL is required');
+  }
+
+  // CORS-limited: fails for images without proper CORS headers
+  const response = await fetch(trimmedUrl, {
+    method: 'GET',
+    redirect: 'follow',
+    mode: 'cors',
+  });
+
+  if (!response.ok) {
+    throw new Error(`Failed to fetch image: ${response.status} ${response.statusText}`);
+  }
+
+  return response;
+};
+
+/**
+ * Helper function to upload image from URL
+ * Fetches image, validates content type and size, converts to File, and uploads via uploadAsset
+ * 
+ * @param {string} url - The image URL to upload
+ * @param {Function} formatMessage - React Intl formatMessage function
+ * @param {Object} messages - React Intl messages object
+ * @param {Function} uploadAssetFn - Function to upload the asset (file, type, fileParams)
+ * @param {string} fileNamePrefix - Prefix for the generated file name
+ * @param {number} maxSize - Maximum file size in bytes
+ * @param {string[]} allowedContentTypes - Array of allowed MIME types (defaults to DEFAULT_ALLOWED_CONTENT_TYPES)
+ * @returns {Promise<{success: boolean, error: string}>} - Result object with success status and error message
+ * 
+ * @example
+ * const result = await uploadImageFromUrlHelper(
+ *   'https://example.com/image.jpg',
+ *   formatMessage,
+ *   messages,
+ *   uploadAsset,
+ *   'my-image',
+ *   5000000,
+ *   ['image/jpeg', 'image/png']
+ * );
+ */
+export const uploadImageFromUrlHelper = async (
+  url,
+  formatMessage,
+  messages,
+  uploadAssetFn,
+  fileNamePrefix,
+  maxSize,
+  allowedContentTypes = DEFAULT_ALLOWED_CONTENT_TYPES,
+) => {
+  const trimmedUrl = url?.trim() || '';
+  
+  try {
+    const response = await fetchImageFromUrl(trimmedUrl);
+
+    // Validate Content-Type
+    const contentType = response.headers?.get('Content-Type') || '';
+    const normalizedContentType = contentType.split(';')[0].toLowerCase().trim();
+    
+    if (!allowedContentTypes.includes(normalizedContentType)) {
+      return {
+        success: false,
+        error: formatMessage(messages.imageTypeInvalid),
+      };
+    }
+
+    const blob = await response.blob();
+    
+    if (blob.size > maxSize) {
+      return {
+        success: false,
+        error: formatMessage(messages.imageSizeInvalid),
+      };
+    }
+
+    // Load image to get dimensions and verify validity
+    return new Promise((resolve) => {
+      const img = new Image();
+      const objectUrl = URL.createObjectURL(blob);
+      
+      img.onload = () => {
+        const extension = MIME_TYPE_TO_EXTENSION[normalizedContentType] || DEFAULT_IMAGE_EXTENSION;
+        const fileName = `${fileNamePrefix}.${extension}`;
+        const file = new File([blob], fileName, { type: blob.type });
+        const fileParams = {
+          width: img.width,
+          height: img.height,
+          error: false,
+        };
+        
+        uploadAssetFn(file, 'image', fileParams);
+        URL.revokeObjectURL(objectUrl);
+        
+        resolve({
+          success: true,
+          error: '',
+        });
+      };
+      
+      img.onerror = () => {
+        URL.revokeObjectURL(objectUrl);
+        resolve({
+          success: false,
+          error: formatMessage(messages.imageLoadError),
+        });
+      };
+      
+      img.src = objectUrl;
+    });
+  } catch (error) {
+    return {
+      success: false,
+      error: formatMessage(messages.imageLoadError),
+    };
+  }
+};
+

package/utils/tests/transformerUtils.test.js

@@ -15,6 +15,7 @@ import {
   RCS,
   LINE,
   VIBER,
+  WEBPUSH,
 } from "../../v2Containers/CreativesContainer/constants";
 
 describe("transformerUtils", () => {
@@ -1182,6 +1183,302 @@ describe("transformerUtils", () => {
     });
   });
 
+  describe("WebPush payload transformation", () => {
+    it("should transform WebPush data correctly with minimal data", () => {
+      const mockData = {
+        channel: WEBPUSH,
+        messageSubject: "test webpush notification"
+      };
+
+      const result = transformChannelPayload(mockData);
+
+      expect(result.centralCommsPayload).toBeDefined();
+      expect(result.centralCommsPayload.channel).toEqual(WEBPUSH);
+      expect(result.centralCommsPayload.webpushMessageContent.messageSubject).toEqual(
+        "test webpush notification"
+      );
+      expect(result.centralCommsPayload.clientName).toEqual("VENENO");
+    });
+
+    it("should transform WebPush data with all options", () => {
+      const mockData = {
+        channel: WEBPUSH,
+        messageSubject: "test webpush notification",
+        messageContent: {
+          content: {
+            accountId: 12345,
+            content: {
+              title: "WebPush Title",
+              message: "WebPush Message",
+              iconImageUrl: "https://example.com/icon.png",
+              cta: {
+                actionLink: "https://example.com/action",
+                actionText: "Click Here"
+              },
+              expandableDetails: {
+                style: "BIG_TEXT",
+                message: "Expanded Message"
+              }
+            },
+            offers: [
+              { id: "offer-1", title: "Offer 1" },
+              { id: "offer-2", title: "Offer 2" }
+            ]
+          }
+        }
+      };
+
+      const options = {
+        loyaltyMetaData: {
+          actionId: "action-123",
+          ouId: 456,
+          clientName: "TestClient",
+          module: "TestModule",
+          transformedMessageDetails: {
+            webpushDeliverySettings: {
+              sendDate: "2023-01-01",
+              priority: "HIGH"
+            }
+          }
+        }
+      };
+
+      const result = transformChannelPayload(mockData, options);
+
+      // Check base payload
+      expect(result.centralCommsPayload.sourceEntityId).toEqual("action-123");
+      expect(result.centralCommsPayload.ouId).toEqual(456);
+      expect(result.centralCommsPayload.clientName).toEqual("TestClient");
+      expect(result.centralCommsPayload.module).toEqual("TestModule");
+
+      // Check WebPush-specific content
+      expect(result.centralCommsPayload.webpushMessageContent.channel).toEqual(WEBPUSH);
+      expect(result.centralCommsPayload.webpushMessageContent.accountId).toEqual(12345);
+      expect(result.centralCommsPayload.webpushMessageContent.messageSubject).toEqual(
+        "test webpush notification"
+      );
+      expect(result.centralCommsPayload.webpushMessageContent.content.title).toEqual(
+        "WebPush Title"
+      );
+      expect(result.centralCommsPayload.webpushMessageContent.content.message).toEqual(
+        "WebPush Message"
+      );
+      expect(result.centralCommsPayload.webpushMessageContent.content.iconImageUrl).toEqual(
+        "https://example.com/icon.png"
+      );
+      expect(result.centralCommsPayload.webpushMessageContent.content.cta).toEqual({
+        actionLink: "https://example.com/action",
+        actionText: "Click Here"
+      });
+      expect(result.centralCommsPayload.webpushMessageContent.content.expandableDetails).toEqual({
+        style: "BIG_TEXT",
+        message: "Expanded Message"
+      });
+      expect(result.centralCommsPayload.webpushMessageContent.offers).toEqual([
+        { id: "offer-1", title: "Offer 1" },
+        { id: "offer-2", title: "Offer 2" }
+      ]);
+
+      // Check delivery settings
+      expect(result.centralCommsPayload.webpushDeliverySettings).toEqual({
+        sendDate: "2023-01-01",
+        priority: "HIGH"
+      });
+    });
+
+    it("should handle missing messageContent structure", () => {
+      const mockData = {
+        channel: WEBPUSH,
+        messageSubject: "test webpush notification"
+      };
+
+      const result = transformChannelPayload(mockData);
+
+      expect(result.centralCommsPayload.webpushMessageContent.accountId).toEqual(0);
+      expect(result.centralCommsPayload.webpushMessageContent.content.title).toEqual("");
+      expect(result.centralCommsPayload.webpushMessageContent.content.message).toEqual("");
+      expect(result.centralCommsPayload.webpushMessageContent.offers).toEqual([]);
+    });
+
+    it("should handle missing content properties", () => {
+      const mockData = {
+        channel: WEBPUSH,
+        messageSubject: "test webpush notification",
+        messageContent: {
+          content: {
+            accountId: 12345,
+            content: {}
+          }
+        }
+      };
+
+      const result = transformChannelPayload(mockData);
+
+      expect(result.centralCommsPayload.webpushMessageContent.accountId).toEqual(12345);
+      expect(result.centralCommsPayload.webpushMessageContent.content.title).toEqual("");
+      expect(result.centralCommsPayload.webpushMessageContent.content.message).toEqual("");
+      expect(result.centralCommsPayload.webpushMessageContent.content.iconImageUrl).toBeUndefined();
+      expect(result.centralCommsPayload.webpushMessageContent.content.cta).toBeUndefined();
+      expect(result.centralCommsPayload.webpushMessageContent.content.expandableDetails).toBeUndefined();
+    });
+
+    it("should conditionally include iconImageUrl only when present", () => {
+      const mockDataWithoutIcon = {
+        channel: WEBPUSH,
+        messageSubject: "test",
+        messageContent: {
+          content: {
+            content: {
+              title: "Title",
+              message: "Message"
+            }
+          }
+        }
+      };
+
+      const resultWithoutIcon = transformChannelPayload(mockDataWithoutIcon);
+      expect(resultWithoutIcon.centralCommsPayload.webpushMessageContent.content.iconImageUrl).toBeUndefined();
+
+      const mockDataWithIcon = {
+        channel: WEBPUSH,
+        messageSubject: "test",
+        messageContent: {
+          content: {
+            content: {
+              title: "Title",
+              message: "Message",
+              iconImageUrl: "https://example.com/icon.png"
+            }
+          }
+        }
+      };
+
+      const resultWithIcon = transformChannelPayload(mockDataWithIcon);
+      expect(resultWithIcon.centralCommsPayload.webpushMessageContent.content.iconImageUrl).toEqual(
+        "https://example.com/icon.png"
+      );
+    });
+
+    it("should conditionally include cta only when present", () => {
+      const mockDataWithoutCta = {
+        channel: WEBPUSH,
+        messageSubject: "test",
+        messageContent: {
+          content: {
+            content: {
+              title: "Title",
+              message: "Message"
+            }
+          }
+        }
+      };
+
+      const resultWithoutCta = transformChannelPayload(mockDataWithoutCta);
+      expect(resultWithoutCta.centralCommsPayload.webpushMessageContent.content.cta).toBeUndefined();
+
+      const mockDataWithCta = {
+        channel: WEBPUSH,
+        messageSubject: "test",
+        messageContent: {
+          content: {
+            content: {
+              title: "Title",
+              message: "Message",
+              cta: {
+                actionLink: "https://example.com",
+                actionText: "Click"
+              }
+            }
+          }
+        }
+      };
+
+      const resultWithCta = transformChannelPayload(mockDataWithCta);
+      expect(resultWithCta.centralCommsPayload.webpushMessageContent.content.cta).toEqual({
+        actionLink: "https://example.com",
+        actionText: "Click"
+      });
+    });
+
+    it("should conditionally include expandableDetails only when present", () => {
+      const mockDataWithoutExpandable = {
+        channel: WEBPUSH,
+        messageSubject: "test",
+        messageContent: {
+          content: {
+            content: {
+              title: "Title",
+              message: "Message"
+            }
+          }
+        }
+      };
+
+      const resultWithoutExpandable = transformChannelPayload(mockDataWithoutExpandable);
+      expect(resultWithoutExpandable.centralCommsPayload.webpushMessageContent.content.expandableDetails).toBeUndefined();
+
+      const mockDataWithExpandable = {
+        channel: WEBPUSH,
+        messageSubject: "test",
+        messageContent: {
+          content: {
+            content: {
+              title: "Title",
+              message: "Message",
+              expandableDetails: {
+                style: "BIG_TEXT",
+                message: "Expanded"
+              }
+            }
+          }
+        }
+      };
+
+      const resultWithExpandable = transformChannelPayload(mockDataWithExpandable);
+      expect(resultWithExpandable.centralCommsPayload.webpushMessageContent.content.expandableDetails).toEqual({
+        style: "BIG_TEXT",
+        message: "Expanded"
+      });
+    });
+
+    it("should handle undefined webpushDeliverySettings", () => {
+      const mockData = {
+        channel: WEBPUSH,
+        messageSubject: "test webpush notification"
+      };
+
+      const options = {
+        loyaltyMetaData: {
+          transformedMessageDetails: {}
+        }
+      };
+
+      const result = transformChannelPayload(mockData, options);
+
+      expect(result.centralCommsPayload.webpushDeliverySettings).toEqual({});
+    });
+
+    it("should handle empty offers array", () => {
+      const mockData = {
+        channel: WEBPUSH,
+        messageSubject: "test",
+        messageContent: {
+          content: {
+            content: {
+              title: "Title",
+              message: "Message"
+            },
+            offers: []
+          }
+        }
+      };
+
+      const result = transformChannelPayload(mockData);
+
+      expect(result.centralCommsPayload.webpushMessageContent.offers).toEqual([]);
+    });
+  });
+
   describe("getTemplateDiffState", () => {
     it("should return false for unsupported channel", () => {
       const result = getTemplateDiffState("UNSUPPORTED_CHANNEL", {}, {});

package/utils/transformerUtils.js

@@ -10,6 +10,7 @@ import {
   RCS,
   LINE,
   VIBER,
+  WEBPUSH,
   EMF,
   VENENO,
   TEXT,
@@ -63,6 +64,8 @@ export const transformChannelPayload = (data, options = {}) => {
       return transformLinePayload(data, options);
     case VIBER:
       return transformViberPayload(data, options);
+    case WEBPUSH:
+      return transformWebpushPayload(data, options);
     default:
       return data; // Return unchanged for unsupported channels
   }
@@ -317,6 +320,43 @@ const transformViberPayload = (viberData, options = {}) => {
   return payload;
 };
 
+/**
+ * Transforms WebPush data to the required payload format
+ * @param {Object} webpushData - Current WebPush data
+ * @param {Object} options - Additional options (ouId, sourceEntityId, etc.)
+ * @returns {Object} - Transformed WebPush payload
+ */
+const transformWebpushPayload = (webpushData, options = {}) => {
+  const { loyaltyMetaData = {} } = options;
+  const { transformedMessageDetails = {} } = loyaltyMetaData;
+  const { webpushDeliverySettings = {} } = transformedMessageDetails || {};
+  
+  // Get base payload structure
+  const payload = createBasePayload(WEBPUSH, loyaltyMetaData);
+  
+  // Extract webpush content from messageContent.content.content structure
+  const webpushContent = webpushData?.messageContent?.content?.content || {};
+  const accountId = webpushData?.messageContent?.content?.accountId || 0;
+  
+  // Add WebPush-specific properties
+  payload.centralCommsPayload.webpushMessageContent = {
+    channel: WEBPUSH,
+    accountId,
+    content: {
+      title: webpushContent?.title || '',
+      message: webpushContent?.message || '',
+      ...(webpushContent?.iconImageUrl && { iconImageUrl: webpushContent.iconImageUrl }),
+      ...(webpushContent?.cta && { cta: webpushContent.cta }),
+      ...(webpushContent?.expandableDetails && { expandableDetails: webpushContent.expandableDetails }),
+    },
+    messageSubject: webpushData?.messageSubject || "",
+    offers: webpushData?.messageContent?.content?.offers || [],
+  };
+  payload.centralCommsPayload.webpushDeliverySettings = webpushDeliverySettings;
+  
+  return payload;
+};
+
 // Checks if the template has changed
 export const getTemplateDiffState = (channel, oldData, newData) => {
   switch (channel.toUpperCase()) {

package/v2Components/CapImageUpload/constants.js

@@ -4,4 +4,6 @@ export const MAX_SUPPORTED_IMAGE_SIZE = {
   INAPP: 5,
   WHATSAPP: 5,
   MOBILEPUSH: 2,
+  WEBPUSH: 5,
+  WEBPUSH_BRAND_ICON: 1
 };