@capillarytech/creatives-library 7.10.41 → 7.10.43

package/package.json

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

package/v2Containers/App/constants.js

@@ -47,6 +47,7 @@ export const PREVIEW = 'preview';
 
 export const VIBER = 'viber';
 export const FACEBOOK = 'facebook';
+export const WHATSAPP = 'whatsapp';
 
 export const TRACK_EDIT_SMS = 'editSms';
 export const TRACK_EDIT_EMAIL = 'editEmail';
@@ -107,4 +108,6 @@ export const FB_AD_CALL_TO_ACTION = {
 export const CREATIVES = 'creatives';
 export const LOYALTY = 'loyalty';
 
-export const FAILURE = 'FAILURE';
+export const FAILURE = 'FAILURE';
+export const DATE_DISPLAY_FORMAT = 'D MMM YYYY';
+export const TIME_DISPLAY_FORMAT = 'hh:mm A';

package/v2Containers/CreativesContainer/SlideBoxHeader.js

@@ -1,13 +1,14 @@
 import React from 'react';
 import styled from 'styled-components';
 import { FormattedMessage } from 'react-intl';
+import get from 'lodash/get';
 import { CapHeader, CapIcons, CapLabel, CapSteps } from '@capillarytech/cap-ui-library';
 import moment from 'moment';
 import PropTypes from 'prop-types';
 import messages from './messages';
 import whatsppMsg from '../Whatsapp/messages';
 import { MAP_TEMPLATE } from '../WeChat/Wrapper/constants';
-import { NO_COMMUNICATION, FTP } from '../App/constants';
+import { NO_COMMUNICATION, FTP, WHATSAPP } from '../App/constants';
 import { isTraiDLTEnable } from '../../utils/common';
 import { formatString } from '../../utils/Formatter';
 import {
@@ -43,8 +44,10 @@ function SlideBoxHeader(props) {
   const mapTemplateCreate = !showTemplateNameHeader && slidBoxContent === 'createTemplate' && weChatTemplateType === MAP_TEMPLATE && templateStep !== 'modeSelection';
   const isTraiDlt = isTraiDLTEnable(isFullMode, smsRegister);
   const showCreateTraiSMSHeader = isTraiDlt && channel.toLowerCase() === "sms";
-  const isWhatsappEdit = channel.toLowerCase() === 'whatsapp' && slidBoxContent === 'editTemplate';
+  const isWhatsappEdit = channel.toLowerCase() === WHATSAPP && slidBoxContent === 'editTemplate';
   const whatsappOverview = isWhatsappEdit && isFullMode;
+  const headerMessage = whatsappOverview ? messages.whatsappOverview : messages.editMessageContent;
+  const whatsappTemplateCategory = get(templateData, `versions.base.content.whatsapp.category`, '');
 
   return (
     <div key="creatives-container-slidebox-header-content">
@@ -72,15 +75,15 @@ function SlideBoxHeader(props) {
         )}
       {!showTemplateNameHeader && slidBoxContent === 'editTemplate' && (
       <CapHeader
-        title={<FormattedMessage {...(whatsappOverview ? messages.whatsappOverview : messages.editMessageContent)} values={{channel: getChannelLabel(channel)}}/>}
+        title={<FormattedMessage {...headerMessage} values={{channel: getChannelLabel(channel)}}/>}
           description={
             isWhatsappEdit && (
               <>
                 {renderWhatsappData("label1", <FormattedMessage {...whatsppMsg.templateNameLabel} />)}
-                {renderWhatsappData("label2", templateData?.whatsappTemplateName)}
+                {renderWhatsappData("label2", templateData?.name)}
                 {renderWhatsappData("label3", <FormattedMessage {...whatsppMsg.labelSeperator} />)}
                 {renderWhatsappData("label1", <FormattedMessage {...whatsppMsg.templateCategoryLabel} />)}
-                {renderWhatsappData("label2", formatString(templateData?.whatsappTemplateCategory))}
+                {renderWhatsappData("label2", formatString(whatsappTemplateCategory))}
                 {renderWhatsappData("label3", <FormattedMessage {...whatsppMsg.labelSeperator} />)}
                 {renderWhatsappData("label1", <FormattedMessage {...whatsppMsg.languageLabel} />)}
                 {renderWhatsappData("label2", <FormattedMessage {...whatsppMsg.templateLanguageEnglish} />)}

package/v2Containers/Templates/_templates.scss

@@ -542,3 +542,21 @@
   margin: 8px 0;
   white-space: pre-wrap;
 }
+
+.delete-template-confirm {
+  .ant-modal-footer {
+    padding: $CAP_SPACE_16 $CAP_SPACE_24 $CAP_SPACE_24 $CAP_SPACE_24;
+  }
+
+  .ant-modal-header {
+    padding: $CAP_SPACE_24 $CAP_SPACE_24 $CAP_SPACE_08 $CAP_SPACE_24;
+  }
+
+  .ant-modal-body {
+    padding: 0 $CAP_SPACE_24;
+  }
+
+  .ant-modal-close-x {
+    padding: $CAP_SPACE_12;
+  }
+}

package/v2Containers/Templates/index.js

@@ -22,7 +22,7 @@ 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 } 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';
@@ -116,6 +116,10 @@ const SMS_FILTERS = {
 };
 
 const WHATSAPP_LOWERCASE = WHATSAPP.toLowerCase();
+const SMS_LOWERCASE = SMS.toLowerCase();
+const MOBILE_PUSH_LOWERCASE = MOBILE_PUSH.toLowerCase();
+const EBILL_LOWERCASE = EBILL.toLowerCase();
+const LINE_LOWERCASE = LINE.toLowerCase();
 export class Templates extends React.Component { // eslint-disable-line react/prefer-stateless-function
   constructor(props) {
     super(props);
@@ -426,22 +430,31 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
       if ((this.state.channel || '').toLowerCase() !== "sms") {
         CapNotification.error({key: 'somethingWrong', message});
       }
-      if ( this.state.channel) {
-        if (this.state.channel.toLowerCase() === "sms") {
-          this.props.smsActions.clearCreateResponse();
-        } else if (this.state.channel.toLowerCase() === "mobilepush") {
-          this.props.mobilepushActions.clearCreateResponse();
-        } else if (this.state.channel.toLowerCase() === "ebill") {
-          this.props.ebillActions.clearCreateResponse();
-        } else if (this.state.channel.toLowerCase() === "line") {
-          this.props.lineActions.clearCreateResponse();
-        } else if (this.state.channel.toLowerCase() === VIBER_CHANNEL) {
-          this.props.viberActions.clearCreateResponse();
-        } else if (this.state.channel.toLowerCase() === FACEBOOK_CHANNEL) {
-          this.props.facebookActions.clearCreateResponse();
-        }else if (this.state.channel.toLowerCase() === WHATSAPP_LOWERCASE) {
-          this.props.whatsappActions.clearCreateResponse();
-        }
+      const { smsActions, mobilepushActions, ebillActions, lineActions, viberActions, facebookActions, whatsappActions } = this.props;
+      switch (selectedChannel) {
+        case SMS_LOWERCASE:
+          smsActions.clearCreateResponse();
+          break;
+        case MOBILE_PUSH_LOWERCASE:
+          mobilepushActions.clearCreateResponse();
+          break;
+        case EBILL_LOWERCASE:
+          ebillActions.clearCreateResponse();
+          break;
+        case LINE_LOWERCASE:
+          lineActions.clearCreateResponse();
+          break;
+        case VIBER_CHANNEL:
+          viberActions.clearCreateResponse();
+          break;
+        case FACEBOOK_CHANNEL:
+          facebookActions.clearCreateResponse();
+          break;
+        case WHATSAPP_LOWERCASE:
+          whatsappActions.clearCreateResponse();
+          break;
+        default:
+          break;
       }
     }
 
@@ -491,7 +504,7 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
         paramsDefault.wecrmId = nextProps.Templates.weCrmAccounts[0].configs.wecrm_app_id;
         paramsDefault.wecrmToken = nextProps.Templates.weCrmAccounts[0].configs.wecrm_token;
         paramsDefault.originalId = nextProps.Templates.weCrmAccounts[0].sourceAccountIdentifier;
-        if (WHATSAPP_LOWERCASE === this.state.channel.toLowerCase()) {
+        if (this.state.channel.toLowerCase() === WHATSAPP_LOWERCASE) {
           nextProps.actions.setChannelAccount(
             WHATSAPP,
             nextProps.Templates.weCrmAccounts[0],
@@ -588,10 +601,12 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
           creativesParams._id = pathname.split('/')[3];
           creativesParams.modeType = pathname.split('/')[4];
           creativesParams.account = pathname.split('/')[5];
-          if(this.state.channel.toLowerCase() === WHATSAPP_LOWERCASE){
+          if (this.state.channel.toLowerCase() === WHATSAPP_LOWERCASE){
             const whatsappSelectedTemplateData = this.selectTemplate(creativesParams._id) || {};
-            creativesParams.whatsappTemplateName = get(whatsappSelectedTemplateData, `name`, '');
-            creativesParams.whatsappTemplateCategory = get(whatsappSelectedTemplateData, `versions.base.content.whatsapp.category`, '');
+            creativesParams = {
+              ...creativesParams,
+              ...whatsappSelectedTemplateData,
+            };
           }
         }
         creativesParams.type = this.state.channel.toUpperCase();
@@ -786,7 +801,7 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
               </CapMenu.Item>}
               <CapMenu.Item
                 className={this.state.channel.toUpperCase() === WECHAT && !template.definition ? `unmap-${channelLowerCase}` : `delete-${channelLowerCase}`}
-                onClick={() => this.deleteTemplate(template)}
+                onClick={() => this.toggleDeleteTemplateModal(template)}
               >
                 {this.state.channel.toUpperCase() === WECHAT && !template.definition ? <FormattedMessage {...messages.unMapButton} /> : <FormattedMessage {...messages.deleteButton} />}
               </CapMenu.Item>
@@ -1956,21 +1971,25 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
     );
   }
   renderDeleteConfirmationModal = () => {
-    const modal =
-    (<Modal
+    const {
+      intl: {
+        formatMessage,
+      } = {},
+    } = this.props;
+
+    const modal = ( <CapModal
+      className="delete-template-confirm"
+      title={formatMessage(messages.areYouSureText)}
       visible={this.state.showModal}
-      title={"Alert"}
       onOk={this.handleOk}
       onCancel={this.handleCancel}
-      footer={[
-        <CapButton key="back" onClick={this.handleCancel}>{this.props.intl.formatMessage(messages.cancelText)}</CapButton>,
-        <CapButton key="submit" type="primary" id="delete-version" onClick={this.handleOk}>
-          {this.props.intl.formatMessage(messages.yesText)}
-        </CapButton>,
-      ]}
+      centered
+      okText={formatMessage(messages.yesText)}
+      closeText={formatMessage(messages.cancelText)}
     >
-      {this.props.intl.formatMessage(messages.templateDeleteConfirm)}
-    </Modal>);
+      {formatMessage(messages.templateDeleteConfirm)}
+    </CapModal>
+    );
     return modal;
   };
 

package/v2Containers/Templates/messages.js

@@ -220,7 +220,11 @@ export default defineMessages({
   },
   "templateDeleteConfirm": {
     id: `${scope}.templateDeleteConfirm`,
-    defaultMessage: `Are you sure you want to delete this template?`,
+    defaultMessage: `Are you sure you wish to delete this template?`,
+  },
+  "areYouSureText": {
+    id: `${scope}.areYouSureText`,
+    defaultMessage: `Confirm delete template`,
   },
   "cancelText": {
     id: `${scope}.cancelText`,
@@ -228,7 +232,7 @@ export default defineMessages({
   },
   "yesText": {
     id: `${scope}.yesText`,
-    defaultMessage: `Yes`,
+    defaultMessage: `Yes, delete`,
   },
   "templateSelection": {
     id: `${scope}.templateSelection`,

package/v2Containers/Whatsapp/index.js

@@ -44,6 +44,7 @@ import {
   ALL,
   LIBRARY,
 } from './constants';
+import { DATE_DISPLAY_FORMAT, TIME_DISPLAY_FORMAT } from '../App/constants';
 import messages from './messages';
 import withCreatives from '../../hoc/withCreatives';
 import TemplatePreview from '../../v2Components/TemplatePreview';
@@ -52,6 +53,7 @@ import { makeSelectMetaEntities, setInjectedTags } from '../Cap/selectors';
 
 let varMap = {};
 let editContent = {};
+let timerid;
 
 export const Whatsapp = (props) => {
   const {
@@ -117,9 +119,15 @@ export const Whatsapp = (props) => {
   useEffect(() => {
     const accountObj = accountData.selectedWhatsappAccount || {};
     if (!isEmpty(accountObj)) {
-      setAccountId(get(accountObj, `sourceAccountIdentifier`, ''));
-      setAccessToken(get(accountObj, `configs.accessToken`, ''));
-      setAccountName(get(accountObj, `name`, ''));
+      const {
+        sourceAccountIdentifier = '',
+        configs = {},
+        name = '',
+      } = accountObj;
+      const { accessToken = '' } = configs;
+      setAccountId(sourceAccountIdentifier);
+      setAccessToken(accessToken);
+      setAccountName(name);
     }
   }, [accountData.selectedWhatsappAccount]);
 
@@ -136,26 +144,26 @@ export const Whatsapp = (props) => {
     return () => {
       actions.resetEditTemplate();
       varMap = {};
+      if (timerid) {
+        clearTimeout(timerid);
+      }
     };
   }, [paramObj.id]);
 
   useEffect(() => {
-    editContent =
-      get(templateData, `versions.base.content.whatsapp`) ||
-      get(editData, `templateDetails.versions.base.content.whatsapp`) ||
-      {};
+    const {
+      name = '',
+      versions = {},
+      createdAt = '',
+    } = editData.templateDetails || templateData || {};
+    editContent = get(versions, `base.content.whatsapp`, {});
     if (editContent && !isEmpty(editContent)) {
-      const editMessageTitle =
-        (templateData || {}).name || get(editData, 'templateDetails.name');
-      const createdAt =
-        (templateData || {}).createdAt ||
-        get(editData, 'templateDetails.createdAt');
-      setTemplateName(editMessageTitle);
+      setTemplateName(name);
       setTemplateDate(createdAt);
-      setTemplateCategory(get(editContent, `category`, ''));
-      setTemplateStatus(
-        get(editContent, `status`, WHATSAPP_STATUSES.unsubmitted),
-      );
+      const { category = '', status = WHATSAPP_STATUSES.unsubmitted } =
+        editContent;
+      setTemplateCategory(category);
+      setTemplateStatus(status);
       computeTempMsgArray();
     }
   }, [editData.templateDetails || templateData]);
@@ -164,27 +172,29 @@ export const Whatsapp = (props) => {
     let msg = get(editContent, `languages[0].content`, '');
     const validVarArr = msg.match(validVarRegex) || [];
     const templateMessageArray = [];
+    //removing $'' which was added for twilio enter handling
     msg = msg.slice(2, -1);
+    //removing Click {{unsubscribe}} to unsubscribe
     msg = msg.replace(
       `Click ${validVarArr[validVarArr.length - 1]} to unsubscribe`,
       '',
     );
+    //removing last var added for Click {{unsubscribe}} to unsubscribe
     validVarArr.pop();
     while (msg.length !== 0) {
+      //converting content string to an array split at var
       const index = msg.indexOf(validVarArr[0]);
       if (index !== -1) {
-        templateMessageArray.push(msg.substring(0, index));
-        templateMessageArray.push(validVarArr[0]);
-        msg = msg.substring(index + validVarArr[0].length, msg.length);
-        validVarArr.shift();
+        templateMessageArray.push(msg.substring(0, index)); //push string before var
+        templateMessageArray.push(validVarArr[0]); //push var
+        msg = msg.substring(index + validVarArr[0].length, msg.length); //remaining str
+        validVarArr.shift(); //remove considered var
       } else {
-        templateMessageArray.push(msg);
+        templateMessageArray.push(msg); //remaining str
         break;
       }
     }
     updateTempMsgArray(templateMessageArray.filter((i) => i === 0 || i));
-    //stop spinner
-    setSpin(false);
   };
 
   useEffect(() => {
@@ -200,7 +210,7 @@ export const Whatsapp = (props) => {
           }
         }
       }
-      //setting updatedSmsEditor based on varMap
+      //setting updatedSmsEditor state based on varMap
       const arr = [...tempMsgArray];
       for (const key in varMap) {
         if (varMap[key] !== '') {
@@ -208,35 +218,42 @@ export const Whatsapp = (props) => {
         }
       }
       setUpdatedSmsEditor(arr);
+      timerid = setTimeout(() => {
+        //stop spinner
+        setSpin(false);
+      }, 500);
     }
   }, [tempMsgArray]);
 
   // tag Code start from here
   useEffect(() => {
     //fetching tags
-    const { type, module } = location.query || {};
-    const isEmbedded = type === EMBEDDED;
-    const query = {
-      layout: 'SMS',
-      type: TAG,
-      context: isEmbedded ? module : DEFAULT,
-      embedded: isEmbedded ? type : FULL,
-    };
-    if (getDefaultTags) {
-      query.context = getDefaultTags;
+    if (isEditFlow) {
+      const { type, module } = location.query || {};
+      const isEmbedded = type === EMBEDDED;
+      const query = {
+        layout: 'SMS',
+        type: TAG,
+        context: isEmbedded ? module : DEFAULT,
+        embedded: isEmbedded ? type : FULL,
+      };
+      if (getDefaultTags) {
+        query.context = getDefaultTags;
+      }
+      globalActions.fetchSchemaForEntity(query);
     }
-    globalActions.fetchSchemaForEntity(query);
-  }, []);
+  }, [isEditFlow]);
 
   useEffect(() => {
-    let tag =
-      metaEntities && metaEntities.tags ? metaEntities.tags.standard : [];
-    const { type, module } = location.query || {};
-    if (type === EMBEDDED && module === LIBRARY && !getDefaultTags) {
-      tag = supportedTags;
+    if (isEditFlow) {
+      let tag = get(metaEntities, `tags.standard`, []);
+      const { type, module } = location.query || {};
+      if (type === EMBEDDED && module === LIBRARY && !getDefaultTags) {
+        tag = supportedTags;
+      }
+      updateTags(tag);
     }
-    updateTags(tag);
-  }, [metaEntities]);
+  }, [metaEntities, isEditFlow]);
 
   const handleOnTagsContextChange = (data) => {
     const { type } = location.query || {};
@@ -255,8 +272,8 @@ export const Whatsapp = (props) => {
 
   const onTagSelect = (data) => {
     if (varMap && updatedSmsEditor) {
-      let numId = Number(textAreaId?.slice(textAreaId?.indexOf('_') + 1));
-      if (numId !== NaN) {
+      const numId = Number(textAreaId?.slice(textAreaId?.indexOf('_') + 1));
+      if (numId != NaN) {
         const arr = [...updatedSmsEditor];
         //when trying to insert tag in empty textarea,{#var#} is replaced with "" and then tag is added
         if (arr[numId]?.match(validVarRegex)?.length > 0) {
@@ -334,7 +351,7 @@ export const Whatsapp = (props) => {
       <CapColumn span={12}>
         <CapTooltip
           placement="bottom"
-          title={formatMessage(messages.unsubscribeTextTooltip)}
+          title={!isEditFlow && formatMessage(messages.unsubscribeTextTooltip)}
         >
           <CapHeading
             className={
@@ -351,10 +368,13 @@ export const Whatsapp = (props) => {
     </>
   );
 
+  //used by create and edit
   const renderMessageLength = () => (
     <CapHeading type="h6" className="whatsapp-render-message-length">
       {formatMessage(messages.templateMessageLength, {
-        currentLength: UNSUBSCRIBE_TEXT_LENGTH + templateMessage?.length,
+        currentLength: isEditFlow
+          ? updatedSmsEditor?.join('')?.length + UNSUBSCRIBE_TEXT_LENGTH
+          : templateMessage?.length + UNSUBSCRIBE_TEXT_LENGTH,
         maxLength: TEMPLATE_MESSAGE_MAX_LENGTH,
       })}
     </CapHeading>
@@ -602,45 +622,50 @@ export const Whatsapp = (props) => {
   //create methods end
 
   //edit methods start
-  const getAlertType = () => {
-    if (templateStatus === WHATSAPP_STATUSES.approved) {
-      return 'success';
-    } else if (templateStatus === WHATSAPP_STATUSES.rejected) {
-      return 'error';
+  const getTemplateStatusType = () => {
+    switch (templateStatus) {
+      case WHATSAPP_STATUSES.approved:
+        return 'success';
+      case WHATSAPP_STATUSES.rejected:
+        return 'error';
+      default:
+        return 'warning';
     }
-    return 'warning';
   };
 
-  const getAlertMessage = () => {
-    if (templateStatus === WHATSAPP_STATUSES.approved) {
-      return (
-        <CapLabel type="label2">
-          {formatMessage(messages.approvedStatusMsg)}
-        </CapLabel>
-      );
-    } else if (templateStatus === WHATSAPP_STATUSES.rejected) {
-      return (
-        <CapLabel type="label2">
-          {formatMessage(messages.rejectedStatusMsg)}
-        </CapLabel>
-      );
+  const getTemplateStatusMessage = () => {
+    switch (templateStatus) {
+      case WHATSAPP_STATUSES.approved:
+        return (
+          <CapLabel type="label2">
+            {formatMessage(messages.approvedStatusMsg)}
+          </CapLabel>
+        );
+      case WHATSAPP_STATUSES.rejected:
+        return (
+          <CapLabel type="label2">
+            {formatMessage(messages.rejectedStatusMsg)}
+          </CapLabel>
+        );
+      default:
+        //all cases except approved and rejected, return awaiting approval
+        return (
+          <>
+            <CapLabel type="label2" style={{ fontWeight: 500 }}>
+              {formatMessage(messages.awaitingStatusMsg)}
+            </CapLabel>
+            <CapLabel
+              type="label2"
+              style={{ marginTop: CAP_SPACE_04, marginBottom: CAP_SPACE_04 }}
+            >
+              {formatMessage(messages.awaitingStatusDesc, {
+                date: moment(templateDate).format(DATE_DISPLAY_FORMAT),
+                time: moment(templateDate).format(TIME_DISPLAY_FORMAT),
+              })}
+            </CapLabel>
+          </>
+        );
     }
-    return (
-      <>
-        <CapLabel type="label2" style={{ fontWeight: 500 }}>
-          {formatMessage(messages.awaitingStatusMsg)}
-        </CapLabel>
-        <CapLabel
-          type="label2"
-          style={{ marginTop: CAP_SPACE_04, marginBottom: CAP_SPACE_04 }}
-        >
-          {formatMessage(messages.awaitingStatusDesc, {
-            date: moment(templateDate).format('D MMM YYYY'),
-            time: moment(templateDate).format('hh:mm A'),
-          })}
-        </CapLabel>
-      </>
-    );
   };
 
   // on change event of Text Area
@@ -662,10 +687,10 @@ export const Whatsapp = (props) => {
   const textAreaValue = (idValue) => {
     if (idValue >= 0 && updatedSmsEditor) {
       const value = updatedSmsEditor[idValue];
+      //if value is there and it is not a variable return it
       if (value && (value.match(validVarRegex) || []).length === 0) {
         return value;
       }
-      return '';
     }
     return '';
   };
@@ -675,6 +700,7 @@ export const Whatsapp = (props) => {
     if (tempMsgArray?.length !== 0) {
       let varCount = 0;
       tempMsgArray.forEach((elem, index) => {
+        // if var return textarea else return text
         if (elem.match(validVarRegex)?.length > 0) {
           varCount += 1;
           renderArray.push(
@@ -708,9 +734,27 @@ export const Whatsapp = (props) => {
     return renderArray;
   };
 
+  const disabledEditTooltipRender = () => {
+    switch (templateStatus) {
+      case WHATSAPP_STATUSES.approved:
+        return '';
+      case WHATSAPP_STATUSES.rejected:
+        return formatMessage(messages.disabledEditTooltip, {
+          status: templateStatus,
+        });
+      default:
+        return formatMessage(messages.disabledEditTooltip, {
+          status: formatMessage(messages.disabledEditTooltipStatus),
+        });
+    }
+  };
+
   const editModeContent = (
     <>
-      <CapAlert message={getAlertMessage()} type={getAlertType()} />
+      <CapAlert
+        message={getTemplateStatusMessage()}
+        type={getTemplateStatusType()}
+      />
       <CapRow className="whatsapp-render-heading">
         <CapHeader
           title={
@@ -732,19 +776,7 @@ export const Whatsapp = (props) => {
           }
         />
       </CapRow>
-      <CapTooltip
-        title={
-          templateStatus === WHATSAPP_STATUSES.approved
-            ? ''
-            : templateStatus === WHATSAPP_STATUSES.rejected
-            ? formatMessage(messages.disabledEditTooltip, {
-                status: templateStatus,
-              })
-            : formatMessage(messages.disabledEditTooltip, {
-                status: 'awaiting for approval',
-              })
-        }
-      >
+      <CapTooltip placement="bottom" title={disabledEditTooltipRender()}>
         <CapRow
           className={`whatsapp-edit-template-message-input ${
             templateStatus !== WHATSAPP_STATUSES.approved &&
@@ -760,10 +792,18 @@ export const Whatsapp = (props) => {
   );
   //edit methods end
 
+  //used by create and edit
   const getPreviewSection = () => {
-    const templateMsg = `${
-      isEditFlow ? updatedSmsEditor.join('') : templateMessage
-    }\n${formatMessage(messages.templateMessageUnsubscribeText)}`;
+    const templateMsg = (
+      <>
+        <CapLabel type="label5">
+          {isEditFlow ? updatedSmsEditor.join('') : templateMessage}
+        </CapLabel>
+        <CapLabel type="label11">
+          {formatMessage(messages.templateMessageUnsubscribeText)}
+        </CapLabel>
+      </>
+    );
     return (
       <TemplatePreview
         channel={WHATSAPP}

package/v2Containers/Whatsapp/index.scss

@@ -18,7 +18,7 @@
   text-align: right;
 }
 .whatsapp-create-template-message-input {
-  background-color: #fafbfc;
+  background-color: $CAP_G10;
   padding-top: $CAP_SPACE_16;
 }
 .whatsapp-template-message-error {
@@ -35,7 +35,7 @@
   margin-top: 46px;
 }
 .whatsapp-edit-template-message-input {
-  background-color: #fafbfc;
+  background-color: $CAP_G10;
   padding: 0 $CAP_SPACE_16;
 }
 .whatsapp-edit-template-message-heading {

package/v2Containers/Whatsapp/messages.js

@@ -218,4 +218,8 @@ export default defineMessages({
     id: `${prefix}.disabledEditTooltip`,
     defaultMessage: 'This template is non-editable as this is {status}',
   },
+  disabledEditTooltipStatus: {
+    id: `${prefix}.disabledEditTooltipStatus`,
+    defaultMessage: 'awaiting for approval',
+  },
 });