@capillarytech/creatives-library 7.10.5 → 7.10.7

package/package.json

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

package/v2Containers/CreativesContainer/index.js

@@ -177,15 +177,15 @@ class Creatives extends React.Component {
               template_id = '',
               header = '',
               template_name = '',
-              ['sms-editor']: smsEditor = '',
-              ['var-mapped']: varMapped = {},
+              'sms-editor': smsEditor = '',
+              'var-mapped': varMapped = {},
             } = templateData;
             formData = {
               template_id,
               header,
               template_name,
               'sms-editor': smsEditor,
-              'var-mapped': varMapped
+              'var-mapped': varMapped,
             };
           } else {
             formData = {
@@ -380,8 +380,8 @@ class Creatives extends React.Component {
           const { isFullMode, smsRegister } = this.props;
           const isTraiDlt = commonUtil.isTraiDLTEnable(isFullMode, smsRegister);
           const {
-            ['updated-sms-editor']: updatedSmsEditor,
-            ['sms-editor']: smsEditor,
+            'updated-sms-editor': updatedSmsEditor,
+            'sms-editor': smsEditor,
           } = smsBase;
           if (!isTraiDlt) {
             templateData.messageBody = smsEditor;
@@ -391,14 +391,14 @@ class Creatives extends React.Component {
               template_id,
               template_name,
               header,
-              ['var-mapped']: varMapped,
+              'var-mapped': varMapped,
             } = smsBase;
             templateData.templateConfigs = {
               templateId: template_id,
               templateName: template_name,
               template: smsEditor,
-              registeredSenderIds: header?.split(','),
-              templateVariableMapping: varMapped
+              registeredSenderIds: header,
+              templateVariableMapping: varMapped,
             };
           }
         }

package/v2Containers/SmsTrai/Create/index.js

@@ -95,13 +95,13 @@ export const SmsTraiCreate = (props) => {
     const numbersOnly = /^\d+$/;
     let isError = false;
     senderIdString.split(',').forEach((value) => {
-      value = value.trim();
-      if (value) {
-        if (value.length !== 6) {
+      const _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 +119,7 @@ export const SmsTraiCreate = (props) => {
       APPROVAL_STATUS,
     );
 
-    for (let row = 1; row < transformedResults.length; row++) {
+    for (let row = 1; row < transformedResults.length; row += 1) {
       const errorArray = [];
       const headerErrorArray = [];
       const approvalErrorArray = [];
@@ -209,7 +209,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++) {
+      for (let i = 0; i < TEMPLATE_ID_ALIASES.length; i += 1) {
         if (cols.includes(TEMPLATE_ID_ALIASES[i])) {
           templateIdAliasPresent.push(TEMPLATE_ID_ALIASES[i]);
         }
@@ -223,7 +223,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++) {
+      for (let i = 0; i < TEMPLATE_MESSAGE_ALIASES.length; i += 1) {
         if (cols.includes(TEMPLATE_MESSAGE_ALIASES[i])) {
           templateMessageAliasPresent.push(TEMPLATE_MESSAGE_ALIASES[i]);
         }
@@ -311,7 +311,7 @@ export const SmsTraiCreate = (props) => {
             });
           }
           //adding validated rejection reason column to original results
-          for (let i = 0; i < validatedResults.length; i++) {
+          for (let i = 0; i < validatedResults.length; i += 1) {
             results.data[i].push(validatedResults[i][6]);
           }
           updateSaveTemplate(true);
@@ -361,7 +361,7 @@ export const SmsTraiCreate = (props) => {
 
     if (rejectionIndex !== -1) {
       tempArray.push(fileData[0]);
-      for (let row = 1; row < fileData.length; row++) {
+      for (let row = 1; row < fileData.length; row += 1) {
         if (fileData[row][rejectionIndex]) {
           tempArray.push(fileData[row]);
         }
@@ -397,16 +397,15 @@ export const SmsTraiCreate = (props) => {
     tempArray.push(fileData[0]);
 
     // filter out non rejected rows
-    for (let row = 1; row < fileData.length; row++) {
+    for (let row = 1; row < fileData.length; row += 1) {
       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++) {
+    for (let i = 0; i < cols.length; i += 1) {
       if (
         SAVED_COLUMNS.includes(cols[i]) ||
         HEADER_ALIASES.includes(cols[i]) ||
@@ -441,6 +440,7 @@ export const SmsTraiCreate = (props) => {
         obj['unicode-validity'] = false;
         obj['updated-sms-editor'] = '';
         obj['var-mapped'] = {};
+        obj.header = obj.header.split(',');
         const history = obj;
         history.tabKey = 1;
         savedData.push({

package/v2Containers/SmsTrai/Edit/index.js

@@ -13,6 +13,7 @@ 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,
@@ -24,13 +25,13 @@ 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 { updateCharCount } from '../../../utils/smsCharCountV2';
 import {
   CHARLIMIT,
   SMS,
@@ -42,10 +43,13 @@ import {
   ALL,
   LIBRARY,
 } from './constants';
+
 let varMap = {};
 let traiData = {};
+let tagValidationResponse = {};
 const { TextArea } = CapInput;
 const { CapLabelInline } = CapLabel;
+
 export const SmsTraiEdit = (props) => {
   const {
     intl,
@@ -72,7 +76,7 @@ export const SmsTraiEdit = (props) => {
   const [textAreaId, updateTextAreaId] = useState();
   const [isValidationError, updateIsValidationError] = useState(false);
   const [isTagValidationError, updateIsTagValidationError] = useState(false);
-  let totalVarCount = 0;
+  const [totalMessageLength, setTotalMessageLength] = useState(0);
   const SMSTraiFooter = styled.div`
     background-color: ${CAP_WHITE};
     position: fixed;
@@ -91,6 +95,7 @@ export const SmsTraiEdit = (props) => {
       margin-right: ${CAP_SPACE_12};
     }
   `;
+
   useEffect(() => {
     //fetching tags
     const { type, module } = location.query || {};
@@ -105,11 +110,12 @@ export const SmsTraiEdit = (props) => {
       query.context = getDefaultTags;
     }
     globalActions.fetchSchemaForEntity(query);
-
+    //fetching template data in fullmode
     const { id } = params || {};
     if (id) {
       actions.getTemplateDetails(id);
     }
+    //cleanup code
     return () => {
       actions.resetEditTemplate();
       varMap = {};
@@ -136,7 +142,6 @@ export const SmsTraiEdit = (props) => {
           break;
         }
       }
-
       const filteredTemplateMessageArray = templateMessageArray.filter(
         (i) => i.trim() !== '',
       );
@@ -146,14 +151,15 @@ export const SmsTraiEdit = (props) => {
     }
   }, [templateDetails || templateData]);
 
+  //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 = '',
+        'var-mapped': varMapped = {},
+        'updated-sms-editor': traiSmsEditor = '',
       } = traiBase;
-      //if varMapped and updated-sms-editor is already present on non first edits
+      //if varMap and updated-sms-editor is already present on non first edits,use those values
       if (!isEmpty(varMapped)) {
         varMap = cloneDeep(varMapped);
         if (isFullMode) {
@@ -162,25 +168,27 @@ export const SmsTraiEdit = (props) => {
           computeUpdatedSmsEditor();
         }
       } else {
-        //computing varMap for first edit
+        //computing and setting varMap for first edit
         let counter = 1;
-        for (let i = 0; i < tempMsgArray.length; i++) {
+        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}`] = {
+              varMap[`${tempMsgArray[i]}_${(i - counter) + 1}`] = {
                 data: '',
                 count: counter,
               };
               counter = 1;
             } else {
-              counter++;
+              counter += 1;
             }
           }
         }
         setUpdatedSmsEditor(tempMsgArray);
       }
+      // calcaulate message length here
+      calculateTotalMessageLength();
     }
   }, [tempMsgArray]);
 
@@ -193,11 +201,30 @@ 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) {
-      let index = Number(key.slice(8)); //Eg: -> extracting index 1 from keys like {#var# } _1
-      for (let i = 0; i < varMap[key].count; i++) {
+      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
@@ -224,7 +251,7 @@ 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 {
@@ -237,14 +264,16 @@ export const SmsTraiEdit = (props) => {
         'updated-sms-editor': updatedSmsEditor,
       };
       traiVersions.history = [traiVersions.base];
-      isFullMode
-        ? actions.editTemplate(traiData, onUpdateTemplateComplete)
-        : getFormSubscriptionData({
-            value: traiData.versions,
-            _id: params && params.id,
-            validity: true,
-            type: SMS,
-          });
+      if (isFullMode) {
+        actions.editTemplate(traiData, onUpdateTemplateComplete);
+      } else {
+        getFormSubscriptionData({
+          value: traiData.versions,
+          _id: params && params.id,
+          validity: true,
+          type: SMS,
+        });
+      }
     }
   };
   //Saving on done end
@@ -283,7 +312,7 @@ export const SmsTraiEdit = (props) => {
         for (
           let i = 0;
           i < varMap[`${SMS_TRAI_VAR}_${textAreaId}`].count;
-          i++
+          i += 1
         ) {
           tempArr[textAreaId + i] = '';
         }
@@ -302,37 +331,24 @@ export const SmsTraiEdit = (props) => {
 
   // on change event of Text Area
   const textAreaValueChange = ({ target: { value, id } }) => {
-    id = Number(id);
+    const _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++) {
-        arr[id + i] = SMS_TRAI_VAR;
+      for (let i = 0; i < varMap[`${SMS_TRAI_VAR}_${_id}`].count; i += 1) {
+        arr[_id + i] = SMS_TRAI_VAR;
       }
     } else {
-      for (let i = 0; i < varMap[`${SMS_TRAI_VAR}_${id}`].count; i++) {
+      for (let i = 0; i < varMap[`${SMS_TRAI_VAR}_${id}`].count; i += 1) {
         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);
-    if (!isFullMode) {
-      const tagValidationResponse =
-        validateTags({
-          content: arr.join(''),
-          tagsParam: tags,
-          injectedTagsParams: injectedTags,
-          location,
-          tagModule: getDefaultTags,
-        }) || {};
-      if (!tagValidationResponse.valid) {
-        updateIsTagValidationError(true);
-        console.log(tagValidationResponse);
-      }
-    }
+    calculateTotalMessageLength();
   };
 
   const textAreaValue = (idValue) => {
@@ -342,9 +358,8 @@ export const SmsTraiEdit = (props) => {
         updatedSmsEditor[idValue] !== SMS_TRAI_VAR
       ) {
         return updatedSmsEditor[idValue];
-      } else {
-        return '';
       }
+      return '';
     }
     return '';
   };
@@ -365,19 +380,19 @@ 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 = '';
         if (elem.includes(SMS_TRAI_VAR)) {
           prevElem =
             tempMsgArray[[index === 0 ? tempMsgArray.length - 1 : index - 1]];
-          varCount++;
-          totalVarCount++;
+          varCount += 1;
           if (prevElem !== SMS_TRAI_VAR) {
             renderArray.push(
               <TextArea
@@ -428,20 +443,52 @@ export const SmsTraiEdit = (props) => {
     return renderArray;
   };
 
-  // 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>
+
+  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>;
   };
 
   return (
@@ -456,14 +503,16 @@ export const SmsTraiEdit = (props) => {
               <CapLabelInline type="label2">
                 {traiData.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}
+                {traiData.versions.base.header.join(', ')}
               </CapLabelInline>
             </TraiEditTemplateDetails>
           )}
@@ -494,6 +543,7 @@ export const SmsTraiEdit = (props) => {
               {renderedContent()}
             </CapRow>
             <CapRow>{smsLengthForVar()}</CapRow>
+            {isTagValidationError && tagValidationErrorMessage()}
             <div style={{ marginBottom: '100px' }} />
           </CapColumn>
           <CapColumn span={10}>
@@ -504,7 +554,11 @@ export const SmsTraiEdit = (props) => {
           </CapColumn>
         </CapRow>
         <SMSTraiFooter>
-          <CapButton onClick={onDoneCallback} className="create-msg">
+          <CapButton
+            onClick={onDoneCallback}
+            className="create-msg"
+            disabled={isTagValidationError}
+          >
             <FormattedMessage {...messages.saveButtonLabel} />
           </CapButton>
           <CapButton
@@ -526,11 +580,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

@@ -55,4 +55,14 @@ 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.',
+  },
 });