@capillarytech/creatives-library 8.0.247 → 8.0.249

package/package.json

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

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/CommonTestAndPreview/UnifiedPreview/_unifiedPreview.scss

@@ -1919,14 +1919,14 @@
           background-color: $CAP_WHITE;
 
           .mpush-video-preview {
-            max-width: '100%';
-            max-height: '120px';
+            max-width: 100%;
+            max-height: 7.5rem;
             margin-left: $CAP_SPACE_24;
           }
           
           .mpush-gif-preview {
-            max-width: '100%';
-            max-height: '120px';
+            max-width: 100%;
+            max-height: 7.5rem;
           }
 
           img {

package/v2Components/CommonTestAndPreview/_commonTestAndPreview.scss

@@ -216,7 +216,6 @@
 
       .json-key {
         color: #3D7790;
-        ;
         font-weight: 500;
       }
 

package/v2Containers/CreativesContainer/SlideBoxContent.js

@@ -1051,6 +1051,8 @@ export function SlideBoxContent(props) {
           isFullMode={isFullMode}
           handleClose={handleClose}
           onCreateComplete={onCreateComplete}
+          getFormData={getFormData}
+          isGetFormData={isGetFormData}
           templateData={isEditWebPush ? templateData : undefined}
           creativesMode={creativesMode}
           params={isEditWebPush && templateData ? { id: templateData._id } : undefined}

package/v2Containers/CreativesContainer/constants.js

@@ -50,3 +50,4 @@ export const BIG_TEXT = "BIG_TEXT";
 export const GENERIC = "GENERIC";
 export const LIQUID_ERROR_MSG = "LIQUID_ERROR_MSG";
 export const STANDARD_ERROR_MSG = "STANDARD_ERROR_MSG";
+export const COMMON_CHANNELS = ['sms', 'email', 'wechat', 'mobilepush', 'webpush', 'line', 'viber', 'facebook', 'call_task', 'ftp', 'assets'];

package/v2Containers/CreativesContainer/index.js

@@ -42,6 +42,7 @@ import { makeSelectFetchingCmsData } from '../Email/selectors';
 import {
   IMAGE as LINE_IMAGE, IMAGE_MAP, IMAGE_CAROUSEL, VIDEO as LINE_VIDEO, TEMPLATE, STICKER,
 } from '../Line/Container/constants';
+import {EXTERNAL_URL, SITE_URL, WEBPUSH_MEDIA_TYPES} from '../WebPush/constants';
 import { IMAGE, VIDEO } from '../Facebook/Advertisement/constant';
 import {RCS_STATUSES} from '../Rcs/constants';
 import { CREATIVE } from '../Facebook/constants';
@@ -708,6 +709,73 @@ export class Creatives extends React.Component {
           };
           break;
         }
+        case constants.WEBPUSH: {
+          // Convert from campaign format (messageContent.content.content) to creatives format
+          const webpushContent = get(templateData, 'content', {});
+          const accountId = get(templateData, 'accountId');
+          const { 
+            title, 
+            message, 
+            iconImageUrl: brandIcon = "", 
+            cta, 
+            expandableDetails 
+          } = webpushContent || {};
+          
+          // Map cta to onClickAction
+          let onClickAction = null;
+          if (cta) {
+            if (cta?.type === EXTERNAL_URL) {
+              onClickAction = {
+                type: URL,
+                url: cta?.actionLink || '',
+              };
+            } else {
+              onClickAction = {
+                type: cta?.type || SITE_URL,
+              };
+            }
+          }
+          
+          // Map expandableDetails.ctas to ctas array
+          let ctas = [];
+          if (expandableDetails?.ctas && expandableDetails?.ctas?.length > 0) {
+            ctas = expandableDetails?.ctas?.map((ctaItem) => ({
+              actionText: ctaItem?.title || ctaItem?.actionText || '',
+              type: URL,
+              actionLink: ctaItem?.actionLink || '',
+            }));
+          }
+          
+          // Map expandableDetails.media to image if present
+          let image = null;
+          if (expandableDetails?.media && expandableDetails?.media?.length > 0) {
+            const firstMedia = expandableDetails?.media[0];
+            if (firstMedia?.type === WEBPUSH_MEDIA_TYPES.IMAGE && firstMedia?.url) {
+              image = firstMedia?.url;
+            }
+          }
+          
+          creativesTemplateData = {
+            type: channel,
+            name: templateData?.messageSubject,
+            versions: {
+              base: {
+                content: {
+                  webpush: {
+                    title: title || '',
+                    message: message || '',
+                    ...(brandIcon && { brandIcon }),
+                    ...(onClickAction && { onClickAction }),
+                    ...(ctas.length > 0 && { ctas }),
+                    ...(image && { image, mediaType: IMAGE }),
+                  },
+                },
+              },
+            },
+            definition: { accountId },
+          };
+          break;
+        }
         default:
           break;
       }
