@capillarytech/creatives-library 8.0.250-alpha.2 → 8.0.251

package/utils/tests/transformerUtils.test.js

@@ -15,7 +15,6 @@ import {
   RCS,
   LINE,
   VIBER,
-  WEBPUSH,
 } from "../../v2Containers/CreativesContainer/constants";
 
 describe("transformerUtils", () => {
@@ -1183,302 +1182,6 @@ 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/transformTemplateConfig.js

@@ -101,6 +101,7 @@ export async function transformTemplateConfigWithMediaDetails(templateConfig, ch
   const contentType = detectMediaContentType(templateConfig);
 
   if (contentType === MEDIA_CONTENT_TYPE.NONE) {
+    console.log('No media content detected, returning original config');
     return templateConfig;
   }
 
@@ -108,19 +109,24 @@ export async function transformTemplateConfigWithMediaDetails(templateConfig, ch
   let transformDirection;
   if (forceDirection) {
     transformDirection = forceDirection;
+    console.log(`Forced transformation direction: ${transformDirection}`);
   } else {
     // Auto-detect based on content
     if (contentType === MEDIA_CONTENT_TYPE.URLS) {
       transformDirection = TRANSFORM_DIRECTION.FORWARD; // URLs → tags
+      console.log('Detected URLs, applying forward transformation (URLs → tags)');
     } else if (contentType === MEDIA_CONTENT_TYPE.TAGS) {
       transformDirection = TRANSFORM_DIRECTION.REVERSE; // tags → URLs
+      console.log('Detected media_content tags, applying reverse transformation (tags → URLs)');
     } else if (contentType === MEDIA_CONTENT_TYPE.MIXED) {
       transformDirection = TRANSFORM_DIRECTION.SMART; // Handle mixed content intelligently
+      console.log('Detected mixed content, applying smart transformation');
     }
   }
 
   const newConfig = cloneDeep(templateConfig);
   try {
+    console.log(`Fetching media details for ${transformDirection} transformation, ID: ${mediaDetailsId}`);
 
     // Fetch media details mapping from API
     const response = await getMediaDetails({ id: mediaDetailsId })
@@ -139,6 +145,7 @@ export async function transformTemplateConfigWithMediaDetails(templateConfig, ch
       idToUrlMapping[mediaId] = url;
     });
 
+    console.log(`Processing ${Object.keys(urlToIdMapping).length} media mappings`);
 
     // Apply transformations based on direction
     newConfig?.cards?.forEach(card => {
@@ -150,6 +157,7 @@ export async function transformTemplateConfigWithMediaDetails(templateConfig, ch
           // Forward transformation: URL → tag
           const mediaDetailId = urlToIdMapping[currentUrl];
           if (mediaDetailId) {
+            console.log(`Forward: ${currentUrl} → {{media_content(${mediaDetailId})}}`);
             card.media.url = `{{media_content(${mediaDetailId})}}`;
           } else {
             console.warn(`No media detail ID found for URL: ${currentUrl}`);
@@ -161,6 +169,7 @@ export async function transformTemplateConfigWithMediaDetails(templateConfig, ch
           if (mediaId) {
             const actualUrl = idToUrlMapping[mediaId];
             if (actualUrl) {
+              console.log(`Reverse: {{media_content(${mediaId})}} → ${actualUrl}`);
               card.media.url = actualUrl;
             } else {
               console.warn(`No URL found for media ID: ${mediaId}`);
@@ -176,6 +185,7 @@ export async function transformTemplateConfigWithMediaDetails(templateConfig, ch
     console.error('Failed to fetch media details for transformation:', error);
 
     // Fallback: try to extract/convert what we can without API
+    console.log('Falling back to URL extraction method');
     newConfig.cards.forEach(card => {
       if (card.media && card.media.url) {
         if (transformDirection === TRANSFORM_DIRECTION.FORWARD) {

package/utils/transformerUtils.js

@@ -10,7 +10,6 @@ import {
   RCS,
   LINE,
   VIBER,
-  WEBPUSH,
   EMF,
   VENENO,
   TEXT,
@@ -64,8 +63,6 @@ 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
   }
@@ -320,43 +317,6 @@ 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/CapDeviceContent/index.js

@@ -69,7 +69,7 @@ const CapDeviceContent = (props) => {
     templateDescErrorHandler,
     templateTitleError,
     setTemplateTitleError,
-    isAiContentBotDisabled,
+    isAiContentBotDisabled
   } = props || {};
   const { TextArea } = CapInput;
   const { formatMessage } = intl;
@@ -167,22 +167,21 @@ const CapDeviceContent = (props) => {
   return (
     <>
       <CapRow className="creatives-device-content">
-        <CapLink
+       <CapLink
           title={isAndroid
-            ? formatMessage(messages.copyContentFromIOS)
-            : formatMessage(messages.copyCotentFromAndroid)}
+              ? formatMessage(messages.copyContentFromIOS)
+              : formatMessage(messages.copyCotentFromAndroid)}
           className="inapp-copy-content"
           onClick={onCopyTitleAndContent}
-        />
+          />
         <CapRow className="creatives-inapp-title">
           <CapColumn
-            className="inapp-content-main"
+           className="inapp-content-main"
           >
             <CapHeading type="h5" className="inapp-title">
               {formatMessage(messages.title)}
             </CapHeading>
-            {getTagList(0)}
-            {/* here 0 signifies the tags for template title */}
+            {getTagList(0)} {/* here 0 signifies the tags for template title */}
           </CapColumn>
           <CapInput
             id="inapp-title-name-input"
@@ -214,7 +213,7 @@ const CapDeviceContent = (props) => {
         </CapRow>
         <CapRow className={`creatives-inapp-message ${!isMediaTypeImage && "message-bottom-margin"}`}>
           <CapColumn
-            className="inapp-message-header"
+           className="inapp-message-header"
           >
             <CapHeading type="h5" className="inapp-message-header-style">
               {formatMessage(messages.message)}
@@ -223,37 +222,37 @@ const CapDeviceContent = (props) => {
             {/* here 1 signifies the tags for template message */}
           </CapColumn>
           <div className="inapp-create-template-message-input-wrapper">
-            <TextArea
-              id="inapp-create-template-message-input"
-              className="inapp-create-template-message-input"
-              placeholder={formatMessage(messages.textAreaInputPlaceholder)}
-              onChange={onTemplateMessageChange}
-              value={templateMessage || ""}
-              autosize={{ minRows: 5, maxRows: 5 }}
-              errorMessage={
-                templateMessageError && (
-                  <CapError className="inapp-template-message-error">
-                    {templateMessageError}
-                  </CapError>
-                )
-              }
+          <TextArea
+            id="inapp-create-template-message-input"
+            className="inapp-create-template-message-input"
+            placeholder={formatMessage(messages.textAreaInputPlaceholder)}
+            onChange={onTemplateMessageChange}
+            value={templateMessage || ""}
+            autosize={{ minRows: 5, maxRows: 5 }}
+            errorMessage={
+              templateMessageError && (
+                <CapError className="inapp-template-message-error">
+                  {templateMessageError}
+                </CapError>
+              )
+            }
+          />
+          {!isAiContentBotDisabled && (
+            <CapAskAira.ContentGenerationBot
+              text={templateMessage || ""}
+              setText={(text) => {
+                onTemplateMessageChange({ target: { value: text } }); 
+              }}
+              iconPlacement="float-br"
+              iconSize="1.6rem"
+              rootStyle={{
+                bottom: "0.2rem",
+                right: "0.2rem",
+                left: "auto",
+                position: "absolute",
+              }}
             />
-            {!isAiContentBotDisabled && (
-              <CapAskAira.ContentGenerationBot
-                text={templateMessage || ""}
-                setText={(text) => {
-                  onTemplateMessageChange({ target: { value: text } });
-                }}
-                iconPlacement="float-br"
-                iconSize="1.6rem"
-                rootStyle={{
-                  bottom: "0.2rem",
-                  right: "0.2rem",
-                  left: "auto",
-                  position: "absolute",
-                }}
-              />
-            )}
+          )}
           </div>
           {isMediaTypeImage && (
             <>
@@ -280,16 +279,14 @@ const CapDeviceContent = (props) => {
         </CapRow>
       </CapRow>
       <CapRow className="inapp-action-link">
-        <CapCheckbox onChange={onActionLinkCheckBoxChange} checked={addActionLink} />
+        <CapCheckbox onChange={onActionLinkCheckBoxChange} checked={addActionLink}/>
         <CapRow className="inapp-render-heading">
           <CapHeader
-            title={(
-              <CapRow type="flex">
-                <CapHeading type="h4">
-                  {formatMessage(messages.addActionLink)}
-                </CapHeading>
-              </CapRow>
-            )}
+            title={<CapRow type="flex">
+              <CapHeading type="h4">
+                {formatMessage(messages.addActionLink)}
+              </CapHeading>
+            </CapRow>}
             description={<CapLabel type="label3">{formatMessage(messages.addActionLinkDesc)}</CapLabel>}
           />
           {addActionLink && (
@@ -313,21 +310,19 @@ const CapDeviceContent = (props) => {
       <CapRow className="inapp-cta-button">
         <CapHeader
           className="inapp-render-heading-cta-button"
-          title={(
-            <CapRow type="flex">
-              <CapHeading type="h4">
-                {formatMessage(messages.btnLabel)}
-              </CapHeading>
-              <CapHeading
-                type="h6"
-                className="inapp-optional-label"
-              >
-                {formatMessage(messages.optional)}
-              </CapHeading>
-            </CapRow>
-          )}
+          title={<CapRow type="flex">
+            <CapHeading type="h4">
+              {formatMessage(messages.btnLabel)}
+            </CapHeading>
+            <CapHeading
+              type="h6"
+              className="inapp-optional-label"
+            >
+              {formatMessage(messages.optional)}
+            </CapHeading>
+          </CapRow>}
           description={<CapLabel type="label3">{formatMessage(messages.btnDesc)}</CapLabel>}
-        />
+          />
         <CapRadioGroup
           options={BUTTON_RADIO_OPTIONS}
           value={buttonType}

package/v2Components/CapImageUpload/constants.js

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