@capillarytech/creatives-library 8.0.98 → 8.0.100

package/package.json

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

package/v2Components/FormBuilder/constants.js

@@ -1 +1,9 @@
 export const OUTBOUND = 'OUTBOUND';
+export const GLOBAL_CONVERT_OPTIONS = {
+    selectors: [
+      ...[1, 2, 3, 4, 5, 6].map(level => ({
+        selector: `h${level}`,
+        options: { uppercase: false }
+      }))
+    ]
+  };

package/v2Components/FormBuilder/index.js

@@ -52,7 +52,7 @@ import { checkSupport, extractNames, preprocessHtml, validateIfTagClosed } from
 import { SMS, MOBILE_PUSH, LINE, ENABLE_AI_SUGGESTIONS,AI_CONTENT_BOT_DISABLED, EMAIL, LIQUID_SUPPORTED_CHANNELS } from '../../v2Containers/CreativesContainer/constants';
 import globalMessages from '../../v2Containers/Cap/messages';
 import { convert } from 'html-to-text';
-import { OUTBOUND } from './constants';
+import { GLOBAL_CONVERT_OPTIONS, OUTBOUND } from './constants';
 import { GET_TRANSLATION_MAPPED } from '../../containers/TagList/constants';
 import moment from 'moment';
 import { CUSTOMER_BARCODE_TAG , COPY_OF, ENTRY_TRIGGER_TAG_REGEX} from '../../containers/App/constants';
@@ -1092,7 +1092,7 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
         const templateContent = this.state.formData?.base?.en?.["template-content"] || "";
         //Converts given HTML content to plain text string.
         const content = convert(
-          templateContent
+          templateContent, GLOBAL_CONVERT_OPTIONS
         );
       /* 
         The `handleResult` function is used as a callback for `getLiquidTags` to handle the results post-processing. 

package/v2Components/FormBuilder/utils.js

@@ -0,0 +1,152 @@
+import {
+  SMS,
+  MOBILE_PUSH,
+  EMAIL
+} from "../../v2Containers/CreativesContainer/constants";
+
+/**
+ * Transform form data to API payload format
+ * @param {object} formData - The form data from the UI
+ * @param {string} channel - The communication channel (EMAIL, SMS, WECHAT, MOBILE_PUSH)
+ * @param {object} params - Additional parameters like sourceEntityId, ouId, etc.
+ * @returns {object} - The formatted API payload
+ */
+export const transformFormDataToAPIPayload = (
+  formData,
+  loyaltyMetaData = {}
+) => {
+  console.log("**** # transformDataToAPIPyaload: ", {
+    formData,
+    loyaltyMetaData
+  });
+  const {
+    actionId,
+    actionName,
+    ouId,
+    clientName,
+    module,
+    metaId,
+    setMetaId = () => {},
+    channel,
+    transformedMessageDetails
+  } = loyaltyMetaData;
+
+  const { emailDeliverySettings } = transformedMessageDetails;
+  const upperCaseChannel = channel.toUpperCase();
+
+  // Base response structure
+  const response = {
+    ouId: ouId || -1,
+    sourceEntityId: actionId,
+    channel: upperCaseChannel || this.props.schema.channel.toUpperCase(),
+    module,
+    executionParams: {},
+    clientName: clientName || "EMF"
+  };
+
+  switch (upperCaseChannel) {
+    case EMAIL: {
+      const subject = formData["template-subject"] || "";
+      const htmlContent = formData?.base?.en?.["template-content"] || "";
+
+      return {
+        ...response,
+        emailDeliverySettings: emailDeliverySettings || {},
+        emailMessageContent: {
+          channel: EMAIL,
+          messageBody: htmlContent,
+          messageSubject: subject
+        }
+      };
+    }
+
+    case SMS: {
+      // Extract SMS content from formData
+      const smsContent = formData["sms-editor"] || "";
+      const templateId = formData.template_id || "";
+      const templateName = formData.template_name || "";
+      const header = formData.header || "";
+      const varMapped = formData["var-mapped"] || {};
+
+      return {
+        ...response,
+        smsDeliverySettings: {
+          additionalSettings: {
+            skipRateLimit: false
+          },
+          channelSettings: {
+            channel: SMS,
+            senderId: header || ""
+          }
+        },
+        smsMessageContent: {
+          channel: SMS,
+          messageBody: smsContent,
+          templateId,
+          templateName,
+          varMapped
+        }
+      };
+    }
+
+    case MOBILE_PUSH: {
+      // Extract Mobile Push content
+      const androidContent = formData.ANDROID || {};
+      const iosContent = formData.IOS || {};
+
+      return {
+        ...response,
+        mobilePushDeliverySettings: {
+          additionalSettings: {
+            skipRateLimit: false
+          },
+          channelSettings: {
+            channel: MOBILE_PUSH
+          }
+        },
+        mobilePushMessageContent: {
+          channel: MOBILE_PUSH,
+          androidContent: {
+            title: androidContent.title || "",
+            body: androidContent.message || "",
+            type: androidContent.type || "TEXT",
+            custom: androidContent.custom || {}
+          },
+          iosContent: {
+            title: iosContent.title || "",
+            body: iosContent.message || "",
+            type: iosContent.type || "TEXT",
+            custom: iosContent.custom || {}
+          }
+        }
+      };
+    }
+
+    // case WECHAT: {
+    //   // Extract WeChat content
+    //   const wechatContent = formData.content || {};
+
+    //   return {
+    //     ...response,
+    //     wechatDeliverySettings: {
+    //       additionalSettings: {
+    //         skipRateLimit: false
+    //       },
+    //       channelSettings: {
+    //         channel: WECHAT
+    //       }
+    //     },
+    //     wechatMessageContent: {
+    //       channel: WECHAT,
+    //       messageBody: wechatContent.body || "",
+    //       templateId: wechatContent.templateId || "",
+    //       templateName: wechatContent.templateName || "",
+    //       varMapped: wechatContent.varMapped || {}
+    //     }
+    //   };
+    // }
+
+    default:
+      return response;
+  }
+};

