#2328: validate sms parts (#2335)

* Fix sms prompt validation when there are sms parts

Author: anaPerezGhiglia

assets/js/components/questionnaires/SmsPrompt.jsx

@@ -50,24 +50,36 @@ class SmsPrompt extends Component {
     return joinSmsPieces(this.allInputs.map((x) => x.getText() || ""))
   }
 
+  filterErrorsForPart(errors, index) {
+    const partErrorPrefix = `[${index}]`
+    return errors &&
+      errors
+      .flat()
+      // We are interested only in the errors that
+      // match with the sms part index
+      .filter(error => error.startsWith(partErrorPrefix))
+      .map(error => {
+        // We remove the part prefix
+        const errorMessage = error.split(partErrorPrefix)[1]
+        return [errorMessage]
+      })
+  }
+
   renderSmsInput(total, index, value) {
     let { inputErrors, readOnly, fixedEndLength, label, t } = this.props
-
-    const shouldDisplayErrors = value == this.props.originalValue
-
-    let textBelow = ""
-    if (limitExceeded(value)) {
-      textBelow = k("Use SHIFT+ENTER to split in multiple parts")
-    }
+    const last = index + 1 == total
+    const first = index == 0
+    const textBelow = limitExceeded(value) ? k("Use SHIFT+ENTER to split in multiple parts") : ""
 
     if (!label) label = t("SMS message")
 
-    const labelComponent = total == 1 ? label : `${label} (part ${index + 1})`
-    const last = index + 1 == total
-    const fixedLength = last ? fixedEndLength : null
+    if (total > 1){
+      label = `${label} (part ${index + 1})`
+      inputErrors = this.filterErrorsForPart(inputErrors, index)
+    }
 
     let autocompleteProps = {}
-    if (index == 0) {
+    if (first) {
       autocompleteProps = {
         autocomplete: this.props.autocomplete,
         autocompleteGetData: this.props.autocompleteGetData,
@@ -78,15 +90,15 @@ class SmsPrompt extends Component {
     const inputComponent = (
       <div>
         <Draft
-          label={labelComponent}
+          label={label}
           value={value}
           readOnly={readOnly}
-          errors={shouldDisplayErrors && map(inputErrors, (error) => t(...error))}
+          errors={map(inputErrors, (error) => t(...error))}
           textBelow={textBelow}
           onSplit={(caretIndex) => this.splitPiece(caretIndex, index)}
           onBlur={(e) => this.onBlur()}
           characterCounter
-          characterCounterFixedLength={fixedLength}
+          characterCounterFixedLength={last ? fixedEndLength : null}
           plainText
           ref={(ref) => {
             if (ref) {
@@ -97,7 +109,7 @@ class SmsPrompt extends Component {
         />
       </div>
     )
-    if (total <= 1 || index == 0) {
+    if (first) {
       return (
         <div className="row" key={index}>
           <div className="col s12">{inputComponent}</div>
@@ -129,6 +141,7 @@ class SmsPrompt extends Component {
     this.allInputs = []
 
     const smsPieces = splitSmsText(value)
+
     const inputs = smsPieces.map((piece, index) => {
       return this.renderSmsInput(smsPieces.length, index, piece)
     })

assets/js/reducers/questionnaire.validation.js

@@ -1,5 +1,5 @@
 // @flow
-import { getStepPrompt, newStepPrompt, newIvrPrompt } from "../step"
+import { getStepPrompt, newStepPrompt, newIvrPrompt, smsSplitSeparator } from "../step"
 import { hasSections, countRelevantSteps } from "./questionnaire"
 
 const k = (...args: any) => args
@@ -204,6 +204,12 @@ const validateSmsLangPrompt = (
     addError(context, `${path}.sms`, k("SMS prompt must not be blank"), lang, "sms")
     return
   }
+  const smsParts = prompt.sms && prompt.sms.trim().split(smsSplitSeparator) || []
+  smsParts.forEach((part, idx) => {
+    if(isBlank(part)){
+      addError(context, `${path}.sms`, k(`[${idx}]SMS prompt must not be blank`), lang, "sms")
+    }
+  })
 }
 
 const validateIvrLangPrompt = (

test/js/reducers/questionnaire.spec.js

@@ -1226,19 +1226,48 @@ describe('questionnaire reducer', () => {
       })
     })
 
-    it('should validate mobileweb message must not be blank if mobileweb mode is on', () => {
+    it('should validate SMS parts messages must not be blank if "SMS" mode is on and there are SMS parts', () => {
       const resultState = playActions([
         actions.fetch(1, 1),
         actions.receive(questionnaire),
-        actions.addMode('mobileweb'),
-        actions.changeStepPromptMobileWeb('17141bea-a81c-4227-bdda-f5f69188b0e7', '')
+        actions.removeMode('ivr'),
+        actions.addLanguage('es'),
+        // Two empty sms parts (empty before and after split separator)
+        actions.changeStepPromptSms('17141bea-a81c-4227-bdda-f5f69188b0e7', `${smsSplitSeparator}` ),
+        actions.setActiveLanguage('es'),
+        // One empty sms parts (empty after split separator)
+        actions.changeStepPromptSms('17141bea-a81c-4227-bdda-f5f69188b0e7', `Hola!${smsSplitSeparator} `),
       ])
 
-      expect(resultState.errors).toInclude({
-        path: "steps[0].prompt['en'].mobileweb",
+      const errors = resultState.errors
+      expect(errors).toInclude({
+        path: "steps[1].prompt['en'].sms",
         lang: 'en',
-        mode: 'mobileweb',
-        message: ['Mobile web prompt must not be blank']
+        mode: 'sms',
+        message: ['[0]SMS prompt must not be blank']
+      })
+      expect(errors).toInclude({
+        path: "steps[1].prompt['en'].sms",
+        lang: 'en',
+        mode: 'sms',
+        message: ['[1]SMS prompt must not be blank']
+      })
+
+      expect(errors).toInclude({
+        path: "steps[1].prompt['es'].sms",
+        lang: 'es',
+        mode: 'sms',
+        message: ['[1]SMS prompt must not be blank']
+      })
+
+      expect(resultState.errorsByPath).toInclude({
+        "steps[1].prompt['en'].sms": [['[0]SMS prompt must not be blank'], ['[1]SMS prompt must not be blank']],
+        "steps[1].prompt['es'].sms": [['[1]SMS prompt must not be blank']]
+      })
+
+      expect(resultState.errorsByLang).toInclude({
+        'en': true,
+        'es': true,
       })
     })
 
@@ -1288,6 +1317,22 @@ describe('questionnaire reducer', () => {
       })
     })
 
+    it('should validate mobileweb message must not be blank if mobileweb mode is on', () => {
+      const resultState = playActions([
+        actions.fetch(1, 1),
+        actions.receive(questionnaire),
+        actions.addMode('mobileweb'),
+        actions.changeStepPromptMobileWeb('17141bea-a81c-4227-bdda-f5f69188b0e7', '')
+      ])
+
+      expect(resultState.errors).toInclude({
+        path: "steps[0].prompt['en'].mobileweb",
+        lang: 'en',
+        mode: 'mobileweb',
+        message: ['Mobile web prompt must not be blank']
+      })
+    })
+
     it('should not include an error if mobile web sms message prompt exceeds the character limit', () => {
       const prompt = 'a'.repeat(141)