@capillarytech/creatives-library 7.10.50 → 7.10.52

package/v2Containers/Templates/index.js

@@ -22,7 +22,31 @@ import find from 'lodash/find';
 import map from 'lodash/map';
 import { bindActionCreators } from 'redux';
 import { Modal, Form} from 'antd';
-import {CapMenu, CapDropdown, CapButton, CapInput, CapIcon, CapRadioCard, CapPopover, CapSpin, CapCustomCard, CapRow, CapSlideBox, CapLink, CapHeading, CapNotification, CapIllustration, CapHeader, CapLabel, CapRadio, CapSelectFilter, CapTag, CapTooltip, CapAlert, CapModal } from '@capillarytech/cap-ui-library';
+import {
+  CapMenu,
+  CapDropdown,
+  CapButton,
+  CapInput,
+  CapIcon,
+  CapRadioCard,
+  CapPopover,
+  CapSpin,
+  CapCustomCard,
+  CapRow,
+  CapSlideBox,
+  CapLink,
+  CapHeading,
+  CapNotification,
+  CapIllustration,
+  CapHeader,
+  CapLabel,
+  CapRadio,
+  CapSelectFilter,
+  CapTag,
+  CapTooltip,
+  CapAlert,
+  CapModal,
+} from '@capillarytech/cap-ui-library';
 import { makeSelectTemplates, makeSelectTemplatesResponse } from './selectors';
 import { makeSelectCreate as makeSelectCreateSms} from '../Sms/Create/selectors';
 import { makeSelectCreate as makeSelectCreateMobilePush } from '../MobilePush/Create/selectors';
@@ -32,7 +56,6 @@ import { makeSelectEdit } from '../Sms/Edit/selectors';
 import { makeSelectLine } from '../Line/Container/selectors';
 import { makeSelectViber } from '../Viber/selectors';
 import { UserIsAuthenticated } from '../../utils/authWrapper';
-import { getObjFromQueryParams } from '../../utils/v2common';
 import messages from './messages';
 import {checkUnicode} from '../../utils/smsCharCountV2';
 import * as actions from './actions';
@@ -54,6 +77,7 @@ import * as commonUtil from '../../utils/common';
 import Pagination from '../../v2Components/Pagination';
 import EmailPreview from '../../v2Components/EmailPreview';
 import CreativesContainer from '../CreativesContainer';