package/v2Containers/Whatsapp/index.js

@@ -405,10 +405,16 @@ export const Whatsapp = (props) => {
             videoSrc: carousel?.videoUrl,
             videoPreviewImg: carousel?.videoPreviewImg,
           }),
+          karixFileHandle: carousel?.karixFileHandle || '',
           buttons: carousel?.buttons?.map((button) => ({
             ...button,
             buttonType: button?.type,
           })),
+          assetList: {
+            previewUrl: carousel?.videoPreviewImg,
+            videoSrc: carousel?.videoUrl,
+            fileHandle: carousel?.karixFileHandle,
+          }
         };
       })
     );
@@ -1130,7 +1136,7 @@ const isAuthenticationTemplate = isEqual(templateCategory, WHATSAPP_CATEGORIES.a
       videoSize={WHATSAPP_VIDEO_SIZE}
       isFullMode={isFullMode}
       uploadAsset={uploadWhatsappAsset}
-      uploadedAssetList={carouselData?.[activeIndex]?.assetList || []}
+      uploadedAssetList={isMediaTypeCarousel ? carouselData?.[activeIndex]?.assetList : assetList}
       onVideoUploadUpdateAssestList={setUpdateWhatsappVideoSrc}
       videoData={editData}
       className="cap-custom-video-upload"

package/v2Containers/Whatsapp/tests/utils.test.js

@@ -11,6 +11,7 @@ import {
 } from '../utils';
 import mockdata from '../../mockdata';
 import { HOST_ICS, PHONE_NUMBER, QUICK_REPLY } from '../constants';
+import { WHATSAPP_MEDIA_TYPES } from '../../Whatsapp/constants';
 
 const {
   whatsappPreviewTemplateData,
@@ -179,4 +180,101 @@ describe('Test utils', () => {
       expect(result[3].props.children[0].props.type).toBe('call');
     });
   });
