@capillarytech/creatives-library 8.0.90 → 8.0.91

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

@@ -2,6 +2,7 @@
 
 exports[`Test utils test getWhatsappContent 1`] = `
 Object {
+  "carouselData": Array [],
   "charCount": 151,
   "ctaData": Array [
     Object {
@@ -31,6 +32,7 @@ Click {{unsubscribe}} to unsubscribe
 
 exports[`Test utils test getWhatsappContent 2`] = `
 Object {
+  "carouselData": Array [],
   "charCount": 36,
   "templateFooterPreview": "",
   "templateHeaderPreview": "",
@@ -44,6 +46,7 @@ Object {
 
 exports[`Test utils test getWhatsappContent 3`] = `
 Object {
+  "carouselData": Array [],
   "charCount": 151,
   "ctaData": Array [
     Object {
@@ -73,6 +76,7 @@ Click {{unsubscribe}} to unsubscribe
 
 exports[`Test utils test getWhatsappContent 4`] = `
 Object {
+  "carouselData": Array [],
   "charCount": 151,
   "ctaData": Array [
     Object {
@@ -151,6 +155,7 @@ Click {{unsubscribe}} to unsubscribe
 
 exports[`Test utils test getWhatsappContent 5`] = `
 Object {
+  "carouselData": Array [],
   "charCount": -1,
   "templateFooterPreview": "",
   "templateHeaderPreview": "",
@@ -164,6 +169,7 @@ Object {
 
 exports[`Test utils test getWhatsappContent for preview 1`] = `
 Object {
+  "carouselData": Array [],
   "charCount": 151,
   "ctaData": Array [
     Object {

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

@@ -7,9 +7,10 @@ import {
   getWhatsappDocPreview,
   getWhatsappQuickReply,
   getWhatsappAutoFill,
+  getWhatsappCarouselButtonView,
 } from '../utils';
 import mockdata from '../../mockdata';
-import { HOST_ICS } from '../constants';
+import { HOST_ICS, PHONE_NUMBER, QUICK_REPLY } from '../constants';
 
 const {
   whatsappPreviewTemplateData,
@@ -100,4 +101,82 @@ describe('Test utils', () => {
       JSON.stringify(getWhatsappDocPreviewOutput1),
     );
   });
+
+  describe('test getWhatsappCarouselButtonView', () => {
+    it('should return empty array for null/undefined/empty input', () => {
+      expect(getWhatsappCarouselButtonView(null)).toEqual([]);
+      expect(getWhatsappCarouselButtonView(undefined)).toEqual([]);
+      expect(getWhatsappCarouselButtonView([])).toEqual([]);
+    });
+
+    it('should render single button correctly', () => {
+      const singleButton = [{
+        text: 'Click Me',
+        buttonType: 'URL'
+      }];
+      
+      const result = getWhatsappCarouselButtonView(singleButton);
+      expect(result).toHaveLength(2); // 1 divider + 1 button
+      expect(result[0].props.className).toBe('whatsapp-list-view-divider'); // Divider
+      expect(result[1].props.children[1]).toBe('Click Me'); // Button text
+    });
+
+    it('should render multiple buttons with dividers', () => {
+      const multipleButtons = [
+        { text: 'Call Us', type: PHONE_NUMBER },
+        { text: 'Reply', type: QUICK_REPLY },
+        { text: 'Visit Website', buttonType: 'URL' }
+      ];
+      
+      const result = getWhatsappCarouselButtonView(multipleButtons);
+      expect(result).toHaveLength(6); // Initial divider + 3 buttons + 2 intermediate dividers
+    });
+
+    it('should handle template preview mode correctly', () => {
+      const buttons = [{
+        text: 'Click Me',
+        buttonType: 'URL'
+      }];
+      
+      const result = getWhatsappCarouselButtonView(buttons, true);
+      expect(result[0].props.className).toBe('whatsapp-divider'); // Check preview mode divider class
+    });
+
+    it('should handle buttons without text properly', () => {
+      const buttons = [
+        { buttonType: 'URL' },
+        { text: 'Valid Button', buttonType: 'URL' }
+      ];
+      
+      const result = getWhatsappCarouselButtonView(buttons);
+      expect(result).toHaveLength(3); // Initial divider + 1 valid button + 1 divider
+    });
+
+    it('should use correct icons based on button type', () => {
+      const buttons = [
+        { text: 'Call Now', type: PHONE_NUMBER },
+        { text: 'Quick Reply', type: QUICK_REPLY },
+        { text: 'Visit Site', buttonType: 'URL' }
+      ];
+      
+      const result = getWhatsappCarouselButtonView(buttons);
+      
+      // Check icon types
+      expect(result[1].props.children[0].props.type).toBe('call'); // Phone number icon
+      expect(result[3].props.children[0].props.type).toBe('small-link'); // Quick reply icon
+      expect(result[5].props.children[0].props.type).toBe('launch'); // URL icon
+    });
+
+    it('should handle both type and buttonType properties', () => {
+      const buttons = [
+        { text: 'Button 1', type: PHONE_NUMBER },
+        { text: 'Button 2', buttonType: PHONE_NUMBER }
+      ];
+      
+      const result = getWhatsappCarouselButtonView(buttons);
+      // Both buttons should have call icons
+      expect(result[1].props.children[0].props.type).toBe('call');
+      expect(result[3].props.children[0].props.type).toBe('call');
+    });
+  });
 });

package/v2Containers/Whatsapp/utils.js

@@ -80,6 +80,7 @@ export const getWhatsappContent = (template, isPreview) => {
               header = '',
               footer = '',
             } = {},
+            carouselData = [],
           } = {},
         } = {},
       } = {},
@@ -125,6 +126,7 @@ export const getWhatsappContent = (template, isPreview) => {
       quickReplyData: buttonsData
     }),
     ...mediaParams,
+    carouselData,
   };
 };
 
