feat: available gathering modes of declarations depend on declaration type

package.json

@@ -58,6 +58,7 @@
     "lodash.debounce": "4.0.8",
     "lodash.find": "4.6.0",
     "lodash.get": "4.4.2",
+    "lodash.isequal": "^4.5.0",
     "lodash.maxby": "^4.6.0",
     "lodash.merge": "^4.6.2",
     "lodash.sortby": "4.7.0",
@@ -97,6 +98,7 @@
     "@types/lodash.debounce": "^4.0.9",
     "@types/lodash.find": "^4.6.9",
     "@types/lodash.get": "^4.4.9",
+    "@types/lodash.isequal": "^4.5.8",
     "@types/lodash.maxby": "^4.6.9",
     "@types/lodash.merge": "^4.6.9",
     "@types/lodash.sortby": "^4.7.9",

src/constants/dictionary.ts

@@ -350,11 +350,15 @@ const dictionary: Dictionary = {
     en: 'Boolean',
     fr: 'Booléen',
   },
-  INSTRUCTION: {
-    en: 'Instruction',
-    fr: 'Consigne',
+  declarationHelp: {
+    en: 'Help for the respondent',
+    fr: "Aide à l'enquêté",
   },
-  CODECARD: {
+  declarationInstruction: {
+    en: 'Questioner instruction',
+    fr: 'Instruction enquêteur',
+  },
+  declarationCodeCard: {
     en: 'Code-Card',
     fr: 'Carte-Code',
   },
@@ -1635,11 +1639,11 @@ const dictionary: Dictionary = {
   },
   VISUALIZE_QUEEN_CAPI: {
     fr: 'Enquêteur face à face',
-    en: 'Interviewer face to face',
+    en: 'Questioner face to face',
   },
   VISUALIZE_QUEEN_CATI: {
     fr: 'Enquêteur téléphone',
-    en: 'Interviewer phone',
+    en: 'Questioner phone',
   },
   VISUALIZE_PDF: {
     fr: 'Papier',

src/constants/pogues-constants.ts

@@ -11,6 +11,55 @@ export const COMPONENT_TYPE = {
   EXTERNAL_ELEMENT: 'EXTERNAL_ELEMENT',
 };
 
+/** Additional informations a survey designer can provide to the respondent or questioner. */
+export enum DECLARATION_TYPES {
+  /** Help for the respondent. */
+  HELP = 'HELP',
+  /** Instruction for the questioner. */
+  INSTRUCTION = 'INSTRUCTION',
+  /** Questioner must show a code card to the respondent. */
+  CODE_CARD = 'CODECARD',
+}
+
+/** Specify which gathering mode will be used to conduct the survey (e.g. paper, web...). */
+enum GATHERING_MODES {
+  /** Face to face. */
+  CAPI = 'CAPI',
+  /** Phone. */
+  CATI = 'CATI',
+  /** Web. */
+  CAWI = 'CAWI',
+  /** Paper. */
+  PAPI = 'PAPI',
+}
+
+/** Every gathering mode options by gathering mode */
+const GATHERING_MODES_OPTIONS: {
+  [key in GATHERING_MODES]: { value: string; label: string };
+} = {
+  [GATHERING_MODES.CAPI]: { value: 'CAPI', label: 'CAPI' },
+  [GATHERING_MODES.CATI]: { value: 'CATI', label: 'CATI' },
+  [GATHERING_MODES.CAWI]: { value: 'CAWI', label: 'CAWI' },
+  [GATHERING_MODES.PAPI]: { value: 'PAPI', label: 'PAPI' },
+};
+
+/** Available gathering modes for declarations */
+export const GATHERING_MODES_OPTIONS_BY_DECLARATION = {
+  [DECLARATION_TYPES.HELP]: [
+    GATHERING_MODES_OPTIONS[GATHERING_MODES.CAPI],
+    GATHERING_MODES_OPTIONS[GATHERING_MODES.CATI],
+    GATHERING_MODES_OPTIONS[GATHERING_MODES.CAWI],
+    GATHERING_MODES_OPTIONS[GATHERING_MODES.PAPI],
+  ],
+  [DECLARATION_TYPES.INSTRUCTION]: [
+    GATHERING_MODES_OPTIONS[GATHERING_MODES.CAPI],
+    GATHERING_MODES_OPTIONS[GATHERING_MODES.CATI],
+  ],
+  [DECLARATION_TYPES.CODE_CARD]: [
+    GATHERING_MODES_OPTIONS[GATHERING_MODES.CAPI],
+  ],
+};
+
 export const TargetMode = [
   { value: 'CAPI', label: 'CAPI' },
   { value: 'CATI', label: 'CATI' },

src/forms/controls/list-checkboxes.jsx

@@ -1,5 +1,6 @@
 import React, { Component } from 'react';
 
+import isEqual from 'lodash.isequal';
 import PropTypes from 'prop-types';
 import ClassSet from 'react-classset';
 import { fieldInputPropTypes, fieldMetaPropTypes } from 'redux-form';
@@ -8,6 +9,7 @@ import { CONTROL_LIST_CHECKBOXES } from '../../constants/dom-constants';
 import {
   getControlId,
   getValuesFromGenericOptions,
+  removeValueInList,
   toggleValueInList,
 } from '../../utils/widget-utils';
 
@@ -44,29 +46,58 @@ class ListCheckboxes extends Component {
   constructor(props) {
     super(props);
 
+    const values = props.input.value;
     this.state = {
-      listCheckValues: [],
+      listCheckValues:
+        values !== '' && values.length > 0 ? values.split(',') : [],
+      options: getValuesFromGenericOptions(props.children),
     };
 
     this.toggleCheck = this.toggleCheck.bind(this);
   }
 
-  UNSAFE_componentWillMount() {
-    const values = this.props.input.value;
-    this.setState({
-      listCheckValues:
-        values !== '' && values.length > 0 ? values.split(',') : [],
-    });
-  }
-
-  UNSAFE_componentWillUpdate(nextProps) {
-    const values = nextProps.input.value;
-    if (this.props.input.value !== values) {
+  componentDidUpdate(prevProps, prevState) {
+    const newValues = this.props.input.value;
+    if (prevProps.input.value !== newValues) {
+      // update the [] value into the string one we want to send to the form
       this.setState({
         listCheckValues:
-          values !== '' && values.length > 0 ? values.split(',') : [],
+          newValues !== '' && newValues.length > 0 ? newValues.split(',') : [],
       });
     }
+
+    const options = getValuesFromGenericOptions(this.props.children);
+    if (!isEqual(prevState.options, options)) {
+      this.setState({
+        options,
+      });
+
+      // check if the options changed and we need to untoggle a value because
+      // it does not exist anymore
+      let newValues = [...this.state.listCheckValues];
+      let hasChanged = false;
+      for (const oldOption of prevState.options) {
+        // check if this previous option is still present
+        let optionStillExist = false;
+        for (const newOption of options) {
+          if (
+            oldOption.label === newOption.label &&
+            oldOption.value === newOption.value
+          ) {
+            optionStillExist = true;
+            break;
+          }
+        }
+        if (optionStillExist) continue;
+
+        // option has been removed -> remove it from values
+        newValues = removeValueInList(newValues, oldOption.value);
+        hasChanged = true;
+      }
+      if (hasChanged) {
+        this.props.input.onChange(newValues.join());
+      }
+    }
   }
 
   toggleCheck(checkValue) {

src/forms/controls/list-checkboxes.spec.jsx

@@ -85,5 +85,53 @@ describe('Form controls - List checkboxes', () => {
       wrapper.find('input[value="fakeValue2"]').simulate('change', fakeEvent);
       expect(onChangeSpy).toBeCalledWith('fakeValue1');
     });
+
+    test('Should remove value when an option is removed', () => {
+      props.input.value = 'fakeValue1,fakeValue2';
+
+      const wrapper = shallow(
+        <ListCheckboxes {...props}>
+          <GenericOption value="fakeValue1">Fake label 1</GenericOption>
+          <GenericOption value="fakeValue2">Fake label 2</GenericOption>
+        </ListCheckboxes>,
+      );
+      expect(onChangeSpy).not.toHaveBeenCalled();
+
+      wrapper.setProps({
+        children: (
+          <GenericOption value="fakeValue2">Fake label 2</GenericOption>
+        ),
+      });
+
+      expect(onChangeSpy).toBeCalledWith('fakeValue2');
+    });
+
+    test('Should not change value when an option is added', () => {
+      props.input.value = 'fakeValue1';
+
+      const wrapper = shallow(
+        <ListCheckboxes {...props}>
+          <GenericOption value="fakeValue1">Fake label 1</GenericOption>
+          <GenericOption value="fakeValue2">Fake label 2</GenericOption>
+        </ListCheckboxes>,
+      );
+      expect(onChangeSpy).not.toHaveBeenCalled();
+
+      wrapper.setProps({
+        children: [
+          <GenericOption key="fakeValue1" value="fakeValue1">
+            Fake label 1
+          </GenericOption>,
+          <GenericOption key="fakeValue2" value="fakeValue2">
+            Fake label 2
+          </GenericOption>,
+          <GenericOption key="fakeValue3" value="fakeValue3">
+            Fake label 3
+          </GenericOption>,
+        ],
+      });
+
+      expect(onChangeSpy).not.toHaveBeenCalled();
+    });
   });
 });

src/utils/widget-utils.ts

@@ -47,6 +47,18 @@ export function toggleValueInList(list: string[], value: string): string[] {
   return newList;
 }
 
+/** Remove a value from an array of string */
+export function removeValueInList(list: string[], value: string): string[] {
+  const newList = [...list];
+  const valuePosition = list.indexOf(value);
+
+  if (valuePosition !== -1) {
+    newList.splice(valuePosition, 1);
+  }
+
+  return newList;
+}
+
 export function getCurrentSelectorPath(selectorPath: string = ''): string {
   return selectorPath !== '' ? `${selectorPath}.` : selectorPath;
 }

src/widgets/component-new-edit/components/declarations.jsx

@@ -5,9 +5,10 @@ import { connect } from 'react-redux';
 import { Field, FormSection, formValueSelector } from 'redux-form';
 
 import {
+  DECLARATION_TYPES,
   DEFAULT_FORM_NAME,
+  GATHERING_MODES_OPTIONS_BY_DECLARATION,
   TABS_PATHS,
-  TargetMode,
 } from '../../../constants/pogues-constants';
 import { RichEditorWithVariable } from '../../../forms/controls/control-with-suggestions';
 import GenericOption from '../../../forms/controls/generic-option';
@@ -25,13 +26,23 @@ const validateForm = (addErrors, validate) => (values) => {
   return validate(values, addErrors);
 };
 
+/**
+ * Give additional informations about the question to the respondent or the
+ * questioner to help them answer the question.
+ *
+ * - "Help" can be selected for all gathering modes.
+ * - "Instruction" can be selected for CAPI and CATI.
+ * - "Code card" can be selected for CAPI (and a card code must be provided).
+ *
+ * @see {@link DECLARATION_TYPES} and {@link GATHERING_MODES_OPTIONS_BY_DECLARATION}
+ */
 const Declarations = ({
-  formName,
-  selectorPath,
-  errors,
-  showPosition,
+  formName = DEFAULT_FORM_NAME,
+  selectorPath = TABS_PATHS.DECLARATIONS,
+  errors = [],
+  showPosition = true,
   addErrors,
-  declarationType,
+  declarationType = '',
   activeQuestionnaire,
 }) => {
   const [disableValidation, setDisableValidation] = useState(false);
@@ -52,7 +63,7 @@ const Declarations = ({
           id="declaration_text"
           component={RichEditorWithVariable}
           label={
-            declarationType === 'CODECARD'
+            declarationType === DECLARATION_TYPES.CODE_CARD
               ? Dictionary.declaration_label_code_card
               : Dictionary.declaration_label
           }
@@ -67,14 +78,14 @@ const Declarations = ({
           label={Dictionary.type}
           required
         >
-          <GenericOption key="HELP" value="HELP">
-            {Dictionary.HELP}
+          <GenericOption value={DECLARATION_TYPES.HELP}>
+            {Dictionary.declarationHelp}
           </GenericOption>
-          <GenericOption key="INSTRUCTION" value="INSTRUCTION">
-            {Dictionary.INSTRUCTION}
+          <GenericOption value={DECLARATION_TYPES.INSTRUCTION}>
+            {Dictionary.declarationInstruction}
           </GenericOption>
-          <GenericOption key="CODECARD" value="CODECARD">
-            {Dictionary.CODECARD}
+          <GenericOption value={DECLARATION_TYPES.CODE_CARD}>
+            {Dictionary.declarationCodeCard}
           </GenericOption>
         </Field>
 
@@ -86,16 +97,10 @@ const Declarations = ({
             label={Dictionary.declaration_position}
             required
           >
-            <GenericOption
-              key="AFTER_QUESTION_TEXT"
-              value="AFTER_QUESTION_TEXT"
-            >
+            <GenericOption value="AFTER_QUESTION_TEXT">
               {Dictionary.dclPosAfterQuestion}
             </GenericOption>
-            <GenericOption
-              key="BEFORE_QUESTION_TEXT"
-              value="BEFORE_QUESTION_TEXT"
-            >
+            <GenericOption value="BEFORE_QUESTION_TEXT">
               {Dictionary.dclPosBeforeText}
             </GenericOption>
           </Field>
@@ -106,7 +111,7 @@ const Declarations = ({
           label={Dictionary.collectionMode}
           inline
         >
-          {TargetMode.map((s) => (
+          {GATHERING_MODES_OPTIONS_BY_DECLARATION[declarationType].map((s) => (
             <GenericOption key={s.value} value={s.value}>
               {s.label}
             </GenericOption>
@@ -127,14 +132,6 @@ Declarations.propTypes = {
   activeQuestionnaire: PropTypes.object.isRequired,
 };
 
-Declarations.defaultProps = {
-  formName: DEFAULT_FORM_NAME,
-  selectorPath: TABS_PATHS.DECLARATIONS,
-  errors: [],
-  showPosition: true,
-  declarationType: '',
-};
-
 const mapStateToProps = (state) => {
   const selector = formValueSelector('component');
   return {