@capillarytech/creatives-library 7.10.10 → 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

@@ -15,6 +15,7 @@ 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,
@@ -32,7 +33,6 @@ 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,
@@ -78,7 +78,8 @@ export const SmsTraiEdit = (props) => {
   const [isValidationError, updateIsValidationError] = useState(false);
   const [isTagValidationError, updateIsTagValidationError] = useState(false);
   const [totalMessageLength, setTotalMessageLength] = useState(0);
-  const [isUnicodeAllowed, updateIsUnicodeAllowed] = useState(false);
+  const [isUnicodeAllowed, updateIsUnicodeAllowed] = useState(true);
+  const [showMsgLengthNote, updateshowMsgLengthNote] = useState(false);
   const SMSTraiFooter = styled.div`
     background-color: ${CAP_WHITE};
     position: fixed;
@@ -128,7 +129,7 @@ export const SmsTraiEdit = (props) => {
   useEffect(() => {
     traiData = isFullMode ? templateDetails : templateData;
     if (traiData && !isEmpty(traiData)) {
-      let msg = get(traiData, `versions.base.sms-editor`);
+      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#}',
@@ -144,14 +145,8 @@ export const SmsTraiEdit = (props) => {
           break;
         }
       }
-      const filteredTemplateMessageArray = templateMessageArray.filter(
-        (i) => i.trim() !== '',
-      );
+      const filteredTemplateMessageArray = templateMessageArray.filter((i) => i === 0 || i);
       updateTempMsgArray(filteredTemplateMessageArray);
-      //updating unicode-validity
-      updateIsUnicodeAllowed(
-        get(traiData, `versions.base.unicode-validity`, false),
-      );
       //stop spinner
       updateLoading(false);
     }
@@ -175,19 +170,24 @@ export const SmsTraiEdit = (props) => {
         }
       } else {
         //computing and setting varMap for first edit
-        let counter = 1;
+        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 += 1;
+              varCount += 1;
             }
           }
         }
@@ -229,19 +229,20 @@ export const SmsTraiEdit = (props) => {
   }, [updatedSmsEditor, tags]);
 
   const computeUpdatedSmsEditor = () => {
-    const updatedSmsArray = [...tempMsgArray];
+    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 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
+      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(updatedSmsArray);
+    setUpdatedSmsEditor(arr);
   };
 
   //Saving on done start
@@ -315,21 +316,19 @@ export const SmsTraiEdit = (props) => {
 
   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 += 1
-        ) {
-          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
@@ -341,23 +340,33 @@ export const SmsTraiEdit = (props) => {
   // on change event of Text Area
   const textAreaValueChange = ({ target: { value, 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 += 1) {
-        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 += 1) {
-        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) => {
@@ -398,11 +407,11 @@ export const SmsTraiEdit = (props) => {
       let varCount = 0;
       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 += 1;
-          if (prevElem !== SMS_TRAI_VAR) {
+          if (prevElem !== SMS_TRAI_VAR && prevElem?.replace(/[^\S\r\n]/gm, '') !== '') {
             renderArray.push(
               <TextArea
                 id={index}
@@ -426,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}`}
@@ -468,9 +477,8 @@ export const SmsTraiEdit = (props) => {
     const msgLenWithoutVar = tempMsgArray
       ?.filter((i) => i !== SMS_TRAI_VAR)
       .join('');
-    const charDetails = updateCharCount(msgLenWithoutVar, false);
     const varLen = calculateLenForTextBox();
-    const totalMsgLen = charDetails.chars_used + varLen;
+    const totalMsgLen = msgLenWithoutVar?.length + varLen;
     setTotalMessageLength(totalMsgLen);
   };
 
@@ -478,14 +486,14 @@ export const SmsTraiEdit = (props) => {
     let countVarChar = 0;
     Object.keys(varMap).forEach((i) => {
       if (varMap[i].data) {
-        const charDetails = updateCharCount(varMap[i].data, false);
-        countVarChar += charDetails.chars_used;
+        countVarChar += varMap[i].data?.length;
       } else {
         countVarChar += varMap[i].count * CHARLIMIT;
       }
     });
     return countVarChar;
   };
+
   const tagValidationErrorMessage = () => {
     const { unsupportedTags = [] } = tagValidationResponse;
     let tagError = '';
@@ -497,6 +505,18 @@ export const SmsTraiEdit = (props) => {
     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);
   };
@@ -511,7 +531,7 @@ export const SmsTraiEdit = (props) => {
                 {formatMessage(messages.templateLabel)}
               </CapLabelInline>
               <CapLabelInline type="label2">
-                {traiData.versions.base.template_name}
+                {get(traiData, `versions.base.template_name`, '')}
               </CapLabelInline>
 
               <CapLabelInline type="label1">
@@ -522,7 +542,7 @@ export const SmsTraiEdit = (props) => {
                 {formatMessage(messages.senderIdlabel)}
               </CapLabelInline>
               <CapLabelInline type="label2">
-                {traiData.versions.base.header.join(', ')}
+                {[...get(traiData, `versions.base.header`, [])].join(', ')}
               </CapLabelInline>
             </TraiEditTemplateDetails>
           )}
@@ -539,6 +559,7 @@ export const SmsTraiEdit = (props) => {
                     tags={tags || []}
                     onContextChange={handleOnTagsContextChange}
                     injectedTags={injectedTags || {}}
+                    hidePopover={disablehandler()}
                   />
                 }
               />
@@ -554,9 +575,10 @@ export const SmsTraiEdit = (props) => {
             </CapRow>
             <CapRow>{smsLengthForVar()}</CapRow>
             {isTagValidationError && tagValidationErrorMessage()}
-            <CapCheckbox onChange={unicodeHandler} checked={isUnicodeAllowed}>
+            <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}>
@@ -564,7 +586,7 @@ export const SmsTraiEdit = (props) => {
               channel={SMS}
               content={updatedSmsEditor.join('')}
               unicodeEnabled={isUnicodeAllowed}
-              charCounterEnabled={true}
+              charCounterEnabled
             />
           </CapColumn>
         </CapRow>

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,11 +55,6 @@ 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:
@@ -69,4 +64,8 @@ export default defineMessages({
     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.',
+  },
 });