@capillarytech/creatives-library 7.10.7 → 7.10.8

package/package.json

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

package/services/api.js

@@ -281,6 +281,9 @@ export const deleteAssetById = ({assetId, assetType}) => {
 };
 
 export const uploadFile = ({file, assetType, fileParams, mode, wechatParams}) => {
+  if ( (assetType || '').toLowerCase() === 'image' && fileParams && typeof(fileParams) === 'object' ) {
+    fileParams.isGeneratePreview = true;
+  }
   const data = new FormData();
   data.append('file', file);
   data.append('fileParam', JSON.stringify(fileParams));

package/utils/common.js

@@ -255,10 +255,3 @@ export const bytes2Size = (bytes, decimals = 2) => {
 
   return `${Math.ceil((bytes / Math.pow(k, i)).toFixed(dm))} ${sizes[i]}`;
 };
-
-export const isTraiDLTEnable = (isFullMode, smsRegister) => {
-  const isTraiDltFeatureForOrg = hasTraiDltFeature();
-  const isTariEnableforLib = (!isFullMode && smsRegister === "DLT" ) || isFullMode;
-  const isTraiDltFeature = isTraiDltFeatureForOrg && isTariEnableforLib;
-  return isTraiDltFeature;
-};

package/utils/gtmTrackers/gtmEvents/creativeDetails.js

@@ -41,5 +41,21 @@ const isLabelsUsed = (content = '') => {
   return !!tags.length;
 };
 
+/**
+ * If replaceAll() String method is unsupported in Browsers
+ */
+if(!String.prototype.replaceAll){
+  /**
+   * 
+   * @param {String} search 
+   * @param {String} replacement 
+   * @returns {String} a string replacing all occurances of 'search' with 'replacement'
+   */
+  String.prototype.replaceAll = function(search,replacement){
+    var str = this.valueOf();
+    const regularExp = new RegExp(search, 'g');
+    return str.replace(regularExp, replacement);
+  }
+}
 
 export default creativeDetails;

package/v2Containers/CreativesContainer/SlideBoxContent.js

@@ -142,7 +142,6 @@ function SlideBoxContent(props) {
       fbAdManager,
       showDisabledFBInfo,
       orgUnitId,
-      smsRegister,
     } = props;
   const type = (messageDetails.type || '').toLowerCase(); // type is context in get tags values : outbound | dvs | referral | loyalty | coupons
   const query = { type: !isFullMode && 'embedded', module: isFullMode ? 'default' : 'library', isEditFromCampaigns: (templateData || {}).isEditFromCampaigns};
@@ -202,18 +201,12 @@ function SlideBoxContent(props) {
 
   const getChannelPreviewContent = (templateDataObject) => {
     switch (templateDataObject.type.toUpperCase()) {
-      case constants.SMS: {
-        const isTraiDlt = commonUtil.isTraiDLTEnable(isFullMode, smsRegister);
-        const updatedSmsEditor = get(
-          templateDataObject,
-          `versions.base['updated-sms-editor']`,
-          '',
-        );
-        if (!isTraiDlt || updatedSmsEditor === '') {
+      case constants.SMS:
+        if (!commonUtil.hasTraiDltFeature() || get(templateDataObject, `versions.base['updated-sms-editor']`) === "") {
           return get(templateDataObject, `versions.base['sms-editor']`);
+        } else {
+          return templateDataObject.versions.base['updated-sms-editor']?.join('');
         }
-        return updatedSmsEditor.join('');
-      }
       case constants.LINE: {
         const lineContents = get(templateDataObject, `versions.base.content.messages`, [{}]);
         const previewContent = [];
@@ -354,7 +347,6 @@ function SlideBoxContent(props) {
         messageStrategy={messageStrategy}
         showDisabledFBInfo={showDisabledFBInfo}
         orgUnitId={orgUnitId}
-        smsRegister={smsRegister}
         />
       )}
       {isPreview && (
@@ -424,7 +416,6 @@ function SlideBoxContent(props) {
           onTestContentClicked={onTestContentClicked}
           handleClose={handleClose}
           onCreateComplete={onCreateComplete}
-          smsRegister={smsRegister}
         />
       )}
       {isEditFTP && (
@@ -472,8 +463,6 @@ function SlideBoxContent(props) {
         onPreviewContentClicked={onPreviewContentClicked}
         onTestContentClicked={onTestContentClicked}
         onCreateComplete={onCreateComplete}
-        smsRegister={smsRegister}
-        onShowTemplates={onShowTemplates}
       />
         )}
 
@@ -727,6 +716,5 @@ SlideBoxContent.propTypes = {
   fbAdManager: PropTypes.string,
   showDisabledFBInfo: PropTypes.boolean,
   orgUnitId: PropTypes.any,
-  smsRegister: PropTypes.any,
 };
 export default SlideBoxContent;

package/v2Containers/CreativesContainer/SlideBoxHeader.js

@@ -7,7 +7,7 @@ import PropTypes from 'prop-types';
 import messages from './messages';
 import { MAP_TEMPLATE } from '../WeChat/Wrapper/constants';
 import { NO_COMMUNICATION, FTP } from '../App/constants';
-import { isTraiDLTEnable } from '../../utils/common';
+import { hasTraiDltFeature } from '../../utils/common';
 const PrefixWrapper = styled.div`
   margin-right: 16px;
 `;
@@ -25,12 +25,11 @@ function getChannelLabel(channel = '') {
 
 
 function SlideBoxHeader(props) {
-  const { slidBoxContent, templateData, onShowTemplates, creativesMode, isFullMode, showPrefix, shouldShowTemplateName, channel, templateNameRenderProp, weChatTemplateType, onWeChatMaptemplateStepChange, weChatMaptemplateStep, templateStep, smsRegister } = props;
+  const { slidBoxContent, templateData, onShowTemplates, creativesMode, isFullMode, showPrefix, shouldShowTemplateName, channel, templateNameRenderProp, weChatTemplateType, onWeChatMaptemplateStepChange, weChatMaptemplateStep, templateStep } = props;
   const showTemplateNameHeader = isFullMode && shouldShowTemplateName;
   const mapTemplateCreate = !showTemplateNameHeader && slidBoxContent === 'createTemplate' && weChatTemplateType === MAP_TEMPLATE && templateStep !== 'modeSelection';
-  const isTraiDlt = isTraiDLTEnable(isFullMode, smsRegister);
-  const showCreateTraiSMSHeader = isTraiDlt && channel.toLowerCase() === "sms";
-
+  const isTraiDltFeature = hasTraiDltFeature();
+  const showCreateTraiSMSHeader = isTraiDltFeature && channel.toLowerCase() === "sms";
   return (
     <div key="creatives-container-slidebox-header-content">
       {slidBoxContent === 'templates' && !showTemplateNameHeader && (
@@ -104,6 +103,5 @@ SlideBoxHeader.propTypes = {
   channel: PropTypes.string,
   shouldShowTemplateName: PropTypes.bool,
   templateNameRenderProp: PropTypes.func,
-  smsRegister: PropTypes.any,
 };
 export default SlideBoxHeader;

package/v2Containers/CreativesContainer/index.js

@@ -156,7 +156,7 @@ class Creatives extends React.Component {
     this.setState({ isGetFormData: false });
   };
   getTemplateData = (templateData) => { //from consumers to creatives
-    const { isFullMode, messageDetails = {}, smsRegister } = this.props;
+    const {isFullMode, messageDetails = {}} = this.props;
     const { additionalProperties = {} } = messageDetails;
     if (!isFullMode && templateData) { // for component mode
       const {channel} = templateData;
@@ -170,28 +170,9 @@ class Creatives extends React.Component {
           break;
         }
         case constants.SMS: {
-          const isTraiDlt = commonUtil.isTraiDLTEnable(isFullMode, smsRegister);
-          let formData = {};
-          if (isTraiDlt) {
-            const {
-              template_id = '',
-              header = '',
-              template_name = '',
-              'sms-editor': smsEditor = '',
-              'var-mapped': varMapped = {},
-            } = templateData;
-            formData = {
-              template_id,
-              header,
-              template_name,
-              'sms-editor': smsEditor,
-              'var-mapped': varMapped,
-            };
-          } else {
-            formData = {
-              'sms-editor': templateData.messageBody,
-            };
-          }
+          const formData = {
+            "sms-editor": templateData.messageBody,
+          };
           creativesTemplateData = {
             type: channel,
             name: "Campaign message SMS content",
@@ -305,14 +286,14 @@ class Creatives extends React.Component {
               type: constants.FACEBOOK,
               edit: true,
               selectedFacebookAccount,
-              fbContentType,
+              fbContentType
             };
           } else {
             creativesTemplateData = {
               selectedMarketingObjective: templateData.selectedMarketingObjective,
               edit: true,
               type: channel,
-              fbContentType: templateData.fbContentType,
+              fbContentType: templateData.fbContentType
             };
           }
           break;
@@ -376,31 +357,7 @@ class Creatives extends React.Component {
     switch (channel) {
       case constants.SMS:
         if (template.value.base) {
-          const smsBase = template.value.base || {};
-          const { isFullMode, smsRegister } = this.props;
-          const isTraiDlt = commonUtil.isTraiDLTEnable(isFullMode, smsRegister);
-          const {
-            'updated-sms-editor': updatedSmsEditor,
-            'sms-editor': smsEditor,
-          } = smsBase;
-          if (!isTraiDlt) {
-            templateData.messageBody = smsEditor;
-          } else {
-            templateData.messageBody = updatedSmsEditor === "" ? smsEditor : updatedSmsEditor.join('');
-            const {
-              template_id,
-              template_name,
-              header,
-              'var-mapped': varMapped,
-            } = smsBase;
-            templateData.templateConfigs = {
-              templateId: template_id,
-              templateName: template_name,
-              template: smsEditor,
-              registeredSenderIds: header,
-              templateVariableMapping: varMapped,
-            };
-          }
+          templateData.messageBody = template.value.base['sms-editor'];
         }
         break;
       case constants.EMAIL:
@@ -814,7 +771,7 @@ class Creatives extends React.Component {
   }
   render() {
     const {slidBoxContent, isGetFormData, showSlideBox, templateData, currentChannel, emailCreateMode, templateStep, isLoadingContent, mobilePushCreateMode, isDiscardMessage, weChatTemplateType, weChatMaptemplateStep} = this.state;
-    const {isFullMode, creativesMode, cap, isUploading, channelsToHide, selectedWeChatAccount, forwardedTags, channelsToDisable, selectedOfferDetails, onTestContentClicked, onPreviewContentClicked, getCreativesData, fetchingCmsData, editor, smsRegister} = this.props;
+    const {isFullMode, creativesMode, cap, isUploading, channelsToHide, selectedWeChatAccount, forwardedTags, channelsToDisable, selectedOfferDetails, onTestContentClicked, onPreviewContentClicked, getCreativesData, fetchingCmsData, editor} = this.props;
     const mapTemplateCreate = slidBoxContent === 'createTemplate' && weChatTemplateType === MAP_TEMPLATE && templateStep !== 'modeSelection';
     /* TODO: Instead of passing down same props separately to each component down, write common function to these props and pass it accordingly */
     return (
@@ -838,7 +795,6 @@ class Creatives extends React.Component {
               weChatTemplateType={weChatTemplateType}
               showPrefix={!isUploading} // not show back button when email template is being uploaded
               templateStep={this.creativesTemplateSteps[templateStep]}
-              smsRegister={smsRegister}
             />}
           content={
             <SlideBoxContent
@@ -892,7 +848,6 @@ class Creatives extends React.Component {
               handleClose={this.handleCloseSlideBox}
               onFTPSubmit={getCreativesData}
               editor={editor}
-              smsRegister={smsRegister}
               messageStrategy={this.props.strategy}
               orgUnitId={this.props.orgUnitId}
           />

package/v2Containers/SmsTrai/Create/index.js

@@ -18,6 +18,7 @@ import CapNotification from '@capillarytech/cap-ui-library/CapNotification';
 import Papa from 'papaparse';
 import cloneDeep from 'lodash/cloneDeep';
 import {
+  CAP_SPACE_12,
   CAP_SPACE_16,
   CAP_SPACE_24,
   CAP_SPACE_32,
@@ -47,13 +48,7 @@ import messages from './messages';
 import withCreatives from '../../../hoc/withCreatives';
 
 export const SmsTraiCreate = (props) => {
-  const {
-    intl,
-    actions,
-    onCreateComplete,
-    isFullMode,
-    onShowTemplates,
-  } = props;
+  const { intl, actions, onCreateComplete } = props;
   const { formatMessage } = intl;
   const [files, setFiles] = useState([]);
   const [errorText, setErrorText] = useState('');
@@ -95,13 +90,13 @@ export const SmsTraiCreate = (props) => {
     const numbersOnly = /^\d+$/;
     let isError = false;
     senderIdString.split(',').forEach((value) => {
-      const _value = value.trim();
-      if (_value) {
-        if (_value.length !== 6) {
+      value = value.trim();
+      if (value) {
+        if (value.length !== 6) {
           isError = true;
           return;
         }
-        if (!(lettersOnly.test(_value) || numbersOnly.test(_value))) {
+        if (!(lettersOnly.test(value) || numbersOnly.test(value))) {
           isError = true;
         }
       }
@@ -119,7 +114,7 @@ export const SmsTraiCreate = (props) => {
       APPROVAL_STATUS,
     );
 
-    for (let row = 1; row < transformedResults.length; row += 1) {
+    for (let row = 1; row < transformedResults.length; row++) {
       const errorArray = [];
       const headerErrorArray = [];
       const approvalErrorArray = [];
@@ -209,7 +204,7 @@ export const SmsTraiCreate = (props) => {
         return;
       }
       //one of the mandatory template id alias should be available.
-      for (let i = 0; i < TEMPLATE_ID_ALIASES.length; i += 1) {
+      for (let i = 0; i < TEMPLATE_ID_ALIASES.length; i++) {
         if (cols.includes(TEMPLATE_ID_ALIASES[i])) {
           templateIdAliasPresent.push(TEMPLATE_ID_ALIASES[i]);
         }
@@ -223,7 +218,7 @@ export const SmsTraiCreate = (props) => {
         return;
       }
       //one of the mandatory template message alias should be available.
-      for (let i = 0; i < TEMPLATE_MESSAGE_ALIASES.length; i += 1) {
+      for (let i = 0; i < TEMPLATE_MESSAGE_ALIASES.length; i++) {
         if (cols.includes(TEMPLATE_MESSAGE_ALIASES[i])) {
           templateMessageAliasPresent.push(TEMPLATE_MESSAGE_ALIASES[i]);
         }
@@ -311,7 +306,7 @@ export const SmsTraiCreate = (props) => {
             });
           }
           //adding validated rejection reason column to original results
-          for (let i = 0; i < validatedResults.length; i += 1) {
+          for (let i = 0; i < validatedResults.length; i++) {
             results.data[i].push(validatedResults[i][6]);
           }
           updateSaveTemplate(true);
@@ -361,7 +356,7 @@ export const SmsTraiCreate = (props) => {
 
     if (rejectionIndex !== -1) {
       tempArray.push(fileData[0]);
-      for (let row = 1; row < fileData.length; row += 1) {
+      for (let row = 1; row < fileData.length; row++) {
         if (fileData[row][rejectionIndex]) {
           tempArray.push(fileData[row]);
         }
@@ -397,15 +392,16 @@ export const SmsTraiCreate = (props) => {
     tempArray.push(fileData[0]);
 
     // filter out non rejected rows
-    for (let row = 1; row < fileData.length; row += 1) {
+    for (let row = 1; row < fileData.length; row++) {
       if (!fileData[row][rejectionIndex]) {
         tempArray.push(fileData[row]);
       }
     }
+
     // Filter out the columns index that needs to save
     const cols = getAllColumnNames(tempArray[0]);
     const indexArray = [];
-    for (let i = 0; i < cols.length; i += 1) {
+    for (let i = 0; i < cols.length; i++) {
       if (
         SAVED_COLUMNS.includes(cols[i]) ||
         HEADER_ALIASES.includes(cols[i]) ||
@@ -456,11 +452,7 @@ export const SmsTraiCreate = (props) => {
       { templates: savedData },
       (resp, errorMessage) => {
         createCallback({ errorMessage });
-        if (isFullMode) {
-          onCreateComplete();
-        } else {
-          onShowTemplates();
-        }
+        onCreateComplete();
       },
     );
   };
@@ -538,7 +530,7 @@ export const SmsTraiCreate = (props) => {
           {previewFileIndex !== null && (
             <>
               <CapRow span={24} className="upload-type-group-create-container">
-                <>
+                <div className="upload-file-preview">
                   <CapDivider
                     type="horizontal"
                     className="upload-file-preview-divider-1"
@@ -643,7 +635,7 @@ export const SmsTraiCreate = (props) => {
                     className="upload-file-preview-divider-2"
                   />
                   {errorText && <CapError>{errorText}</CapError>}
-                </>
+                </div>
               </CapRow>
             </>
           )}

package/v2Containers/SmsTrai/Edit/index.js

@@ -13,7 +13,6 @@ import CapLabel from '@capillarytech/cap-ui-library/CapLabel';
 import CapHeading from '@capillarytech/cap-ui-library/CapHeading';
 import CapSpin from '@capillarytech/cap-ui-library/CapSpin';
 import CapNotification from '@capillarytech/cap-ui-library/CapNotification';
-import CapError from '@capillarytech/cap-ui-library/CapError';
 import {
   CAP_SPACE_16,
   CAP_SPACE_12,
@@ -25,13 +24,12 @@ import {
 } from '@capillarytech/cap-ui-library/styled/variables';
 import { makeSelectTemplateDetailsResponse } from '../../Sms/Edit/selectors';
 import { makeSelectMetaEntities, setInjectedTags } from '../../Cap/selectors';
-import * as smsEditActions from '../../Sms/Edit/actions';
+import * as actions from '../../Sms/Edit/actions';
 import messages from './messages';
 import TagList from '../../TagList';
 import TemplatePreview from '../../../v2Components/TemplatePreview';
 import withCreatives from '../../../hoc/withCreatives';
-import { validateTags } from '../../../utils/tagValidations';
-import { updateCharCount } from '../../../utils/smsCharCountV2';
+
 import {
   CHARLIMIT,
   SMS,
@@ -43,13 +41,9 @@ import {
   ALL,
   LIBRARY,
 } from './constants';
-
 let varMap = {};
-let traiData = {};
-let tagValidationResponse = {};
 const { TextArea } = CapInput;
 const { CapLabelInline } = CapLabel;
-
 export const SmsTraiEdit = (props) => {
   const {
     intl,
@@ -64,9 +58,6 @@ export const SmsTraiEdit = (props) => {
     metaEntities,
     injectedTags,
     onCreateComplete,
-    isFullMode,
-    getFormSubscriptionData,
-    templateData = {},
   } = props || {};
   const { formatMessage } = intl;
   const [loading, updateLoading] = useState(true);
@@ -75,8 +66,7 @@ export const SmsTraiEdit = (props) => {
   const [tags, updateTags] = useState([]);
   const [textAreaId, updateTextAreaId] = useState();
   const [isValidationError, updateIsValidationError] = useState(false);
-  const [isTagValidationError, updateIsTagValidationError] = useState(false);
-  const [totalMessageLength, setTotalMessageLength] = useState(0);
+  let totalVarCount = 0;
   const SMSTraiFooter = styled.div`
     background-color: ${CAP_WHITE};
     position: fixed;
@@ -95,38 +85,32 @@ export const SmsTraiEdit = (props) => {
       margin-right: ${CAP_SPACE_12};
     }
   `;
-
   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;
-    }
-    globalActions.fetchSchemaForEntity(query);
-    //fetching template data in fullmode
     const { id } = params || {};
     if (id) {
       actions.getTemplateDetails(id);
+      //fetching tags
+      const query = {
+        layout: SMS,
+        type: TAG,
+        context:
+          location.query.type === EMBEDDED ? location.query.module : DEFAULT,
+        embedded: location.query.type === EMBEDDED ? location.query.type : FULL,
+      };
+      if (getDefaultTags) {
+        query.context = getDefaultTags;
+      }
+      globalActions.fetchSchemaForEntity(query);
     }
-    //cleanup code
     return () => {
       actions.resetEditTemplate();
-      varMap = {};
     };
   }, []);
 
   //computing placeholder array for mapping values and rendering dynamic form
   useEffect(() => {
-    traiData = isFullMode ? templateDetails : templateData;
-    if (traiData && !isEmpty(traiData)) {
-      let msg = get(traiData, `versions.base.sms-editor`);
+    if (templateDetails && !isEmpty(templateDetails)) {
+      let msg = get(templateDetails, `versions.base.sms-editor`);
       const templateMessageArray = [];
       //converting sms-editor string to an array split at '{#var#}'
       //split and push string before '{#var#}[0 to index]', push '{#var#}',
@@ -142,6 +126,7 @@ export const SmsTraiEdit = (props) => {
           break;
         }
       }
+
       const filteredTemplateMessageArray = templateMessageArray.filter(
         (i) => i.trim() !== '',
       );
@@ -149,46 +134,36 @@ export const SmsTraiEdit = (props) => {
       //stop spinner
       updateLoading(false);
     }
-  }, [templateDetails || templateData]);
+  }, [templateDetails]);
 
-  //compute/get varMapped and updated-sms-editor
   useEffect(() => {
     if (tempMsgArray.length !== 0) {
-      const traiBase = traiData?.versions?.base || {};
-      const {
-        'var-mapped': varMapped = {},
-        'updated-sms-editor': traiSmsEditor = '',
-      } = traiBase;
-      //if varMap and updated-sms-editor is already present on non first edits,use those values
-      if (!isEmpty(varMapped)) {
-        varMap = cloneDeep(varMapped);
-        if (isFullMode) {
-          setUpdatedSmsEditor(traiSmsEditor);
-        } else {
-          computeUpdatedSmsEditor();
-        }
+      //if varMapped and updated-sms-editor is already present on non first edits
+      if (!isEmpty(get(templateDetails, `versions.base.var-mapped`))) {
+        varMap = cloneDeep(get(templateDetails, `versions.base.var-mapped`));
+        setUpdatedSmsEditor(
+          get(templateDetails, `versions.base.updated-sms-editor`),
+        );
       } else {
-        //computing and setting varMap for first edit
+        //computing varMap for first edit
         let counter = 1;
-        for (let i = 0; i < tempMsgArray.length; i += 1) {
+        for (let i = 0; i < tempMsgArray.length; i++) {
           if (tempMsgArray[i] === SMS_TRAI_VAR) {
             const nextElem =
               tempMsgArray[i === tempMsgArray.length - 1 ? 0 : i + 1];
             if (tempMsgArray[i] !== nextElem) {
-              varMap[`${tempMsgArray[i]}_${(i - counter) + 1}`] = {
+              varMap[`${tempMsgArray[i]}_${i - counter + 1}`] = {
                 data: '',
                 count: counter,
               };
               counter = 1;
             } else {
-              counter += 1;
+              counter++;
             }
           }
         }
         setUpdatedSmsEditor(tempMsgArray);
       }
-      // calcaulate message length here
-      calculateTotalMessageLength();
     }
   }, [tempMsgArray]);
 
@@ -201,41 +176,6 @@ export const SmsTraiEdit = (props) => {
     }
   }, []);
 
-  //performs tag validation
-  useEffect(() => {
-    if (
-      !isFullMode &&
-      updatedSmsEditor?.length > 0 &&
-      !updatedSmsEditor.includes(SMS_TRAI_VAR)
-    ) {
-      tagValidationResponse =
-        validateTags({
-          content: updatedSmsEditor.join(''),
-          tagsParam: tags,
-          injectedTagsParams: injectedTags,
-          location,
-          tagModule: getDefaultTags,
-        }) || {};
-      updateIsTagValidationError(!tagValidationResponse.valid);
-    }
-  }, [updatedSmsEditor, tags]);
-
-  const computeUpdatedSmsEditor = () => {
-    const updatedSmsArray = [...tempMsgArray];
-    for (const key in varMap) {
-      const index = Number(key.slice(8)); //Eg: -> extracting index 1 from keys like {#var# } _1
-      for (let i = 0; i < varMap[key].count; i += 1) {
-        //when multiple "#var#" come continuously ,it is considered as 1 textbox
-        if (i === 0) {
-          updatedSmsArray[index] = varMap[key].data; //data for first #var# of the textbox
-        } else {
-          updatedSmsArray[index + i] = ''; //"" for remaining #var# of a textbox
-        }
-      }
-    }
-    setUpdatedSmsEditor(updatedSmsArray);
-  };
-
   //Saving on done start
   const onUpdateTemplateComplete = (editResponse, errorMsg) => {
     if (editResponse?.templateId) {
@@ -251,29 +191,16 @@ export const SmsTraiEdit = (props) => {
     }
   };
   const onDoneCallback = () => {
-    if (updatedSmsEditor.includes(SMS_TRAI_VAR) && !isFullMode) {
+    if (updatedSmsEditor.includes(SMS_TRAI_VAR)) {
       //during save textbox should not be empty
       updateIsValidationError(true);
     } else {
       //start spinner
       updateLoading(true);
-      const traiVersions = traiData.versions || {};
-      traiVersions.base = {
-        ...traiVersions.base,
-        'var-mapped': varMap,
-        'updated-sms-editor': updatedSmsEditor,
-      };
-      traiVersions.history = [traiVersions.base];
-      if (isFullMode) {
-        actions.editTemplate(traiData, onUpdateTemplateComplete);
-      } else {
-        getFormSubscriptionData({
-          value: traiData.versions,
-          _id: params && params.id,
-          validity: true,
-          type: SMS,
-        });
-      }
+      templateDetails.versions.base['var-mapped'] = varMap;
+      templateDetails.versions.base['updated-sms-editor'] = updatedSmsEditor;
+      templateDetails.versions.history = [templateDetails.versions.base];
+      actions.editTemplate(templateDetails, onUpdateTemplateComplete);
     }
   };
   //Saving on done end
@@ -282,16 +209,17 @@ export const SmsTraiEdit = (props) => {
   useEffect(() => {
     let tag =
       metaEntities && metaEntities.tags ? metaEntities.tags.standard : [];
-    const { type, module } = location.query || {};
-    if (type === EMBEDDED && module === LIBRARY && !getDefaultTags) {
+    if (
+      location.query.type === EMBEDDED &&
+      location.query.module === LIBRARY &&
+      !getDefaultTags
+    ) {
       tag = supportedTags;
     }
     updateTags(tag);
   }, [metaEntities]);
 
   const handleOnTagsContextChange = (data) => {
-    const { type } = location.query || {};
-    const isEmbedded = type === EMBEDDED;
     const query = {
       layout: SMS,
       type: TAG,
@@ -299,7 +227,7 @@ export const SmsTraiEdit = (props) => {
         (data || '').toLowerCase() === ALL
           ? DEFAULT
           : (data || '').toLowerCase(),
-      embedded: isEmbedded ? type : FULL,
+      embedded: location.query.type === EMBEDDED ? location.query.type : FULL,
     };
     globalActions.fetchSchemaForEntity(query);
   };
@@ -312,7 +240,7 @@ export const SmsTraiEdit = (props) => {
         for (
           let i = 0;
           i < varMap[`${SMS_TRAI_VAR}_${textAreaId}`].count;
-          i += 1
+          i++
         ) {
           tempArr[textAreaId + i] = '';
         }
@@ -331,24 +259,23 @@ export const SmsTraiEdit = (props) => {
 
   // on change event of Text Area
   const textAreaValueChange = ({ target: { value, id } }) => {
-    const _id = Number(id);
+    id = Number(id);
     const arr = [...updatedSmsEditor];
-    varMap[`${SMS_TRAI_VAR}_${_id}`].data = value;
+    varMap[`${SMS_TRAI_VAR}_${id}`].data = value;
     if (value === '') {
-      for (let i = 0; i < varMap[`${SMS_TRAI_VAR}_${_id}`].count; i += 1) {
-        arr[_id + i] = SMS_TRAI_VAR;
+      for (let i = 0; i < varMap[`${SMS_TRAI_VAR}_${id}`].count; i++) {
+        arr[id + i] = SMS_TRAI_VAR;
       }
     } else {
-      for (let i = 0; i < varMap[`${SMS_TRAI_VAR}_${id}`].count; i += 1) {
+      for (let i = 0; i < varMap[`${SMS_TRAI_VAR}_${id}`].count; i++) {
         if (i === 0) {
-          arr[_id] = varMap[`${SMS_TRAI_VAR}_${_id}`].data;
+          arr[id] = varMap[`${SMS_TRAI_VAR}_${id}`].data;
         } else {
-          arr[_id + i] = '';
+          arr[id + i] = '';
         }
       }
     }
     setUpdatedSmsEditor(arr);
-    calculateTotalMessageLength();
   };
 
   const textAreaValue = (idValue) => {
@@ -358,8 +285,9 @@ export const SmsTraiEdit = (props) => {
         updatedSmsEditor[idValue] !== SMS_TRAI_VAR
       ) {
         return updatedSmsEditor[idValue];
+      } else {
+        return '';
       }
-      return '';
     }
     return '';
   };
@@ -380,19 +308,19 @@ export const SmsTraiEdit = (props) => {
         </CapHeading>
       );
     }
-    return <></>;
   };
 
   const renderedContent = () => {
     const renderArray = [];
     if (tempMsgArray?.length !== 0) {
       let varCount = 0;
-      tempMsgArray.forEach((elem, index) => {
+      tempMsgArray.map((elem, index) => {
         let prevElem = '';
         if (elem.includes(SMS_TRAI_VAR)) {
           prevElem =
             tempMsgArray[[index === 0 ? tempMsgArray.length - 1 : index - 1]];
-          varCount += 1;
+          varCount++;
+          totalVarCount++;
           if (prevElem !== SMS_TRAI_VAR) {
             renderArray.push(
               <TextArea
@@ -443,76 +371,42 @@ export const SmsTraiEdit = (props) => {
     return renderArray;
   };
 
-
-  const smsLengthForVar = () => (
-    <CapHeading type="h5" style={{ marginTop: CAP_SPACE_04, float: 'right' }}>
-      {formatMessage(messages.totalCharacters, {
-        smsCount: Math.ceil(totalMessageLength / 160),
-        number: totalMessageLength,
-      })}
-    </CapHeading>
-    );
-
   // to compute the length of the message
-  //30 characters is blocked per'{#var#}' if textbox is empty otherwise it will be textbox length
-  // and the remaining string length is added to it
-  const calculateTotalMessageLength = () => {
-    const msgLenWithoutVar = tempMsgArray?.filter((i) => i !== SMS_TRAI_VAR).join('');
-    const charDetails = updateCharCount(msgLenWithoutVar, false);
-    const varLen = calculateLenForTextBox();
-    const totalMsgLen = charDetails.chars_used + varLen;
-    setTotalMessageLength(totalMsgLen);
-  };
-
-  const calculateLenForTextBox = () => {
-    let countVarChar = 0;
-    Object.keys(varMap).forEach((i) => {
-      if (varMap[i].data) {
-        const charDetails = updateCharCount(varMap[i].data, false);
-        countVarChar += charDetails.chars_used;
-      } else {
-        countVarChar += varMap[i].count * CHARLIMIT;
-      }
-    });
-    return countVarChar;
-  };
-  const tagValidationErrorMessage = () => {
-    const { missingTags = [], unsupportedTags = [] } = tagValidationResponse;
-    let tagError = '';
-    if (missingTags.length > 0) {
-      tagError = formatMessage(messages.missingTagsValidationError, {
-        missingTags,
-      });
-    } else if (unsupportedTags.length > 0) {
-      tagError = formatMessage(messages.unsupportedTagsValidationError, {
-        unsupportedTags,
-      });
-    }
-    return <CapError>{tagError}</CapError>;
+  //30 characters is blocked per'{#var#}' and the remaining string length is added to it
+  const smsLengthForVar = () => {
+    const msgLenWithoutVar =
+      tempMsgArray?.filter((i) => i !== SMS_TRAI_VAR)?.join('').length || 0;
+    const totalMessageLength = msgLenWithoutVar + totalVarCount * CHARLIMIT;
+    return (
+      <CapHeading type="h5" style={{ marginTop: CAP_SPACE_04, float: 'right' }}>
+        {formatMessage(messages.totalCharacters, {
+          smsCount: Math.ceil(totalMessageLength / 160),
+          number: totalMessageLength,
+        })}
+      </CapHeading>
+    );
   };
 
   return (
     <>
       <CapSpin spinning={loading}>
         <CapRow>
-          {traiData && !isEmpty(traiData) && (
+          {templateDetails && !isEmpty(templateDetails) && (
             <TraiEditTemplateDetails>
               <CapLabelInline type="label1">
                 {formatMessage(messages.templateLabel)}
               </CapLabelInline>
               <CapLabelInline type="label2">
-                {traiData.versions.base.template_name}
+                {templateDetails.versions.base.template_name}
               </CapLabelInline>
-
               <CapLabelInline type="label1">
                 {formatMessage(messages.traiEditSeperator)}
               </CapLabelInline>
-
               <CapLabelInline type="label1">
                 {formatMessage(messages.senderIdlabel)}
               </CapLabelInline>
               <CapLabelInline type="label2">
-                {traiData.versions.base.header.join(', ')}
+                {templateDetails.versions.base.header}
               </CapLabelInline>
             </TraiEditTemplateDetails>
           )}
@@ -543,7 +437,6 @@ export const SmsTraiEdit = (props) => {
               {renderedContent()}
             </CapRow>
             <CapRow>{smsLengthForVar()}</CapRow>
-            {isTagValidationError && tagValidationErrorMessage()}
             <div style={{ marginBottom: '100px' }} />
           </CapColumn>
           <CapColumn span={10}>
@@ -554,11 +447,7 @@ export const SmsTraiEdit = (props) => {
           </CapColumn>
         </CapRow>
         <SMSTraiFooter>
-          <CapButton
-            onClick={onDoneCallback}
-            className="create-msg"
-            disabled={isTagValidationError}
-          >
+          <CapButton onClick={onDoneCallback} className="create-msg">
             <FormattedMessage {...messages.saveButtonLabel} />
           </CapButton>
           <CapButton
@@ -580,9 +469,11 @@ const mapStateToProps = createStructuredSelector({
   injectedTags: setInjectedTags(),
 });
 
-const mapDispatchToProps = (dispatch) => ({
-  actions: bindActionCreators(smsEditActions, dispatch),
-});
+const mapDispatchToProps = (dispatch) => {
+  return {
+    actions: bindActionCreators(actions, dispatch),
+  };
+};
 
 export default withCreatives({
   WrappedComponent: injectIntl(SmsTraiEdit),

package/v2Containers/SmsTrai/Edit/messages.js

@@ -55,14 +55,4 @@ export default defineMessages({
     id: `${prefix}.senderIdlabel`,
     defaultMessage: 'Sender ID',
   },
-  missingTagsValidationError: {
-    id: `${prefix}.missingTagsValidationError`,
-    defaultMessage:
-      'Missing tags: {missingTags}. Please add them to this message.',
-  },
-  unsupportedTagsValidationError: {
-    id: `${prefix}.unsupportedTagsValidationError`,
-    defaultMessage:
-      'Unsupported tags: {unsupportedTags}. Please remove them from this message.',
-  },
 });

package/v2Containers/SmsWrapper/index.js

@@ -6,7 +6,7 @@
 import PropTypes from 'prop-types';
 import React from 'react';
 import SmsCreate from '../Sms/Create';
-import { isTraiDLTEnable } from '../../utils/common';
+import { hasTraiDltFeature } from '../../utils/common';
 import SmsEdit from '../Sms/Edit';
 import SmsTraiCreate from '../SmsTrai/Create';
 import SmsTraiEdit from '../SmsTrai/Edit';
@@ -26,9 +26,7 @@ const SmsWrapper = (props) => {
     onPreviewContentClicked,
     onTestContentClicked,
     onCreateComplete,
-    handleClose,
-    smsRegister,
-    onShowTemplates,
+    handleClose
   } = props;
 
   const smsProps = {
@@ -45,15 +43,13 @@ const SmsWrapper = (props) => {
     onPreviewContentClicked,
     onTestContentClicked,
   };
-  const isTraiDlt = isTraiDLTEnable(isFullMode, smsRegister);
+  const isTraiDltFeature = hasTraiDltFeature();
   return <>
     {
-      isCreateSms && (isTraiDlt ?
+      isCreateSms && (isTraiDltFeature ?
         <SmsTraiCreate
           isComponent
-          {...smsProps}
-          onShowTemplates={onShowTemplates}
-          /> :
+          {...smsProps}/> :
           <SmsCreate
             isComponent {
               ...smsProps
@@ -61,16 +57,16 @@ const SmsWrapper = (props) => {
           />
       )
     }
-    {isEditSms && (isTraiDlt ?
+    {isEditSms && (isTraiDltFeature ?
       <SmsTraiEdit
         {...smsProps}
         params={{id: templateData._id}}
         templateData={templateData}
         handleClose={handleClose}
-          /> : <SmsEdit
-            {...smsProps}
-            params={{id: templateData._id}}
-            templateData={templateData}
+          />:<SmsEdit
+        {...smsProps}
+        params={{id: templateData._id}}
+        templateData={templateData}
           />
       )}
       </>;

package/v2Containers/Templates/index.js

@@ -155,7 +155,7 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
     this.prepareMobilePushPreviewData = this.prepareMobilePushPreviewData.bind(this);
     this.menuOnClickEvent = this.menuOnClickEvent.bind(this);
   }
-
+  
   componentWillMount() {
     if (this.state.channel === '') {
       let channel = '';
@@ -207,11 +207,7 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
       }
     }
   }
-  checkDLTfeatureEnable = () => {
-    const {smsRegister, isFullMode} = this.props;
-    const isTraiDlt = commonUtil.isTraiDLTEnable(isFullMode, smsRegister);
-    return isTraiDlt;
-  }
+
   componentDidMount() {
     if (this.props.location.query.type === 'embedded' && this.isEnabledInLibraryModule("setLocale")) {
       this.setLocale();
@@ -227,7 +223,7 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
       queryParams.page = this.state.page;
       queryParams.perPage = this.state.perPageLimit;
       const channel = this.state.channel;
-      const isTraiDltFeature = this.checkDLTfeatureEnable();
+      const isTraiDltFeature = commonUtil.hasTraiDltFeature();
       if ((this.state.channel || '').toLowerCase() === "sms" && isTraiDltFeature) {
         queryParams.traiEnable = true;
       }
@@ -590,7 +586,7 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
     if (activeMode === ACCOUNT_SELECTION_MODE) {
       this.setTemplatesMode();
     }
-    const isTraiDltFeature = this.checkDLTfeatureEnable();
+    const isTraiDltFeature = commonUtil.hasTraiDltFeature();
     if ((this.state.channel || '').toLowerCase() === "sms" && isTraiDltFeature) {
       queryParams.traiEnable = true;
     }
@@ -632,7 +628,7 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
           }
         }
       }
-
+     
       this.setState({page, templatesCount}, () => {
         queryParams.page = page;
         queryParams.perPage = this.state.perPageLimit;
@@ -674,7 +670,7 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
     }
     if (currentChannel === SMS) {
       filteredTemplates = this.filterSMSTemplates(templates);
-      isTraiDltFeature = this.checkDLTfeatureEnable();
+      isTraiDltFeature = commonUtil.hasTraiDltFeature();
     }
     const cardDataList = filteredTemplates && filteredTemplates.length ? map(filteredTemplates, (template) => {
       const templateData =
@@ -2058,7 +2054,7 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
     const isfilterContentVisisble = true;
     const isWechatEmbedded = !this.props.isFullMode && channel.toUpperCase() === WECHAT;
     const channelLowerCase = (channel || '').toLowerCase();
-    const isTraiDltFeature = this.checkDLTfeatureEnable();
+    const isTraiDltFeature = commonUtil.hasTraiDltFeature();
     const filterContent = (( isfilterContentVisisble || [WECHAT, MOBILE_PUSH].includes(this.state.channel.toUpperCase())) && <div className="action-container">
       {isfilterContentVisisble && <CapInput.Search
         className="search-text"
@@ -2275,7 +2271,6 @@ Templates.propTypes = {
   router: PropTypes.object,
   viberActions: PropTypes.object,
   facebookActions: PropTypes.object,
-  smsRegister: PropTypes.any,
 };
 
 const mapStateToProps = createStructuredSelector({

package/v2Containers/TemplatesV2/index.js

@@ -199,7 +199,7 @@ export class TemplatesV2 extends React.Component { // eslint-disable-line react/
   getTemplatesComponent(channel) {
     // const templates = this.props.Templates[`${channel}Templates`];
     let query = {};
-    const {isFullMode, messageStrategy, smsRegister} = this.props;
+    const {isFullMode, messageStrategy} = this.props;
     if (!isFullMode) {
       query = {type: 'embedded', module: 'library'};
       switch (channel) {
@@ -232,7 +232,6 @@ export class TemplatesV2 extends React.Component { // eslint-disable-line react/
           renderNewCardGrid={this.getTemplateDataForGrid}
           handlePeviewTemplate={this.props.handlePeviewTemplate}
           messageStrategy={this.props.messageStrategy}
-          smsRegister={smsRegister}
     />);
     }
   }