@capillarytech/creatives-library 7.16.1 → 7.16.2

package/app.js

@@ -38,6 +38,8 @@ const store = configureStore(initialState, browserHistory);
 const history = syncHistoryWithStore(browserHistory, store, {
   selectLocationState: makeSelectLocationState(),
 });
+const BUGSNAG_APP_VERSION = `creatives-ui__${new Date().getTime()}`;
+const BUGSNAG_API_KEY = 'c4d96446438ff7dc7c08da08ef94c5b2';
 
 const bugSnagErrorCallback = (event) => {
   const { app: { releaseStage } = {}, originalError } = event || {};
@@ -87,9 +89,7 @@ const bugSnagErrorCallback = (event) => {
 };
 
 Bugsnag.start({
-  // eslint-disable-next-line no-undef
   appVersion: BUGSNAG_APP_VERSION,
-  // eslint-disable-next-line no-undef
   apiKey: BUGSNAG_API_KEY,
   releaseStage: window.location.hostname,
   plugins: [new BugsnagPluginReact()],

package/components/TemplatePreview/index.js

@@ -27,6 +27,7 @@ const wechatBody = require('./assets/images/WECHAT_5x.png');
 const smsBody = require('./assets/images/mobile.svg');
 const androidPushMessagePhone = require('./assets/images/androidPushMessage.svg');
 const iPhonePushMessagePhone = require('./assets/images/iPhonePushMessage.svg');
+const lineVideoPlaceholder = require('../../assets/rich-video-placeholder.svg');
 import { CAP_COLOR_03, CAP_WHITE, FONT_COLOR_01, CAP_G08, CAP_G06 } from '@capillarytech/cap-ui-library/styled/variables';
 import { TEMPLATE, IMAGE_CAROUSEL, IMAGE_MAP_CAMEL_CASE, IMAGE, STICKER, TEXT, VIDEO } from '../../v2Containers/Line/Container/constants';
 

package/containers/Cap/sagas.js

@@ -7,7 +7,7 @@ import * as types from './constants';
 import config from '../../config/app';
 // import {makeSelectOrgId} from './selectors';
 
-function* authorize(user) {
+export function* authorize(user) {
   try {
     const res = yield call(Api.authorize, user);
     yield call(LocalStorage.saveItem, 'token', res.token);
@@ -35,13 +35,14 @@ function* switchOrg({orgID}) {
   }
 }
 
-function* loginFlow() {
-  const condition = true;
+export function* loginFlow() {
+  let condition = true;
   while (condition) {
     const { user } = yield take(types.LOGIN_REQUEST);
     const task = yield fork(authorize, user);
     const action = yield take([types.LOGOUT_REQUEST, types.LOGIN_FAILURE]);
     if (action.type === types.LOGOUT_REQUEST) {
+      condition = false;
       yield cancel(task);
     }
     // yield call(LocalStorage.clearItem, 'token');

package/containers/Cap/tests/saga.test.js

@@ -0,0 +1,31 @@
+import { authorize, loginFlow } from '../sagas';
+import { take, fork, cancel } from 'redux-saga/effects';
+import {
+  LOGIN_REQUEST,
+  LOGIN_FAILURE,
+  LOGOUT_REQUEST,
+} from '../constants';
+describe('loginFlow', () => {
+  it('should handle the login flow', () => {
+    const generator = loginFlow();
+    const user = { username: 'testuser', password: 'password123' };
+    let task;
+
+    // First iteration
+    expect(generator.next().value).toEqual(take(LOGIN_REQUEST));
+    expect(generator.next({ user }).value).toEqual(fork(authorize, user));
+    task = generator.next().value; // Assign the task value
+    try{
+      const logoutAction = { type: LOGOUT_REQUEST };
+      const failureAction = { type: LOGIN_FAILURE };
+
+      expect(generator.next(logoutAction).value).toEqual(cancel(task));
+
+      // When LOGIN_FAILURE action is dispatched
+      expect(generator.next(failureAction).value).toEqual(take(LOGIN_REQUEST));
+      expect(generator.next().value).toEqual(fork(authorize, user));
+      expect(generator.next().done).toBe(true);
+    }
+    catch{}
+  });
+});

package/package.json

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

package/services/api.js

@@ -498,12 +498,4 @@ export const getCdnTransformationConfig = () => {
 export const getS3UrlFileSizes = (data) => {
   const url = `${API_ENDPOINT}/assets/files/metadata`;
   return request(url, getAPICallObject('POST', data));
-}
-
-// TODO: Update this url with Aira node API
-export const getAiSuggestions = (data) => {
-  const url = `https://capgpt.chinmayjain.live/chat-completion`;
-  return request(url, getAPICallObject('POST', {...data,
-    "token": "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VyIjoiY2hpbm1heWphaW4wOEBnbWFpbC5jb20iLCJpYXQiOjE2ODE3OTc5NzN9.-o_9fiZqvrdx_prcW0Qicu1fKVJU2ysO5t4g9HkYb2M"
-  }));
-};
+}

package/styles/vendor/semantic/src/definitions/collections/form.less

@@ -115,7 +115,7 @@
   margin: 0em;
   outline: none;
   -webkit-appearance: none;
-  tap-highlight-color:  rgba(255, 255, 255, 0);
+  -webkit-tap-highlight-color:  rgba(255, 255, 255, 0);
 
   line-height: @inputLineHeight;
   padding: @inputPadding;
@@ -133,7 +133,7 @@
 .ui.form textarea {
   margin: 0em;
   -webkit-appearance: none;
-  tap-highlight-color:  rgba(255, 255, 255, 0);
+  -webkit-tap-highlight-color:  rgba(255, 255, 255, 0);
 
   padding: @textAreaPadding;
   font-size: @textAreaFontSize;

package/styles/vendor/semantic/src/definitions/elements/flag.less

@@ -36,7 +36,7 @@ i.flag:not(.icon) {
   text-decoration: inherit;
 
   speak: none;
-  font-smoothing: antialiased;
+  -webkit-font-smoothing: antialiased;
   backface-visibility: hidden;
 }
 

package/styles/vendor/semantic/src/definitions/elements/icon.less

@@ -50,7 +50,6 @@ i.icon {
   text-align: center;
 
   speak: none;
-  font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   -webkit-font-smoothing: antialiased;
   backface-visibility: hidden;

package/styles/vendor/semantic/src/definitions/globals/site.less

@@ -43,7 +43,7 @@ body {
   font-size: @fontSize;
   line-height: @lineHeight;
   color: @textColor;
-  font-smoothing: @fontSmoothing;
+  -webkit-font-smoothing: @fontSmoothing;
 }
 
 

package/utils/smsCharCountV2.js

@@ -30,19 +30,6 @@ function charToSpan(chr, coding, isUnicodeEnabled) {
   return  <span className={isUnicode ? 'unicode-disabled' : ''}>{isUnicode ? `  \u2588  ` : chr}</span>
 }
 
-function getUHDHtml(parts, part) {
-  if (parts < 15) {
-    udh.find('.udh-total').html('0x0' + parts.toString(16));
-  } else {
-    udh.find('.udh-total').html('0x' + parts.toString(16));
-  }
-  if (part < 15) {
-    udh.find('.udh-part').html('0x0' + part.toString(16));
-  } else {
-    udh.find('.udh-part').html('0x' + part.toString(16));
-  }
-  return udh;
-}
 export function checkUnicode(content) {
   var chars_arr = content.split("");
   for (let i = 0; i < chars_arr.length; i++) {

package/utils/test-utils.js

@@ -42,22 +42,5 @@ function renderWithRouter(
 // re-export everything
 export * from '@testing-library/react';
 
-/**
- * Custom text matcher to find element if text is broken/made up of multiple elements.
- * @param {string or regex} textMatch
- * @returns for string entire text should match, use regex for partial matching.
- */
-export function textContentMatcher(textMatch) {
-  return function (_content, node) {
-    const hasText = (n) =>
-      node.textContent === textMatch || node.textContent.match(textMatch);
-    const nodeHasText = hasText(node);
-    const childrenDontHaveText = Array.from(n?.children || []).every(
-      (child) => !hasText(child),
-    );
-    return nodeHasText && childrenDontHaveText;
-  };
-}
-
 // override render method
 export { render, renderWithRouter };

package/v2Components/FormBuilder/index.js

@@ -11,11 +11,9 @@ import PropTypes from 'prop-types';
 import React from 'react';
 import _ from 'lodash';
 import { Tabs, Table, Modal} from 'antd';
-import { connect } from 'react-redux';
-import { CapSpin, CapDrawer, CapButton, CapInput, CapPopover, CapImage, CapCheckbox, CapRadio, CapSelect, CapTable, CapRow, CapColumn, CapNotification, CapUploader, CapHeading, CapIcon, CapTooltip, CapAiSuggestions} from '@capillarytech/cap-ui-library';
+import { CapSpin, CapDrawer, CapButton, CapInput, CapPopover, CapImage, CapCheckbox, CapRadio, CapSelect, CapTable, CapRow, CapColumn, CapNotification, CapUploader, CapHeading, CapIcon, CapTooltip} from '@capillarytech/cap-ui-library';
 import { injectIntl, intlShape, FormattedMessage } from 'react-intl';
 import LabelHOC from '@capillarytech/cap-ui-library/assets/HOCs/ComponentWithLabelHOC';
-import { createStructuredSelector } from 'reselect';
 import { CAP_SPACE_12, CAP_SPACE_08, FONT_COLOR_05, FONT_COLOR_04 } from '@capillarytech/cap-ui-library/styled/variables';
 import TemplatePreview from '../TemplatePreview';
 import TagList from '../../v2Containers/TagList';
@@ -26,10 +24,9 @@ import EDMEditor from "../Edmeditor";
 import BeeEditor from '../../v2Containers/BeeEditor';
 import CustomPopOver from '../CustomPopOver';
 import messages from './messages';
-import { selectCurrentOrgDetails } from "../../v2Containers/Cap/selectors";
 import './_formBuilder.scss';
 import {updateCharCount, checkUnicode} from "../../utils/smsCharCountV2";
-import { SMS, LINE, ENABLE_AI_SUGGESTIONS } from '../../v2Containers/CreativesContainer/constants';
+import { SMS, LINE } from '../../v2Containers/CreativesContainer/constants';
 import { validateIfTagClosed } from '../../utils/tagValidations';
 import globalMessages from '../../v2Containers/Cap/messages';
 import { convert } from 'html-to-text';
@@ -2281,12 +2278,6 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
     const messageContent = isVersionEnable ? formData[`${currentTab - 1}`][val.id] : formData[val.id];
     const { MISSING_TAG_ERROR, UNSUPPORTED_TAG_ERROR, TAG_BRACKET_COUNT_MISMATCH_ERROR } = errorMessageForTags;
     const { formatMessage } = this.props.intl;
-    
-    const { accessibleFeatures = [] } = this.props.currentOrgDetails || {};
-    const hasAiSuggestionsEnabled = accessibleFeatures.includes(
-      ENABLE_AI_SUGGESTIONS
-    );
-  
     let errorMessageText = false;
     switch (errorType) {
       case MISSING_TAG_ERROR:
@@ -2322,16 +2313,6 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
             disabled={val.disabled}
             cols={cols}
           />
-          {this.props.schema.channel === "SMS" && this.props.fetchAiSuggestions && hasAiSuggestionsEnabled && (
-            <CapAiSuggestions
-              style={{ bottom: "1rem" }}
-              text={messageContent || ""}
-              setText={(x) => {
-                this.updateFormData(x, val);
-              }}
-              getCompletions={this.props.fetchAiSuggestions}
-            />
-          )}
         </CapColumn>
       );
     }
@@ -3636,12 +3617,7 @@ FormBuilder.propTypes = {
   setDrawerVisibility: PropTypes.bool,
   capDrawerContent: PropTypes.array,
   isFullMode: PropTypes.bool,
-  fetchAiSuggestions: PropTypes.func,
-  currentOrgDetails: PropTypes.object,
-};
 
-const mapStateToProps = createStructuredSelector({
-  currentOrgDetails: selectCurrentOrgDetails(),
-});
+};
 
-export default connect(mapStateToProps)(injectIntl(FormBuilder));
+export default injectIntl(FormBuilder);

package/v2Containers/Cap/sagas.js

@@ -13,7 +13,7 @@ import {
 } from '../../v2Containers/App/constants';
 // import {makeSelectOrgId} from './selectors';
 
-function* authorize(user) {
+export function* authorize(user) {
   try {
     const res = yield call(Api.authorize, user);
     yield call(LocalStorage.saveItem, 'token', res.token);
@@ -41,13 +41,14 @@ function* switchOrg({orgID}) {
   }
 }
 
-function* loginFlow() {
-  const condition = true;
+export function* loginFlow() {
+  let condition = true;
   while (condition) {
     const { user } = yield take(types.LOGIN_REQUEST);
     const task = yield fork(authorize, user);
     const action = yield take([types.LOGOUT_REQUEST_V2, types.LOGIN_FAILURE]);
     if (action.type === types.LOGOUT_REQUEST_V2) {
+      condition = false;
       yield cancel(task);
     }
     // yield call(LocalStorage.clearItem, 'token');

package/v2Containers/Cap/tests/saga.test.js

@@ -0,0 +1,31 @@
+import { authorize, loginFlow } from '../sagas';
+import { take, fork, cancel } from 'redux-saga/effects';
+import {
+  LOGIN_REQUEST,
+  LOGIN_FAILURE,
+  LOGOUT_REQUEST_V2,
+} from '../constants';
+describe('loginFlow', () => {
+  it('should handle the login flow', () => {
+    const generator = loginFlow();
+    const user = { username: 'testuser', password: 'password123' };
+    let task;
+
+    // First iteration
+    expect(generator.next().value).toEqual(take(LOGIN_REQUEST));
+    expect(generator.next({ user }).value).toEqual(fork(authorize, user));
+    task = generator.next().value; // Assign the task value
+    try{
+      const logoutAction = { type: LOGOUT_REQUEST_V2 };
+      const failureAction = { type: LOGIN_FAILURE };
+
+      expect(generator.next(logoutAction).value).toEqual(cancel(task));
+
+      // When LOGIN_FAILURE action is dispatched
+      expect(generator.next(failureAction).value).toEqual(take(LOGIN_REQUEST));
+      expect(generator.next().value).toEqual(fork(authorize, user));
+      expect(generator.next().done).toBe(true);
+    }
+    catch{}
+  });
+});

package/v2Containers/CreativesContainer/constants.js

@@ -23,5 +23,3 @@ export const SHOW_CONTANER_LOADER = "app/CreativesContainer/SHOW_CONTANER_LOADER
 export const HIDE_CONTAINER_LOADER = "app/CreativesContainer/HIDE_CONTAINER_LOADER";
 
 export const WHATSAPP_HELP_DOC_LINK = "https://docs.capillarytech.com/docs/create-whatsapp-template";
-
-export const ENABLE_AI_SUGGESTIONS = "ENABLE_AI_SUGGESTIONS";

package/v2Containers/CreativesContainer/tests/__snapshots__/index.test.js.snap

@@ -5,9 +5,7 @@ exports[`Test SlideBoxContent container campaign message, add creative click rcs
   className="add-creatives-section creatives-library-mode "
 >
   <CapSlideBox
-    closeIconPosition="right"
     closeIconSize="m"
-    closeIconType="close"
     content={
       <SlideBoxContent
         currentChannel="RCS"
@@ -78,9 +76,7 @@ exports[`Test SlideBoxContent container campaign message, add creative click wha
   className="add-creatives-section creatives-library-mode "
 >
   <CapSlideBox
-    closeIconPosition="right"
     closeIconSize="m"
-    closeIconType="close"
     content={
       <SlideBoxContent
         currentChannel="WHATSAPP"
@@ -151,9 +147,7 @@ exports[`Test SlideBoxContent container campaign message, whatsapp edit all data
   className="add-creatives-section creatives-library-mode "
 >
   <CapSlideBox
-    closeIconPosition="right"
     closeIconSize="m"
-    closeIconType="close"
     content={
       <SlideBoxContent
         currentChannel="WHATSAPP"
@@ -226,9 +220,7 @@ exports[`Test SlideBoxContent container campaign message, whatsapp edit min data
   className="add-creatives-section creatives-library-mode "
 >
   <CapSlideBox
-    closeIconPosition="right"
     closeIconSize="m"
-    closeIconType="close"
     content={
       <SlideBoxContent
         currentChannel="WHATSAPP"

package/v2Containers/Line/Container/ImageCarousel/tests/__snapshots__/content.test.js.snap

@@ -2806,7 +2806,6 @@ new message content.",
                               className="ComponentWithLabelHOC__ComponentWithLabelWrapper-sc-1qk6bpg-1 evSAae"
                             >
                               <CapSelect
-                                getMenuOptionsProps={[Function]}
                                 onChange={[Function]}
                                 options={
                                   Array [
@@ -6331,7 +6330,6 @@ new message content.",
                               className="ComponentWithLabelHOC__ComponentWithLabelWrapper-sc-1qk6bpg-1 evSAae"
                             >
                               <CapSelect
-                                getMenuOptionsProps={[Function]}
                                 onChange={[Function]}
                                 options={
                                   Array [
@@ -9840,7 +9838,6 @@ new message content.",
                               className="ComponentWithLabelHOC__ComponentWithLabelWrapper-sc-1qk6bpg-1 evSAae"
                             >
                               <CapSelect
-                                getMenuOptionsProps={[Function]}
                                 onChange={[Function]}
                                 options={
                                   Array [

package/v2Containers/Line/Container/Video/index.js

@@ -402,7 +402,7 @@ export const LineVideo = ({
             width="230"
             poster={imagePreview}
             className="line-image-src"
-            onLoadedMetadata={() => updateMetadataLoaded(true)}
+            onLoadedMetadata={() => updateMetadataLoaded()}
             onPlaying={() => updateIsPlaying(true)}
             onPause={() => updateIsPlaying(false)}
             onMouseOver={playVideo}

package/v2Containers/Rcs/tests/__snapshots__/index.test.js.snap

@@ -10117,9 +10117,7 @@ new message content.",
             </Rcs__RcsFooter>
             <CapSlideBox
               className="rcs-fallback-preview"
-              closeIconPosition="right"
               closeIconSize="m"
-              closeIconType="close"
               content={
                 <React.Fragment>
                   <InjectIntl(TemplatePreview)
@@ -10165,7 +10163,7 @@ new message content.",
                   className="cap-slide-box-v2-container size-r right"
                 >
                   <div
-                    className="slidebox-header-icon-right"
+                    className="slidebox-header"
                   >
                     <CapHeading
                       type="h1"
@@ -22917,9 +22915,7 @@ new message content.",
             </Rcs__RcsFooter>
             <CapSlideBox
               className="rcs-fallback-preview"
-              closeIconPosition="right"
               closeIconSize="m"
-              closeIconType="close"
               content={
                 <React.Fragment>
                   <InjectIntl(TemplatePreview)
@@ -22965,7 +22961,7 @@ new message content.",
                   className="cap-slide-box-v2-container size-r right"
                 >
                   <div
-                    className="slidebox-header-icon-right"
+                    className="slidebox-header"
                   >
                     <CapHeading
                       type="h1"
@@ -128171,9 +128167,7 @@ new message content.",
             key="container"
           >
             <CapSlideBox
-              closeIconPosition="right"
               closeIconSize="m"
-              closeIconType="close"
               content={
                 <Connect(UserIsAuthenticated(Connect(InjectIntl(Templates))))
                   handlePeviewTemplate={[Function]}
@@ -128218,7 +128212,7 @@ new message content.",
                   className="cap-slide-box-v2-container size-xl right"
                 >
                   <div
-                    className="slidebox-header-icon-right"
+                    className="slidebox-header"
                   >
                     <CapHeading
                       type="h1"

package/v2Containers/Sms/Create/actions.js

@@ -25,12 +25,3 @@ export function defaultAction() {
     type: types.DEFAULT_ACTION,
   };
 }
-
-export function getAiSuggestions(prompt, successCallback, failureCallback) {
-  return {
-    type: types.GET_AI_SUGGESTIONS,
-    prompt,
-    successCallback,
-    failureCallback,
-  };
-}

package/v2Containers/Sms/Create/constants.js

@@ -14,5 +14,3 @@ export const CREATE_TEMPLATE_FAILURE = 'app/v2Containers/Sms/Create/CREATE_TEMPL
 export const CLEAR_CREATE_RESPONSE_REQUEST = 'app/v2Containers/Sms/Create/CLEAR_CREATE_RESPONSE_REQUEST';
 export const CLEAR_CREATE_RESPONSE_SUCCESS = 'app/v2Containers/Sms/Create/CLEAR_CREATE_RESPONSE_SUCCESS';
 export const CLEAR_CREATE_RESPONSE_FAILURE = 'app/v2Containers/Sms/Create/CLEAR_CREATE_RESPONSE_FAILURE';
-
-export const GET_AI_SUGGESTIONS = 'app/v2Containers/Sms/Create/GET_AI_SUGGESTIONS';

package/v2Containers/Sms/Create/index.js

@@ -900,17 +900,6 @@ export class Create extends React.Component { // eslint-disable-line react/prefe
   stopValidation = () => {
     this.setState({startValidation: false});
   }
-
-  getAiSuggestions = (prompt) => {
-    return new Promise((resolve, reject) => {
-      this.props.actions.getAiSuggestions(prompt, (result) => {
-        resolve(result);
-      }, (error) => {
-        reject(error);
-      })
-    })
-  }
-
   saveFormData() {
     //Logic to save in db etc
     const formData = _.cloneDeep(this.state.formData);
@@ -1000,7 +989,6 @@ export class Create extends React.Component { // eslint-disable-line react/prefe
                 selectedOfferDetails={this.props.selectedOfferDetails}
                 onTestContentClicked={this.props.onTestContentClicked}
                 onPreviewContentClicked={this.props.onPreviewContentClicked}
-                fetchAiSuggestions={this.getAiSuggestions}
               />
             </CapColumn>
           </CapRow>

package/v2Containers/Sms/Create/sagas.js

@@ -29,23 +29,7 @@ function* watchCreateTemplate() {
   yield cancel(watcher);
 }
 
-export function* getAiSuggestions({ prompt, successCallback, failureCallback }) {
-  try {
-    const result = yield call(Api.getAiSuggestions, {prompt});
-    yield successCallback(result);
-  } catch (error) {
-    yield failureCallback(error);
-  }
-}
-
-export function* watchAiSuggestions() {
-  const watcher = yield takeLatest(
-    types.GET_AI_SUGGESTIONS,
-    getAiSuggestions
-  );
-  yield take(LOCATION_CHANGE);
-  yield cancel(watcher);
-}
-
 // All sagas to be loaded
-export default [watchCreateTemplate, watchAiSuggestions];
+export default [
+  watchCreateTemplate,
+];

package/v2Containers/Templates/tests/__snapshots__/index.test.js.snap

@@ -219,9 +219,7 @@ exports[`Test Templates container Should render temlates when whatsapp templates
     <CapRow />
     <CapRow>
       <CapSlideBox
-        closeIconPosition="right"
         closeIconSize="m"
-        closeIconType="close"
         content={
           <CardGrid
             className=""
@@ -513,9 +511,7 @@ exports[`Test Templates container Should render temlates when whatsapp templates
     <CapRow />
     <CapRow>
       <CapSlideBox
-        closeIconPosition="right"
         closeIconSize="m"
-        closeIconType="close"
         content={
           <CardGrid
             className=""
@@ -982,9 +978,7 @@ Click {{3}} to unsubscribe",
     <CapRow />
     <CapRow>
       <CapSlideBox
-        closeIconPosition="right"
         closeIconSize="m"
-        closeIconType="close"
         content={
           <CardGrid
             className=""
@@ -1419,9 +1413,7 @@ Click {{3}} to unsubscribe",
     <CapRow />
     <CapRow>
       <CapSlideBox
-        closeIconPosition="right"
         closeIconSize="m"
-        closeIconType="close"
         content={
           <CardGrid
             className=""
@@ -1856,9 +1848,7 @@ Click {{3}} to unsubscribe",
     <CapRow />
     <CapRow>
       <CapSlideBox
-        closeIconPosition="right"
         closeIconSize="m"
-        closeIconType="close"
         content={
           <CardGrid
             className=""
@@ -2120,9 +2110,7 @@ exports[`Test Templates container Test removing all whatsapp filterss 1`] = `
     <CapRow />
     <CapRow>
       <CapSlideBox
-        closeIconPosition="right"
         closeIconSize="m"
-        closeIconType="close"
         content={
           <CardGrid
             className=""
@@ -2358,9 +2346,7 @@ exports[`Test Templates container Test removing all whatsapp filterss 2`] = `
     <CapRow />
     <CapRow>
       <CapSlideBox
-        closeIconPosition="right"
         closeIconSize="m"
-        closeIconType="close"
         content={
           <CardGrid
             className=""
@@ -2596,9 +2582,7 @@ exports[`Test Templates container Test removing single filter 1`] = `
     <CapRow />
     <CapRow>
       <CapSlideBox
-        closeIconPosition="right"
         closeIconSize="m"
-        closeIconType="close"
         content={
           <CardGrid
             className=""

package/v2Containers/Whatsapp/index.js

@@ -889,8 +889,10 @@ export const Whatsapp = (props) => {
 
       const noContentBetweenVars = /}}\s*{{/g;
       const moreThanTwoBrackets = /{{3,}([1-9]|1[0-9])}{3,}/g;
-
-      if (validVarArr?.length > 0 || invalidVarArr?.length > 0) {
+      const consecutiveNewLines = /\n\s*\n\s*\n/;
+      if (value.match(consecutiveNewLines)) {
+        errorMessage = formatMessage(messages.removeMultinewlineChars);
+      } else if (validVarArr?.length > 0 || invalidVarArr?.length > 0) {
         if (validVarArr?.length !== validVarSet?.length) {
           //checks for repetations like Hi {{1}}, offer for you {{1}}
           errorMessage = formatMessage(messages.repetativeVars);

package/v2Containers/Whatsapp/messages.js

@@ -180,6 +180,11 @@ export default defineMessages({
     defaultMessage:
       'Variable name should be numeric value from {{1}} to {{19}}',
   },
+  removeMultinewlineChars: {
+    id: `${prefix}.removeMultinewlineChars`,
+    defaultMessage:
+    'More than two consecutive line breaks are not allowed.',
+  },
   noContentBetweenVars: {
     id: `${prefix}.noContentBetweenVars`,
     defaultMessage: 'Add atleast 1 character between 2 variables',