+import WhatsappStatusContainer from '../../v2Components/WhatsappStatusContainer';
 import WechatRichmediaTemplatePreview from '../../v2Components/TemplatePreview/WechatRichmediaTemplatePreview';
 import {
   CHANNEL_CREATE_TRACK_MAPPING,
@@ -69,7 +93,7 @@ import {
   STATUS as WHATSAPP_STATUS,
   WHATSAPP_STATUSES,
 } from '../Whatsapp/constants';
-import { getWhatsappContent, getWhatsappStatusContainer, getWhatsappStatus, getWhatsappCategory } from '../Whatsapp/utils';
+import { getWhatsappContent, getWhatsappStatus, getWhatsappCategory } from '../Whatsapp/utils';
 import { MOBILE_PUSH, WECHAT, SMS, EMAIL, EBILL, LINE, VIBER, FACEBOOK, WHATSAPP } from '../CreativesContainer/constants';
 
 import {CREATIVE} from '../Facebook/constants';
@@ -78,7 +102,7 @@ import emailIllustration from '../Assets/images/emailIllustration.svg';
 import smsIllustration from '../Assets/images/smsIllustration.svg';
 import pushIllustration from '../Assets/images/pushIllustration.svg';
 import whatsappIllustration from '../Assets/images/whatsappIllustration.png';
-import { CAP_SPACE_16 } from '@capillarytech/cap-ui-library/styled/variables';
+import { CAP_SPACE_16, CAP_SPACE_44 } from '@capillarytech/cap-ui-library/styled/variables';
 import { GA } from '@capillarytech/cap-ui-utils';
 const { timeTracker } = GA;
 const {CapCustomCardList} = CapCustomCard;
@@ -241,13 +265,6 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
     if (this.props.location.query.type === 'embedded' && this.isEnabledInLibraryModule("setLocale")) {
       this.setLocale();
     }
-
-    const queryItems = getObjFromQueryParams(location.search);
-
-    if(queryItems.channel === WHATSAPP_LOWERCASE && queryItems.mode === 'create') {
-      this.createTemplate();
-    }
-
     if (this.props.location.query.type === 'embedded') {
       this.props.actions.resetAccount();
     }
@@ -576,9 +593,8 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
     this.getAllTemplates({getNextPage: true});
   }
   onCreateComplete = (isReloadTemplates) => {
-    const isWhatsappEdit = this.state.routeParams?.pathname?.includes(`${WHATSAPP_LOWERCASE}/edit`);
     this.setState({routeParams: null, previewOpen: false}, () => {
-      if (this.isFullMode() && (isReloadTemplates || isWhatsappEdit)) {
+      if (this.isFullMode() && isReloadTemplates) {
         this.getAllTemplates({params: {}}, true);
       }
     });
@@ -714,16 +730,10 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
   }
 
   isStatusMatching = (status, selectedWhatsappStatus) => {
-    if(this.props.isFullMode && selectedWhatsappStatus) {
-      if ( [WHATSAPP_STATUSES.unsubmitted, WHATSAPP_STATUSES.pending].includes(status) ) {
-        return selectedWhatsappStatus === WHATSAPP_STATUSES.awaitingApproval;
-      }
-        return selectedWhatsappStatus === status;
-    }
-    else if (!this.props.isFullMode){
-      return status === WHATSAPP_STATUSES.approved;
+    if ( [WHATSAPP_STATUSES.unsubmitted, WHATSAPP_STATUSES.pending].includes(status) ) {
+      return selectedWhatsappStatus === WHATSAPP_STATUSES.awaitingApproval;
     }
-    return true;
+      return selectedWhatsappStatus === status;
   }
 
   filterWhatsappTemplates = (templates) => {
@@ -733,7 +743,9 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
 
       // if status or category filter is applied, filter templates which match these filters
       return (
-        this.isStatusMatching(status, selectedWhatsappStatus)
+        selectedWhatsappStatus
+        ? this.isStatusMatching(status, selectedWhatsappStatus)
+        : true
       ) && (
         selectedWhatsappCategory
         ? category === selectedWhatsappCategory
@@ -763,7 +775,6 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
     const channelLowerCase = stateChannel.toLowerCase();
     let filteredTemplates = templates;
     let isTraiDltFeature = false;
-    console.log("getTemplateDataForGrid", currentChannel);
     switch (currentChannel) {
       case WECHAT:
         filteredTemplates = this.filterWechatTemplates(templates);
@@ -947,10 +958,10 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
         }
         case WHATSAPP:
           templateData.title = (
-            <div className="whatsapp-card-title">
-              <span title={template.name} >{template.name}</span>
-              {getWhatsappStatusContainer(template)}
-            </div>
+            <CapRow className="whatsapp-card-title">
+              <CapLabel>{template.name}</CapLabel>
+              <WhatsappStatusContainer template={template} />
+            </CapRow>
           );
 
           templateData.content = getWhatsappContent(template);
@@ -1014,11 +1025,22 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
               </CapHeading>
             </div> : (
               [WHATSAPP_LOWERCASE].includes(this.state.channel.toLowerCase()) &&
-              isEmpty(filteredTemplates) &&
               isEmpty(this.state.searchText) &&
               !isLoading &&
-              <div style={this.isFullMode() ? { height: "calc(100vh - 325px)", overflow: 'auto'} : {}}>
-                <CapIllustration buttonClassName={`create-new-${channelLowerCase}`} {...this.getChannelTypeIllustrationInfo(currentChannel)} />
+              <div style={this.isFullMode() ? { height: "calc(100vh - 325px)", overflow: 'auto' } : {}}>
+                {isEmpty(templates) && <CapIllustration buttonClassName={`create-new-${channelLowerCase}`} {...this.getChannelTypeIllustrationInfo(currentChannel)} />}
+                {!isEmpty(templates) && isEmpty(filteredTemplates) && <CapHeader
+                  title={
+                    <CapHeading type="h3" style={{ textAlign: "center", marginTop: CAP_SPACE_44 }}>
+                      {this.props.intl.formatMessage(messages.noFilteredWhatsappTemplatesTitle)}
+                    </CapHeading>
+                  }
+                  description={
+                    <CapLabel style={{ textAlign: "center" }}>
+                      {this.props.intl.formatMessage(messages.noFilteredWhatsappTemplatesDesc)}
+                    </CapLabel>
+                  }
+                />}
               </div>
             )
           }
@@ -1328,7 +1350,7 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
       } else {
         this.props.createNew();
       }
-    } else if (ev?.key && (ev.key.toLowerCase() === "text" || ev.key.toLowerCase() === "image")) {
+    } else if (ev.key && (ev.key.toLowerCase() === "text" || ev.key.toLowerCase() === "image")) {
       routeParams = {
         pathname: `/${channel === 'line' ? 'line' : 'mobilepush'}/create/${ev.key.toLowerCase()}`,
         query: type === 'embedded' ? {type: 'embedded', module} : {module},
@@ -2149,16 +2171,13 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
         formatMessage,
       },
     } = this.props;
-    switch (channel?.toUpperCase()) {
-      case MOBILE_PUSH:
-        return formatMessage(messages.mobilepushAccount);
-      case WECHAT:
-        return formatMessage(messages.wechatAccount);
-      case WHATSAPP:
-        return formatMessage(messages.whatsappAccount);
-      default:
-        return '';
+
+    const channelObj = {
+      [MOBILE_PUSH]: 'mobilepushAccount',
+      [WECHAT]: 'wechatAccount',
+      [WHATSAPP]: 'whatsappAccount',
     }
+    return formatMessage(messages[channelObj[channel?.toUpperCase()]]);
   }
 
   showAccountName = () => {
@@ -2230,9 +2249,6 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
   setLineFilter = (e) => this.setState({lineFilter: e.target.value});
   setSMSFilter = (e) => this.setState({smsFilter: e.target.value});
 
-  openCreativesFullMode = () => {
-    window.open("/creatives/ui/v2?channel=WHATSAPP&&mode=create", "_blank");
-  }
 
   render() {
     const isFullMode = this.isFullMode();
@@ -2306,27 +2322,14 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
     const channelLowerCase = (channel || '').toLowerCase();
     const isTraiDltFeature = this.checkDLTfeatureEnable();
 
-    const createButton = 
-      ( channelLowerCase === WHATSAPP_LOWERCASE && !this.props.isFullMode )
-      ? (
-        <CapLink 
-          onClick={this.openCreativesFullMode} 
-          title={formatMessage(messages.createNewTemplateLink)} 
-          suffix={<CapIcon type="open-in-new" size="s" />}
-          className="create-new-link"
-        />
-      )
-      : (
-        <CapButton
-          className={`create-new-${channelLowerCase}`}
-          type={"primary"}
-          disabled={this.isCreateDisabled()}
-          style={{marginLeft: '8px', marginBottom: '12px'}}
-          onClick={this.createTemplate}
-        >
-          { this.props.intl.formatMessage((isTraiDltFeature && channel.toUpperCase() === SMS ) ? messages.uploadTemplate : messages.createNewActionButton) }
-        </CapButton>
-      );
+    const createButton = (<CapButton
+      className={`create-new-${channelLowerCase}`}
+      type={"primary"}
+      disabled={this.isCreateDisabled()}
+      style={{marginLeft: '8px', marginBottom: '12px'}}
+      onClick={this.createTemplate} >
+      { this.props.intl.formatMessage((isTraiDltFeature && channel.toUpperCase() === SMS ) ? messages.uploadTemplate : messages.createNewActionButton) }
+    </CapButton>);
 
     const isWhatsappCountExeeded = templatesCount >= MAX_WHATSAPP_TEMPLATES;
     const whatsappCountExceedText = <FormattedMessage {...messages.whatsappMaxTemplates} values={{ maxCount: MAX_WHATSAPP_TEMPLATES }}/>;
@@ -2358,19 +2361,16 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
       {
         channel.toUpperCase() === WHATSAPP && (
           <div className="whatsapp-filters">
-            {
-              this.props.isFullMode ? (
-                <CapSelectFilter
-                  placement="bottomLeft"
-                  data={STATUS_OPTIONS}
-                  onSelect={this.setWhatsappStatus}
-                  selectedValue={this.state.selectedWhatsappStatus}
-                  placeholder="Status"
-                  showBadge={true}
-                  width="90px"
-                />
-              ) : null
-            }
+            <CapSelectFilter
+              placement="bottomLeft"
+              data={STATUS_OPTIONS}
+              onSelect={this.setWhatsappStatus}
+              selectedValue={this.state.selectedWhatsappStatus}
+              placeholder="Status"
+              showBadge={true}
+              width="90px"
+              overlayStyle={{ overflowY: "hidden" }}
+            />
             <CapSelectFilter
               placement="bottomLeft"
               data={CATEGORY_OPTIONS}
@@ -2379,6 +2379,7 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
               placeholder="Category"
               showBadge={true}
               width="105px"
+              overlayStyle={{ overflowY: "hidden" }}
             />
           </div>
           
@@ -2502,21 +2503,10 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
 
           <CapRow>
             <Pagination onPageChange={templates.length ? this.onPaginationChange : () => {}} paginationSelector="pagination-container">
-
-          {
-            channel.toLowerCase() === WHATSAPP_LOWERCASE ? (
-              <CapAlert message={whatsappCountExceedText} type="info" />
-            ) : null
-          }
               {this.getTemplateDataForGrid({isLoading, loadingTip, channel: this.state.channel, templates: this.props.TemplatesList, filterContent, handlers: {handlePreviewClick: this.handlePreviewClick, handleEditClick: this.handleEditClick}})}
             </Pagination>
             {(((this.state.selectedAccount !== '' && !isEmpty(this.props.Templates.selectedWeChatAccount) && this.state.channel.toLowerCase() === 'wechat') || this.state.channel.toLowerCase() !== 'wechat') && isEmpty(this.props.TemplatesList)) && !this.props.Templates.getAllTemplatesInProgress && !isEmpty(this.state.searchText) &&
             <div style={{ height: '65vh', textAlign: 'center', lineHeight: '65vh'}}>
-                        {
-            channel.toLowerCase() === WHATSAPP_LOWERCASE ? (
-              <CapAlert message={whatsappCountExceedText} type="info" />
-            ) : null
-          }
               <CapHeading type="h6">{this.props.intl.formatMessage(messages.noTemplatesFound)}</CapHeading>
             </div>}
           </CapRow>

package/v2Containers/Templates/messages.js

@@ -274,10 +274,6 @@ export default defineMessages({
     id: `${scope}.createNewActionButton`,
     defaultMessage: `Create new`,
   },
-  "createNewTemplateLink": {
-    id: `${scope}.createNewTemplateLink`,
-    defaultMessage: `Create new template`,
-  },
   "creativeTemplates": {
     id: `${scope}.creativeTemplates`,
     defaultMessage: `Creative templates`,
@@ -346,6 +342,14 @@ export default defineMessages({
     id: `${scope}.whatsappDescIllustration`,
     defaultMessage: 'These templates can be reused when creating a\nnew message content.',
   },
+  "noFilteredWhatsappTemplatesTitle": {
+    id: `${scope}.noFilteredWhatsappTemplatesTitle`,
+    defaultMessage: 'Sorry, we couldn’t find any matches',
+  },
+  "noFilteredWhatsappTemplatesDesc": {
+    id: `${scope}.noFilteredWhatsappTemplatesDesc`,
+    defaultMessage: 'Please try searching with another term or apply different filter',
+  },
   "smsTitleIllustartion": {
     id: `${scope}.smsTitleIllustartion`,
     defaultMessage: 'Create an SMS {template}',

package/v2Containers/TemplatesV2/index.js

@@ -31,7 +31,6 @@ import withStyles from '../../hoc/withStyles';
 import styles, { CapTabStyle } from './TemplatesV2.style';
 import { CREATIVES_UI_VIEW, LOYALTY} from '../App/constants';
 import AccessForbidden from '../../v2Components/AccessForbidden';
-import { getObjFromQueryParams } from '../../utils/v2common';
 
 const {CapCustomCardList} = CapCustomCard;
 
@@ -51,6 +50,7 @@ export class TemplatesV2 extends React.Component { // eslint-disable-line react/
       isFullMode,
       onChannelChange,
       showDisabledFBInfo,
+      enableNewChannels,
     } = props;
 
     const defaultPanes = {
@@ -80,6 +80,9 @@ export class TemplatesV2 extends React.Component { // eslint-disable-line react/
         filteredPanes.push({content: <></>, tab: intl.formatMessage(messages.FTP), key: 'ftp'});
         defaultChannel = 'FTP';
       }
+      if (!enableNewChannels.includes('WHATSAPP')) {
+        filteredPanes.splice(7, 1);
+      }
     }
 
 
@@ -121,16 +124,6 @@ export class TemplatesV2 extends React.Component { // eslint-disable-line react/
       onChannelChange(defaultChannel);
     }
   }
-
-  componentDidMount() {
-    const queryItems = getObjFromQueryParams(location.search);
-
-    if(queryItems.channel === 'whatsapp') {
-      console.log("reached whatsapp content");
-      this.channelChange('whatsapp');
-    }
-  }
-
   componentWillReceiveProps(nextProps) {
     if (this.props.channel !== nextProps.channel) {
       const panes = this.setChannelContent(nextProps.channel, this.state.panes);

package/v2Containers/Whatsapp/index.js

@@ -47,15 +47,14 @@ import {
 } from './constants';
 import { DATE_DISPLAY_FORMAT, TIME_DISPLAY_FORMAT } from '../App/constants';
 import messages from './messages';
+import globalMessages from '../Cap/messages'
 import withCreatives from '../../hoc/withCreatives';
 import TemplatePreview from '../../v2Components/TemplatePreview';
 import TagList from '../TagList';
 import { makeSelectMetaEntities, setInjectedTags } from '../Cap/selectors';
-import { validateTags } from '../../utils/tagValidations';
 
 let varMap = {};
 let editContent = {};
-let tagValidationResponse = {};
 
 export const Whatsapp = (props) => {
   const {
@@ -75,7 +74,6 @@ export const Whatsapp = (props) => {
     metaEntities,
     injectedTags,
     loadingTags,
-    getFormData
   } = props || {};
   const { formatMessage } = intl;
   const { TextArea } = CapInput;
@@ -94,16 +92,13 @@ export const Whatsapp = (props) => {
   //for edit only
   const [isEditFlow, setEditFlow] = useState(false);
   const [templateDate, setTemplateDate] = useState('');
-  const [templateStatus, setTemplateStatus] = useState(
-    WHATSAPP_STATUSES.unsubmitted,
-  );
+  const [templateStatus, setTemplateStatus] = useState();
   const [templateRejectionReason, setTemplateRejectionReason] = useState(null);
   const [tempMsgArray, updateTempMsgArray] = useState([]);
   const [updatedSmsEditor, setUpdatedSmsEditor] = useState([]);
   //for tag only
   const [tags, updateTags] = useState([]);
   const [textAreaId, updateTextAreaId] = useState();
-  const [isTagValidationError, updateIsTagValidationError] = useState(false);
 
   const validVarRegex = /{{([1-9]|1[0-9])}}/g;
 
@@ -114,8 +109,7 @@ export const Whatsapp = (props) => {
     width: 100%;
     margin-left: -32px;
     padding: ${CAP_SPACE_32} ${CAP_SPACE_24};
-    z-index: 1;
-    
+
     .ant-btn {
       margin-right: ${CAP_SPACE_16};
     }
@@ -147,6 +141,7 @@ export const Whatsapp = (props) => {
         setSpin(true);
         actions.getTemplateDetails(id);
       }
+      setEditFlow(true);
     }
     //cleanup code
     return () => {
@@ -160,10 +155,9 @@ export const Whatsapp = (props) => {
       name = '',
       versions = {},
       createdAt = '',
-    } = isFullMode ? editData.templateDetails || {} : templateData || {};
+    } = editData.templateDetails || templateData || {};
     editContent = get(versions, `base.content.whatsapp`, {});
     if (editContent && !isEmpty(editContent)) {
-      setEditFlow(true);
       setTemplateName(name);
       setTemplateDate(createdAt);
       const {
@@ -267,27 +261,6 @@ export const Whatsapp = (props) => {
     }
   }, [metaEntities, isEditFlow]);
 
-    //performs tag validation
-  useEffect(() => {
-    if (
-      !isFullMode &&
-      updatedSmsEditor?.length > 0 &&
-      !updatedSmsEditor.join('').match(validVarRegex)
-    ) {
-      tagValidationResponse =
-        validateTags({
-          content: updatedSmsEditor.join(''),
-          tagsParam: tags,
-          injectedTagsParams: injectedTags,
-          location,
-          tagModule: getDefaultTags,
-        }) || {};
-      updateIsTagValidationError(
-        tagValidationResponse.unsupportedTags.length > 0,
-      );
-    }
-  }, [updatedSmsEditor, tags]);
-
   const handleOnTagsContextChange = (data) => {
     const { type } = location.query || {};
     const isEmbedded = type === EMBEDDED;
@@ -495,16 +468,13 @@ export const Whatsapp = (props) => {
             languages: [
               {
                 language: 'en',
-                content: 
-                  isEditFlow 
-                  ? `${updatedSmsEditor.join('')} ${formatMessage(messages.templateMessageUnsubscribeText)}`
-                  : `$'${templateMessage}\nClick {{${
-                    addedVarCount + 1 }}} to unsubscribe'`,
+                content: `$'${templateMessage}\nClick {{${
+                  addedVarCount + 1
+                }}} to unsubscribe'`,
               },
             ],
-            mediaType: 'TEXT',
-            varMapped: varMap,
-            templateEditor: templateMessage,
+            mediaType: 'text',
+            varMapped: {},
             accountId,
             accessToken,
             accountName,
@@ -549,15 +519,6 @@ export const Whatsapp = (props) => {
     }
   };
 
-  const saveToMessage = () => {
-    getFormData({
-      value: createPayload(),
-      _id: params?.paramObj?.id,
-      validity: true,
-      type: 'WHATSAPP',
-    });
-  }
-
   const isDisableDone = () => {
     //if template name is not entered
     if (templateName.trim() === '' || templateNameError) {
@@ -580,7 +541,7 @@ export const Whatsapp = (props) => {
       <CapHeader
         title={
           <CapHeading type="h4">
-            {formatMessage(messages.templateNameLabel)}
+            {formatMessage(globalMessages.templateNameLabel)}
             <CapTooltipWithInfo
               infoIconProps={{
                 style: { marginLeft: CAP_SPACE_04 },
@@ -600,7 +561,7 @@ export const Whatsapp = (props) => {
         id={`whatsapp_template_name_input`}
         onChange={onTemplateNameChange}
         errorMessage={templateNameError}
-        placeholder={formatMessage(messages.templateNamePlaceholder)}
+        placeholder={formatMessage(globalMessages.templateNamePlaceholder)}
         defaultValue={templateName || ''}
         value={templateName || ''}
         size="default"
@@ -813,23 +774,14 @@ export const Whatsapp = (props) => {
     }
   };
 
-  const tagValidationErrorMessage = () => {
-    const { unsupportedTags = [] } = tagValidationResponse;
-    let tagError = '';
-    if (unsupportedTags.length > 0) {
-      tagError = formatMessage(messages.unsupportedTagsValidationError, {
-        unsupportedTags,
-      });
-    }
-    return <CapError>{tagError}</CapError>;
-  };
-
   const editModeContent = (
     <>
-      <CapAlert
-        message={getTemplateStatusMessage()}
-        type={getTemplateStatusType()}
-      />
+      {templateStatus && (
+        <CapAlert
+          message={getTemplateStatusMessage()}
+          type={getTemplateStatusType()}
+        />
+      )}
       <CapRow className="whatsapp-render-heading">
         <CapHeader
           title={
@@ -863,7 +815,6 @@ export const Whatsapp = (props) => {
       </CapTooltip>
 
       {renderMessageLength()}
-      {isTagValidationError && tagValidationErrorMessage()}
     </>
   );
   //edit methods end
@@ -884,22 +835,15 @@ export const Whatsapp = (props) => {
       <TemplatePreview
         channel={WHATSAPP}
         content={{ templateMsg }}
+        whatsappContentLen={isEditFlow ? updatedSmsEditor.join('').length : templateMessage.length}
         whatsappAccountName={accountName}
       />
     );
   };
 
-  const isEditDoneDisabled = () => {
-    return isTagValidationError || Object.values(varMap).some( (inputValue) => {
-      if (inputValue === '') {
-        return true;
-      }
-    });
-  }
-
   return (
     <CapSpin spinning={spin}>
-      <CapRow>
+      <CapRow className='cap-whatsapp-creatives'>
         <CapColumn span={14}>
           {isEditFlow ? editModeContent : createModeContent}
           <div className="whatsapp-scroll-div" />
@@ -931,17 +875,6 @@ export const Whatsapp = (props) => {
             </CapButton>
           </>
         )}
-        {!isFullMode && isEditFlow && (
-          <>
-            <CapButton
-              onClick={saveToMessage}
-              disabled={isEditDoneDisabled()}
-              className="whatsapp-create-btn"
-            >
-              <FormattedMessage {...messages.done} />
-            </CapButton>
-          </>
-        )}
       </WhatsappFooter>
     </CapSpin>
   );