@capillarytech/creatives-library 7.10.9 → 7.10.11

package/v2Containers/SmsTrai/Create/tests/index.test.js

@@ -22,12 +22,14 @@ describe('Creatives SmsTraiCreate test/>', () => {
   const clearCreateResponse = jest.fn();
   const createSMSTRAITemplates = jest.fn();
   const onCreateComplete = jest.fn();
+  const onShowTemplates = jest.fn();
   const setAttribute = jest.fn();
   beforeEach(() => {
     renderedComponent = mountWithIntl(
       <SmsTraiCreate
         actions={{ clearCreateResponse, createSMSTRAITemplates }}
         onCreateComplete={onCreateComplete}
+        onShowTemplates={onShowTemplates}
       />,
     );
   });
@@ -60,6 +62,9 @@ describe('Creatives SmsTraiCreate test/>', () => {
 
   it('valid file drop', async () => {
     const event = { target: { setAttribute } };
+    createSMSTRAITemplates.mockImplementation((obj, callback) => {
+      callback();
+    })
     renderHelper(mockData.validFile);
     const dropZone = renderedComponent.find('Dropzone').props();
     await dropZone.onDrop([file]);
@@ -70,6 +75,11 @@ describe('Creatives SmsTraiCreate test/>', () => {
     );
     renderedComponent.find('a.download-issues-csv-link').props().onClick(event);
     expect(setAttribute).toHaveBeenCalledWith('download', DOWNLOAD_ISSUES_CSV);
+    renderedComponent.setProps({ isFullMode: true });
+    renderedComponent.find('button.done-button').props().onClick();
+    renderedComponent.update();
+    expect(renderedComponent).toMatchSnapshot();
+    renderedComponent.setProps({ isFullMode: false });
     renderedComponent.find('button.done-button').props().onClick();
     renderedComponent.update();
     expect(renderedComponent).toMatchSnapshot();

package/v2Containers/SmsTrai/Create/tests/mockData.js

@@ -24,7 +24,7 @@ export const mockData = {
       'CONSENT TYPE',
     ],
     [
-      "'1107160277332377515'",
+      "12345678912345678901",
       '--',
       'CAP71871_12',
       'Service-Explicit',
@@ -49,7 +49,7 @@ export const mockData = {
       '07/10/20 17:52',
       '13/10/20 21:55',
       '',
-      'Active',
+      '',
       'DUSSEHRA DEALS@VISHAL\n\nBUY1GET1 FREE\n{#var#}\n{#var#}\n{#var#}\n{#var#}\n+\n{#var#}\n{#var#}\n{#var#}\nTC',
       'Explicit',
     ],

package/v2Containers/SmsTrai/Edit/index.js

@@ -13,6 +13,9 @@ 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 CapCheckbox from '@capillarytech/cap-ui-library/CapCheckbox';
+import CapInfoNote from '@capillarytech/cap-ui-library/CapInfoNote';
 import {
   CAP_SPACE_16,
   CAP_SPACE_12,
@@ -24,12 +27,12 @@ import {
 } from '@capillarytech/cap-ui-library/styled/variables';
 import { makeSelectTemplateDetailsResponse } from '../../Sms/Edit/selectors';
 import { makeSelectMetaEntities, setInjectedTags } from '../../Cap/selectors';
-import * as actions from '../../Sms/Edit/actions';
+import * as smsEditActions 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 {
   CHARLIMIT,
   SMS,
@@ -41,9 +44,13 @@ import {
   ALL,
   LIBRARY,
 } from './constants';
+
 let varMap = {};
+let traiData = {};
+let tagValidationResponse = {};
 const { TextArea } = CapInput;
 const { CapLabelInline } = CapLabel;
+
 export const SmsTraiEdit = (props) => {
   const {
     intl,
@@ -58,6 +65,9 @@ export const SmsTraiEdit = (props) => {
     metaEntities,
     injectedTags,
     onCreateComplete,
+    isFullMode,
+    getFormSubscriptionData,
+    templateData = {},
   } = props || {};
   const { formatMessage } = intl;
   const [loading, updateLoading] = useState(true);
@@ -66,7 +76,10 @@ export const SmsTraiEdit = (props) => {
   const [tags, updateTags] = useState([]);
   const [textAreaId, updateTextAreaId] = useState();
   const [isValidationError, updateIsValidationError] = useState(false);
-  let totalVarCount = 0;
+  const [isTagValidationError, updateIsTagValidationError] = useState(false);
+  const [totalMessageLength, setTotalMessageLength] = useState(0);
+  const [isUnicodeAllowed, updateIsUnicodeAllowed] = useState(true);
+  const [showMsgLengthNote, updateshowMsgLengthNote] = useState(false);
   const SMSTraiFooter = styled.div`
     background-color: ${CAP_WHITE};
     position: fixed;
@@ -85,32 +98,38 @@ 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(() => {
-    if (templateDetails && !isEmpty(templateDetails)) {
-      let msg = get(templateDetails, `versions.base.sms-editor`);
+    traiData = isFullMode ? templateDetails : templateData;
+    if (traiData && !isEmpty(traiData)) {
+      let msg = get(traiData, `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#}',
@@ -126,44 +145,56 @@ export const SmsTraiEdit = (props) => {
           break;
         }
       }
-
-      const filteredTemplateMessageArray = templateMessageArray.filter(
-        (i) => i.trim() !== '',
-      );
+      const filteredTemplateMessageArray = templateMessageArray.filter((i) => i === 0 || i);
       updateTempMsgArray(filteredTemplateMessageArray);
       //stop spinner
       updateLoading(false);
     }
-  }, [templateDetails]);
+  }, [templateDetails || templateData]);
 
+  //compute/get varMapped and updated-sms-editor
   useEffect(() => {
     if (tempMsgArray.length !== 0) {
-      //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`),
-        );
+      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();
+        }
       } else {
-        //computing varMap for first edit
-        let counter = 1;
-        for (let i = 0; i < tempMsgArray.length; i++) {
+        //computing and setting varMap for first edit
+        let varCount = 1;
+        let horizontalSpaceCount = 0;
+        for (let i = 0; i < tempMsgArray.length; i += 1) {
           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}`] = {
+              tempMsgArray[i === tempMsgArray.length - 1 ? -1 : i + 1];
+            if (nextElem?.replace(/[^\S\r\n]/gm, '') === '') {
+              horizontalSpaceCount += 1;
+            }
+            if (tempMsgArray[i] !== nextElem && nextElem?.replace(/[^\S\r\n]/gm, '') !== '') {
+              varMap[`${tempMsgArray[i]}_${(i - varCount - horizontalSpaceCount) + 1}`] = {
                 data: '',
-                count: counter,
+                count: varCount,
               };
-              counter = 1;
+              varCount = 1;
+              horizontalSpaceCount = 0;
             } else {
-              counter++;
+              varCount += 1;
             }
           }
         }
         setUpdatedSmsEditor(tempMsgArray);
       }
+      // calcaulate message length here
+      calculateTotalMessageLength();
     }
   }, [tempMsgArray]);
 
@@ -176,6 +207,44 @@ 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.unsupportedTags.length > 0,
+      );
+    }
+  }, [updatedSmsEditor, tags]);
+
+  const computeUpdatedSmsEditor = () => {
+    const arr = [...tempMsgArray];
+    const varMapKeys = Object.keys(varMap)?.map((key) => Number(key.slice(8)))?.sort((a, b) => a - b) || [];
+    for (const key in varMap) {
+      const _id = Number(key.slice(8)); //Eg: -> extracting index 1 from keys like {#var# } _1
+      const loopIndex = varMapKeys[varMapKeys?.indexOf(_id) + 1] || arr.length;
+      for (let i = _id; i < loopIndex; i += 1) {
+        if (i === _id) {
+          arr[i] = varMap[key].data; //data for first #var# of the textbox
+        } else if (arr[i] === SMS_TRAI_VAR) {
+          arr[i] = '';//'' for remaining #var# of a textbox
+        }
+      }
+    }
+    setUpdatedSmsEditor(arr);
+  };
+
   //Saving on done start
   const onUpdateTemplateComplete = (editResponse, errorMsg) => {
     if (editResponse?.templateId) {
@@ -191,16 +260,30 @@ export const SmsTraiEdit = (props) => {
     }
   };
   const onDoneCallback = () => {
-    if (updatedSmsEditor.includes(SMS_TRAI_VAR)) {
+    if (updatedSmsEditor.includes(SMS_TRAI_VAR) && !isFullMode) {
       //during save textbox should not be empty
       updateIsValidationError(true);
     } else {
       //start spinner
       updateLoading(true);
-      templateDetails.versions.base['var-mapped'] = varMap;
-      templateDetails.versions.base['updated-sms-editor'] = updatedSmsEditor;
-      templateDetails.versions.history = [templateDetails.versions.base];
-      actions.editTemplate(templateDetails, onUpdateTemplateComplete);
+      const traiVersions = traiData.versions || {};
+      traiVersions.base = {
+        ...traiVersions.base,
+        'var-mapped': varMap,
+        'updated-sms-editor': updatedSmsEditor,
+        'unicode-validity': isUnicodeAllowed,
+      };
+      traiVersions.history = [traiVersions.base];
+      if (isFullMode) {
+        actions.editTemplate(traiData, onUpdateTemplateComplete);
+      } else {
+        getFormSubscriptionData({
+          value: traiData.versions,
+          _id: params && params.id,
+          validity: true,
+          type: SMS,
+        });
+      }
     }
   };
   //Saving on done end
@@ -209,17 +292,16 @@ export const SmsTraiEdit = (props) => {
   useEffect(() => {
     let tag =
       metaEntities && metaEntities.tags ? metaEntities.tags.standard : [];
-    if (
-      location.query.type === EMBEDDED &&
-      location.query.module === LIBRARY &&
-      !getDefaultTags
-    ) {
+    const { type, module } = location.query || {};
+    if (type === EMBEDDED && 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,
@@ -227,28 +309,26 @@ export const SmsTraiEdit = (props) => {
         (data || '').toLowerCase() === ALL
           ? DEFAULT
           : (data || '').toLowerCase(),
-      embedded: location.query.type === EMBEDDED ? location.query.type : FULL,
+      embedded: isEmbedded ? type : FULL,
     };
     globalActions.fetchSchemaForEntity(query);
   };
 
   const onTagSelect = (data) => {
     if (textAreaId && varMap && updatedSmsEditor) {
-      const tempArr = [...updatedSmsEditor];
+      const arr = [...updatedSmsEditor];
+      const varMapKeys = Object.keys(varMap)?.map((key) => Number(key.slice(8)))?.sort((a, b) => a - b) || [];
+      const loopIndex = varMapKeys[varMapKeys?.indexOf(textAreaId) + 1] || arr.length;
       //when trying to insert tag in empty textarea,{#var#} is replaced with "" and then tag is added
-      if (tempArr[textAreaId] === SMS_TRAI_VAR) {
-        for (
-          let i = 0;
-          i < varMap[`${SMS_TRAI_VAR}_${textAreaId}`].count;
-          i++
-        ) {
-          tempArr[textAreaId + i] = '';
+      for (let i = textAreaId; i < loopIndex; i += 1) {
+        if (arr[i] === SMS_TRAI_VAR) {
+          arr[i] = '';
         }
       }
-      const messageData = `${tempArr[textAreaId]} {{${data}}}`;
-      tempArr[textAreaId] = messageData;
+      const messageData = `${arr[textAreaId]}{{${data}}}`;
+      arr[textAreaId] = messageData;
       varMap[`${SMS_TRAI_VAR}_${textAreaId}`].data = messageData;
-      setUpdatedSmsEditor(tempArr);
+      setUpdatedSmsEditor(arr);
     }
   };
   //setting the id of currently selected text area, is used onTagSelect
@@ -259,23 +339,34 @@ export const SmsTraiEdit = (props) => {
 
   // on change event of Text Area
   const textAreaValueChange = ({ target: { value, id } }) => {
-    id = Number(id);
+    const _id = Number(id);
+    const _value = value.replace(/[\r\n]+/gm, "");//skip newlines eg: '/n'
     const arr = [...updatedSmsEditor];
-    varMap[`${SMS_TRAI_VAR}_${id}`].data = value;
-    if (value === '') {
-      for (let i = 0; i < varMap[`${SMS_TRAI_VAR}_${id}`].count; i++) {
-        arr[id + i] = SMS_TRAI_VAR;
+    const selectedVarCount = varMap[`${SMS_TRAI_VAR}_${_id}`].count;
+    const varMapKeys = Object.keys(varMap)?.map((key) => Number(key.slice(8)))?.sort((a, b) => a - b) || [];
+    const loopIndex = varMapKeys[varMapKeys?.indexOf(_id) + 1] || arr.length;
+
+    //assign entered value to varMap
+    varMap[`${SMS_TRAI_VAR}_${_id}`].data = _value;
+    //based on entered value update updatedSmsEditor
+    if (_value === '') {
+      for (let i = _id; i < loopIndex; i += 1) {
+        if (i === _id || arr[i] === '') {
+          arr[i] = SMS_TRAI_VAR;
+        }
       }
     } else {
-      for (let i = 0; i < varMap[`${SMS_TRAI_VAR}_${id}`].count; i++) {
-        if (i === 0) {
-          arr[id] = varMap[`${SMS_TRAI_VAR}_${id}`].data;
-        } else {
-          arr[id + i] = '';
+      for (let i = _id; i < loopIndex; i += 1) {
+        if (i === _id) {
+          arr[i] = varMap[`${SMS_TRAI_VAR}_${_id}`].data;
+        } else if (arr[i] === SMS_TRAI_VAR) {
+          arr[i] = '';
         }
       }
     }
     setUpdatedSmsEditor(arr);
+    calculateTotalMessageLength();
+    updateshowMsgLengthNote(arr[_id]?.length > selectedVarCount * CHARLIMIT);
   };
 
   const textAreaValue = (idValue) => {
@@ -285,9 +376,8 @@ export const SmsTraiEdit = (props) => {
         updatedSmsEditor[idValue] !== SMS_TRAI_VAR
       ) {
         return updatedSmsEditor[idValue];
-      } else {
-        return '';
       }
+      return '';
     }
     return '';
   };
@@ -308,20 +398,20 @@ export const SmsTraiEdit = (props) => {
         </CapHeading>
       );
     }
+    return <></>;
   };
 
   const renderedContent = () => {
     const renderArray = [];
     if (tempMsgArray?.length !== 0) {
       let varCount = 0;
-      tempMsgArray.map((elem, index) => {
+      tempMsgArray.forEach((elem, index) => {
         let prevElem = '';
+        prevElem =
+          tempMsgArray[[index === 0 ? -1 : index - 1]];
         if (elem.includes(SMS_TRAI_VAR)) {
-          prevElem =
-            tempMsgArray[[index === 0 ? tempMsgArray.length - 1 : index - 1]];
-          varCount++;
-          totalVarCount++;
-          if (prevElem !== SMS_TRAI_VAR) {
+          varCount += 1;
+          if (prevElem !== SMS_TRAI_VAR && prevElem?.replace(/[^\S\r\n]/gm, '') !== '') {
             renderArray.push(
               <TextArea
                 id={index}
@@ -345,18 +435,18 @@ export const SmsTraiEdit = (props) => {
             renderArray.push(capHeading(index, varCount));
             varCount = 0;
           }
-        } else if (varCount > 0) {
+        } else if (varCount > 0 && elem.replace(/[^\S\r\n]/gm, '') !== '') {
           renderArray.push(
             capHeading(index, varCount),
             <CapHeading
               key={`${elem}${index}`}
-              style={{ margin: `${CAP_SPACE_16} 0` }}
+              style={{ margin: `${CAP_SPACE_16} 0`, clear: 'both' }}
             >
               {elem}
             </CapHeading>,
           );
           varCount = 0;
-        } else {
+        } else if (elem.replace(/[^\S\r\n]/gm, '') !== '') {
           renderArray.push(
             <CapHeading
               key={`${elem}${index}`}
@@ -371,42 +461,88 @@ 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#}' 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>
-    );
+  //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 varLen = calculateLenForTextBox();
+    const totalMsgLen = msgLenWithoutVar?.length + varLen;
+    setTotalMessageLength(totalMsgLen);
+  };
+
+  const calculateLenForTextBox = () => {
+    let countVarChar = 0;
+    Object.keys(varMap).forEach((i) => {
+      if (varMap[i].data) {
+        countVarChar += varMap[i].data?.length;
+      } else {
+        countVarChar += varMap[i].count * CHARLIMIT;
+      }
+    });
+    return countVarChar;
+  };
+
+  const tagValidationErrorMessage = () => {
+    const { unsupportedTags = [] } = tagValidationResponse;
+    let tagError = '';
+    if (unsupportedTags.length > 0) {
+      tagError = formatMessage(messages.unsupportedTagsValidationError, {
+        unsupportedTags,
+      });
+    }
+    return <CapError>{tagError}</CapError>;
+  };
+
+  const disablehandler = () => {
+    if (traiData && !isEmpty(traiData)) {
+      const msg = get(traiData, `versions.base.sms-editor`, '');
+      const index = msg.search(SMS_TRAI_VAR);
+      if (index === -1) {
+        return true;
+      }
+      return false;
+    }
+    return true;
+  };
+
+  const unicodeHandler = ({ target: { checked } }) => {
+    updateIsUnicodeAllowed(checked);
   };
 
   return (
     <>
       <CapSpin spinning={loading}>
         <CapRow>
-          {templateDetails && !isEmpty(templateDetails) && (
+          {traiData && !isEmpty(traiData) && (
             <TraiEditTemplateDetails>
               <CapLabelInline type="label1">
                 {formatMessage(messages.templateLabel)}
               </CapLabelInline>
               <CapLabelInline type="label2">
-                {templateDetails.versions.base.template_name}
+                {get(traiData, `versions.base.template_name`, '')}
               </CapLabelInline>
+
               <CapLabelInline type="label1">
                 {formatMessage(messages.traiEditSeperator)}
               </CapLabelInline>
+
               <CapLabelInline type="label1">
                 {formatMessage(messages.senderIdlabel)}
               </CapLabelInline>
               <CapLabelInline type="label2">
-                {templateDetails.versions.base.header}
+                {[...get(traiData, `versions.base.header`, [])].join(', ')}
               </CapLabelInline>
             </TraiEditTemplateDetails>
           )}
@@ -423,6 +559,7 @@ export const SmsTraiEdit = (props) => {
                     tags={tags || []}
                     onContextChange={handleOnTagsContextChange}
                     injectedTags={injectedTags || {}}
+                    hidePopover={disablehandler()}
                   />
                 }
               />
@@ -437,17 +574,28 @@ export const SmsTraiEdit = (props) => {
               {renderedContent()}
             </CapRow>
             <CapRow>{smsLengthForVar()}</CapRow>
+            {isTagValidationError && tagValidationErrorMessage()}
+            <CapCheckbox onChange={unicodeHandler} checked={isUnicodeAllowed} disabled={disablehandler()}>
+              {formatMessage(messages.unicodeLabel)}
+            </CapCheckbox>
+            {showMsgLengthNote && <CapInfoNote message={<FormattedMessage {...messages.msgLengthNote} />} />}
             <div style={{ marginBottom: '100px' }} />
           </CapColumn>
           <CapColumn span={10}>
             <TemplatePreview
               channel={SMS}
-              content={[updatedSmsEditor.join('')]}
+              content={updatedSmsEditor.join('')}
+              unicodeEnabled={isUnicodeAllowed}
+              charCounterEnabled
             />
           </CapColumn>
         </CapRow>
         <SMSTraiFooter>
-          <CapButton onClick={onDoneCallback} className="create-msg">
+          <CapButton
+            onClick={onDoneCallback}
+            className="create-msg"
+            disabled={isTagValidationError}
+          >
             <FormattedMessage {...messages.saveButtonLabel} />
           </CapButton>
           <CapButton
@@ -469,11 +617,9 @@ const mapStateToProps = createStructuredSelector({
   injectedTags: setInjectedTags(),
 });
 
-const mapDispatchToProps = (dispatch) => {
-  return {
-    actions: bindActionCreators(actions, dispatch),
-  };
-};
+const mapDispatchToProps = (dispatch) => ({
+  actions: bindActionCreators(smsEditActions, dispatch),
+});
 
 export default withCreatives({
   WrappedComponent: injectIntl(SmsTraiEdit),

package/v2Containers/SmsTrai/Edit/messages.js

@@ -29,7 +29,7 @@ export default defineMessages({
   },
   textAreaCounts: {
     id: `${prefix}.textAreaCounts`,
-    defaultMessage: '{varCounts} Variables {var}: max. {charCounts} characters',
+    defaultMessage: '{varCounts} variable{varCounts, plural, one {} other {s}} {var}: max. {charCounts} characters',
   },
   totalCharacters: {
     id: `${prefix}.totalCharacters`,
@@ -55,4 +55,17 @@ export default defineMessages({
     id: `${prefix}.senderIdlabel`,
     defaultMessage: 'Sender ID',
   },
+  unsupportedTagsValidationError: {
+    id: `${prefix}.unsupportedTagsValidationError`,
+    defaultMessage:
+      'Unsupported tags: {unsupportedTags}. Please remove them from this message.',
+  },
+  unicodeLabel: {
+    id: `${prefix}.unicodeLabel`,
+    defaultMessage: 'Allow unicode characters',
+  },
+  msgLengthNote: {
+    id: `${prefix}.msgLengthNote`,
+    defaultMessage: 'Only 30 characters are allowed per variable {#var#} field. In case the field resolves to more than 30 characters the message is bound to fail. Hence will not be sent by the Capillary system.',
+  },
 });