@capillarytech/creatives-library 8.0.87-alpha.21 → 8.0.87-alpha.23

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/mockData.js

@@ -3,7 +3,7 @@ export const mockData = {
     selectedWhatsappAccount: {
       name: 'WhatsppTest',
       sourceAccountIdentifier: 'AC41030cebba9e2f1ce37c78235da0ee18',
-      configs: { accessToken: '4676323eb5d1f975b0987070c03a8efc' },
+      configs: { },
       hostName: 'twiliowhatsapptrans',
     },
   },
@@ -11,7 +11,7 @@ export const mockData = {
     selectedWhatsappAccount: {
       name: 'WhatsappAccount',
       sourceAccountIdentifier: '107499611940863',
-      configs: { accessToken: 'Bearer gDwEuRIm9icV6phixociSw==' },
+      configs: { },
       hostName: 'karixwhatsappbulk',
     },
   },
@@ -24,7 +24,7 @@ export const mockData = {
     selectedWhatsappAccount: {
       name: 'gupshup_test',
       sourceAccountIdentifier: '2000222347',
-      configs: { accessToken: 'DTpZEh4VK' },
+      configs: { },
       hostName: 'gupshupwhatsappbulk',
     },
   },
@@ -41,7 +41,6 @@ export const mockData = {
               status: 'approved',
               templateId: 'HT9bb4d61eea1699d2dbcaecd1cb558345',
               accountName: 'WhatsppTest',
-              accessToken: '4676323eb5d1f975b0987070c03a8efc',
               accountId: 'AC41030cebba9e2f1ce37c78235da0ee18',
               mediaType: 'text',
               languages: [
@@ -97,7 +96,6 @@ export const mockData = {
               status: 'rejected',
               templateId: 'HT9bb4d61eea1699d2dbcaecd1cb558345',
               accountName: 'WhatsppTest',
-              accessToken: '4676323eb5d1f975b0987070c03a8efc',
               accountId: 'AC41030cebba9e2f1ce37c78235da0ee18',
               mediaType: 'text',
               languages: [
@@ -136,7 +134,6 @@ export const mockData = {
               status: 'rejected',
               templateId: 'HT9bb4d61eea1699d2dbcaecd1cb558345',
               accountName: 'WhatsppTest',
-              accessToken: '4676323eb5d1f975b0987070c03a8efc',
               accountId: 'AC41030cebba9e2f1ce37c78235da0ee18',
               mediaType: 'text',
               languages: [
@@ -277,7 +274,6 @@ export const mockData = {
             varMapped: {},
             templateEditor: false,
             accountId: '123456789',
-            accessToken: '12345',
             hostName: 'karixwhatsappbulk',
             whatsappMedia: {
               header: '',

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

@@ -7,9 +7,11 @@ 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';
+import { WHATSAPP_MEDIA_TYPES } from '../../Whatsapp/constants';
 
 const {
   whatsappPreviewTemplateData,
@@ -100,4 +102,179 @@ 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');
+    });
+  });
+
+  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

@@ -80,6 +80,7 @@ export const getWhatsappContent = (template, isPreview) => {
               header = '',
               footer = '',
             } = {},
+            carouselData = [],
           } = {},
         } = {},
       } = {},
@@ -113,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> : '',
@@ -125,6 +142,10 @@ export const getWhatsappContent = (template, isPreview) => {
       quickReplyData: buttonsData
     }),
     ...mediaParams,
+    carouselData: getCarouselData(),
+    ...(isPreview && carouselData?.length && {
+      carouselMediaType: carouselData[0]?.mediaType,
+    }),
   };
 };
 
@@ -188,6 +209,37 @@ 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"
+            className="whatsapp-list-view-text-align"
+          >
+            <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/Zalo/index.js

@@ -3,7 +3,7 @@
 import React, { useState, useEffect } from 'react';
 import { bindActionCreators } from 'redux';
 import { createStructuredSelector } from 'reselect';
-import { injectIntl, FormattedMessage } from 'react-intl';
+import { FormattedMessage } from 'react-intl';
 import { get, isEmpty } from 'lodash';
 import styled from 'styled-components';
 import CapSpin from '@capillarytech/cap-ui-library/CapSpin';
@@ -53,6 +53,8 @@ import injectReducer from '../../utils/injectReducer';
 import * as globalActions from '../Cap/actions';
 import v2ZaloReducer from './reducer';
 import { v2ZaloSagas } from './saga';