@@ -1122,6 +1190,105 @@ export class Creatives extends React.Component {
         }
       }
         break;
+      case constants.WEBPUSH: {
+        if (template.value) {
+          const channelTemplate = template.value;
+          const accountId = get(channelTemplate, 'definition.accountId');
+          const webpushContent = get(channelTemplate, 'versions.base.content.webpush', {});
+          const { 
+            title, 
+            message, 
+            brandIcon, 
+            iconImageUrl: templateImageUrl , 
+            onClickAction, 
+            ctas: templateCtas, 
+            cta: templateCta, 
+            expandableDetails: templateExpandableDetails, 
+            image 
+          } = webpushContent || {};
+          
+          const iconImageUrl = brandIcon || templateImageUrl || '';
+          
+          // Map onClickAction to cta
+          let cta = null;
+          if (onClickAction) {
+            if (onClickAction?.type === URL) {
+              cta = {
+                type: EXTERNAL_URL,
+                actionLink: onClickAction?.url || '',
+              };
+            } else {
+              cta = {
+                type: onClickAction?.type || SITE_URL,
+                actionLink: onClickAction?.url || '',
+              };
+            }
+          } else if (templateCta) {
+            // Fallback to cta if onClickAction is not present
+            cta = {
+              type: templateCta?.type || EXTERNAL_URL,
+              actionLink: templateCta?.actionLink || '',
+            };
+          }
+          
+          // Map ctas array to expandableDetails.ctas
+          let expandableDetails = null;
+          const hasCtas = templateCtas && templateCtas.length > 0;
+          const hasImage = image;
+          
+          if (hasCtas || hasImage) {
+            expandableDetails = {
+              media: [],
+              ctas: [],
+            };
+            
+            // Map image to expandableDetails.media
+            if (hasImage) {
+              expandableDetails.media = [{
+                url: image,
+                type: IMAGE,
+              }];
+            }
+            
+            // Map ctas array to expandableDetails.ctas
+            if (hasCtas) {
+              expandableDetails.ctas = templateCtas.map((ctaItem) => ({
+                type: ctaItem?.type === URL ? EXTERNAL_URL : ctaItem?.type,
+                action: ctaItem?.action || '',
+                title: ctaItem?.actionText || ctaItem?.title || '',
+                actionLink: ctaItem?.actionLink || '',
+              }));
+            }
+          } else if (templateExpandableDetails) {
+            // If expandableDetails already exists, use it
+            expandableDetails = {
+              media: templateExpandableDetails?.media || [],
+              ctas: templateExpandableDetails?.ctas || [],
+            };
+          }
+          
+          // Convert from creatives format to campaign format
+          templateData = {
+            channel,
+            messageContent: {
+              content: {
+                channel: constants.WEBPUSH,
+                accountId,
+                content: {
+                  title: title || '',
+                  message: message || '',
+                  ...(iconImageUrl && { iconImageUrl }),
+                  ...(cta && { cta }),
+                  ...(expandableDetails && { expandableDetails }),
+                },
+                messageSubject: channelTemplate?.name ? channelTemplate.name : 'messageSubject',
+                offers: [],
+              },
+            },
+          };
+        }
+        break;
+      }
       default:
         break;
     }
@@ -1173,6 +1340,7 @@ export class Creatives extends React.Component {
       case constants.SMS:
       case constants.WECHAT:
       case constants.VIBER:
+      case constants.WEBPUSH:
         break;
       case constants.EMAIL:
         gtmDetails = {