@@ -188,6 +190,38 @@ export const getWhatsappQuickReply= (template, templatePreview) => {
   }
   return renderArray;
 }
+
+export const getWhatsappCarouselButtonView = (buttons, templatePreview) => {
+  const renderArray = [];
+  if (buttons?.length) {
+    renderArray.push(<CapDivider className={templatePreview ? "whatsapp-divider" : "whatsapp-list-view-divider"} />);
+    buttons.forEach((button, index) => {
+      const { text, buttonType, type } = button || {};
+      const currentButtonType = type || buttonType;
+      if (text) {
+        renderArray.push(
+          <CapLabel
+            type="label21"
+            style={{ textAlign: 'center', marginTop: '12px' }}
+            // className={templatePreview ? "whatsapp-cta-preview" : "whatsapp-list-quick-reply-preview"}
+          >
+            <CapIcon
+              type={currentButtonType === PHONE_NUMBER ? 'call' : currentButtonType === QUICK_REPLY ? "small-link" : 'launch'}
+              size="xs"
+              svgProps={{ style: { marginRight: '4px' } }}
+            />
+            {text}
+          </CapLabel>,
+        );
+      }
+      if (index < buttons?.length - 1) {
+        renderArray.push(<CapDivider className={templatePreview ? "whatsapp-divider" : "whatsapp-list-view-divider"} />);
+      }
+    });
+  }
+  return renderArray;
+};
+
 export const getWhatsappAutoFill = (template) => {
   const {category}= get(
     template,

package/v2Containers/mockdata.js

@@ -1592,6 +1592,7 @@ export default {
     totalCount: 7,
   },
   whatsappPreviewTemplateData3Result: {
+    carouselData: [],
     quickReplyData: [
       {
         index: 0,
@@ -2595,3 +2596,4 @@ export default {
       />
     </CapLabel>,
 };
+