+
+  describe('carousel functionality', () => {
+    const mockTemplate = {
+      versions: {
+        base: {
+          content: {
+            whatsapp: {
+              languages: [{ content: 'Test message' }],
+              carouselData: [
+                {
+                  mediaType: 'image',
+                  imageUrl: 'https://example.com/image.jpg',
+                },
+                {
+                  mediaType: 'video',
+                  videoUrl: 'https://example.com/video.mp4',
+                  videoPreviewImg: 'https://example.com/preview.jpg',
+                },
+              ],
+            },
+          },
+        },
+      },
+    };
+
+    it('should return original carousel data when isPreview is false', () => {
+      const result = getWhatsappContent(mockTemplate, false);
+      expect(result.carouselData).toEqual([
+        {
+          mediaType: 'image',
+          imageUrl: 'https://example.com/image.jpg',
+        },
+        {
+          mediaType: 'video',
+          videoUrl: 'https://example.com/video.mp4',
+          videoPreviewImg: 'https://example.com/preview.jpg',
+        },
+      ]);
+      expect(result.carouselMediaType).toBeUndefined();
+    });
+
+    it('should transform carousel data correctly when isPreview is true', () => {
+      const result = getWhatsappContent(mockTemplate, true);
+
+      expect(result.carouselData).toEqual([
+        {
+          mediaType: 'image',
+          imageUrl: 'https://example.com/image.jpg',
+          imageSrc: 'https://example.com/image.jpg',
+        },
+        {
+          mediaType: 'video',
+          videoUrl: 'https://example.com/video.mp4',
+          videoPreviewImg: 'https://example.com/preview.jpg',
+          videoSrc: 'https://example.com/video.mp4',
+        },
+      ]);
+      expect(result.carouselMediaType).toBe('image');
+    });
+
+    it('should handle empty carousel data', () => {
+      const emptyTemplate = {
+        versions: {
+          base: {
+            content: {
+              whatsapp: {
+                languages: [{ content: 'Test message' }],
+                carouselData: [],
+              },
+            },
+          },
+        },
+      };
+
+      const result = getWhatsappContent(emptyTemplate, true);
+      expect(result.carouselData).toEqual([]);
+      expect(result.carouselMediaType).toBeUndefined();
+    });
+
+    it('should handle undefined carousel data', () => {
+      const undefinedTemplate = {
+        versions: {
+          base: {
+            content: {
+              whatsapp: {
+                languages: [{ content: 'Test message' }],
+              },
+            },
+          },
+        },
+      };
+
+      const result = getWhatsappContent(undefinedTemplate, true);
+      expect(result.carouselData).toEqual([]);
+      expect(result.carouselMediaType).toBeUndefined();
+    });
+  });
 });

package/v2Containers/Whatsapp/utils.js

@@ -114,6 +114,22 @@ export const getWhatsappContent = (template, isPreview) => {
       break;
   }
 
+  const getCarouselData = () => {
+    if (isPreview && carouselData?.length) {
+      return carouselData.map((carousel) => {
+        if (carousel?.mediaType === WHATSAPP_MEDIA_TYPES.IMAGE.toLowerCase()) {
+          carousel.imageSrc = carousel?.imageUrl;
+        }
+        if (carousel?.mediaType === WHATSAPP_MEDIA_TYPES.VIDEO.toLowerCase()) {
+          carousel.videoSrc = carousel?.videoUrl;
+          carousel.videoPreviewImg = carousel?.videoPreviewImg;
+        }
+        return carousel;
+      });
+    }
+    return carouselData;
+  };
+
   return {
     templateHeaderPreview: header ? <CapLabel className="whatsapp-template-list-header-preview">{header}</CapLabel> : '',
     templateFooterPreview: footer ? <CapLabel className="whatsapp-template-list-footer-preview">{footer}</CapLabel> : '',
@@ -126,7 +142,10 @@ export const getWhatsappContent = (template, isPreview) => {
       quickReplyData: buttonsData
     }),
     ...mediaParams,
-    carouselData,
+    carouselData: getCarouselData(),
+    ...(isPreview && carouselData?.length && {
+      carouselMediaType: carouselData[0]?.mediaType,
+    }),
   };
 };