+import { CapIcon } from '@capillarytech/cap-ui-library';
+import { isTagIncluded } from '../../utils/commonUtils';
 
 export const Zalo = (props) => {
   const {
@@ -233,11 +235,11 @@ export const Zalo = (props) => {
   const onTagSelect = (data) => {
     if (data && textAreaId) {
       const updatedZaloTemplateInfo = templateListParams?.map((listParams) => {
-        const { name = '', value = '', minLength, maxLength } = listParams;
+        const { name = '', value = '', minLength = '', maxLength = '' } = listParams;
         if (name === textAreaId) {
           const text = `${value}{{${data}}}`;
-          const isLengthError =
-            text.length <= minLength || text.length > maxLength;
+          const hasTag = isTagIncluded(text);
+          const isLengthError = !hasTag && (text.length <= minLength || text.length > maxLength);
           return {
             ...listParams,
             value: text,
@@ -280,9 +282,12 @@ export const Zalo = (props) => {
 
   //this function is used for checking errror validation in this it validate tags error and length error
   const handleErrorValidation = (e, field) => {
-    const { minLength, maxLength } = field;
+    const { minLength = '', maxLength = '' } = field;
     let error = e ? tagValidationErrorMessage(e) : '';
-    if (!e || e.length <= minLength || e.length > maxLength) {
+    
+    // Only check length validation if there are no tags in the content
+    const hasTag = isTagIncluded(e);
+    if (!hasTag && (!e || e.length <= minLength || e.length > maxLength)) {
       error = formatMessage(messages.maxMinLengthMessage, {
         minLength,
         maxLength,
@@ -311,7 +316,7 @@ export const Zalo = (props) => {
   };
 
   const renderTextBoxesForListParams = (listParam) => {
-    const { name, error, value } = listParam;
+    const { name = '', error = '', value = '' } = listParam;
     return (
       <CapInput
         id={`zalo-${name}`}
@@ -351,8 +356,9 @@ export const Zalo = (props) => {
   const isEditDoneDisabled = () => {
     let disableCheck = false;
     templateListParams?.forEach((listParams) => {
-      const { error, value } = listParams;
-      const errorMessage = !error
+      const { error = '', value = '' } = listParams;
+      const hasTag = isTagIncluded(value);
+      const errorMessage = !error && !hasTag
         ? handleErrorValidation(value, listParams)
         : error;
       if (errorMessage) {
@@ -397,7 +403,9 @@ export const Zalo = (props) => {
 
   const renderContent = () =>
     templateListParams?.map((listParam) => {
-      const { name = '', value = '', maxLength } = listParam;
+      const { name = '', value = '', maxLength = '' } = listParam;
+      const hasTag = isTagIncluded(value);
+      
       return (
         <>
           {renderTextBoxesForListParams(listParam)}
@@ -408,16 +416,24 @@ export const Zalo = (props) => {
               })}
             </CapLabel>
             <CapLabel className="variable-field-length">
-              {formatMessage(messages.charactersCount, {
-                variableLength: value.length,
-                maxLength,
-              })}
+              {!hasTag && (
+                formatMessage(messages.charactersCount, {
+                  variableLength: value.length,
+                  maxLength,
+                })
+              )}
             </CapLabel>
           </CapRow>
         </>
       );
     });
 
+  const hasTag = templateListParams?.some((listParam) => {
+    const { value = '' } = listParam;
+    const isTagAvailable = isTagIncluded(value);
+    return isTagAvailable;
+  });
+
   return (
     <CapSpin spinning={zaloTemplateInfoStatus === REQUEST}>
       <CapRow type="flex" className="cap-zalo-creatives">
@@ -458,7 +474,23 @@ export const Zalo = (props) => {
                 }
               />
             </CapRow>
-            <CapRow className="zalo-variable-list">{renderContent()}</CapRow>
+            <CapRow className="zalo-variable-list">
+              {renderContent()}
+              {
+                hasTag && (
+                  <CapAlert
+                    message={
+                      <CapLabel type="label2">
+                        <CapIcon type="warning" className="alert-icon-zalo" />
+                        {formatMessage(messages.tagLengthWarning)}
+                      </CapLabel>
+                    }
+                    type="warning"
+                    className="zalo-warning-message"
+                  />
+                )
+              }
+            </CapRow>
           </CapRow>
         </CapColumn>
         <CapColumn span={10}>

package/v2Containers/Zalo/index.scss

@@ -27,6 +27,14 @@
     }
   }
 
+  .zalo-warning-message {
+    margin-top: $CAP_SPACE_24;
+
+    .alert-icon-zalo {
+      margin-right: $CAP_SPACE_08;
+    }
+  }
+
   .variable-field-container {
     display: flex;
     margin-top: $CAP_SPACE_08;

package/v2Containers/Zalo/messages.js

@@ -83,4 +83,8 @@ export default defineMessages({
     id: `${prefix}.btnDisabledTooltip`,
     defaultMessage: 'Please add all mandatory fields to proceed further',
   },
+  tagLengthWarning: {
+    id: `${prefix}.tagLengthWarning`,
+    defaultMessage: "If the resolved tag values in the variables exceed their character count limit, the message will fail to go out.",
+  },
 });

package/v2Containers/mockdata.js

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