fix(rules): make error messages translatable through HN

Author: Ian Wensink

src/BaseButton/index.jsx

@@ -3,16 +3,17 @@ import PropTypes from 'prop-types';
 import CSSModules from 'react-css-modules';
 import styles from './styles.pcss';
 
-const BaseButton = ({ disabled, label, formSubmitAttributes, onClick, isPrimary, type }) =>
-  (<button
+const BaseButton = ({ disabled, label, formSubmitAttributes, onClick, isPrimary, type }) => (
+  <button
     styleName={`button ${disabled ? 'disabled' : ''} ${isPrimary ? '' : 'secondary'}`}
     disabled={disabled ? 'disabled' : null}
     {...formSubmitAttributes}
     onClick={onClick}
     type={type}
   >
     {label}
-  </button>);
+  </button>
+);
 
 BaseButton.propTypes = {
   disabled: PropTypes.bool,

src/Date/index.jsx

@@ -2,6 +2,7 @@ import { observer } from 'mobx-react';
 import moment from 'moment';
 import PropTypes from 'prop-types';
 import React, { Component } from 'react';
+import { site } from 'hn-react';
 import CSSModules from 'react-css-modules';
 import DayPicker from 'react-day-picker';
 import 'react-day-picker/lib/style.css';
@@ -87,7 +88,7 @@ class Date extends Component {
       hint: () =>
         (<RuleHint
           key={`date_${props.field['#webform_key']}`}
-          hint={WebformUtils.getCustomValue(props.field, 'dateError', props.settings) || 'Please enter a valid date.'}
+          hint={WebformUtils.getCustomValue(props.field, 'dateError', props.settings) || site.t('Please enter a valid date.')}
         />),
       shouldValidate: field => field.isBlurred && !WebformUtils.isEmpty(field, field.getValue()),
     });
@@ -100,14 +101,14 @@ class Date extends Component {
 
         switch(result.type) {
           case 'before':
-            hint = WebformUtils.getCustomValue(props.field, 'dateBeforeError', props.settings) || 'Please enter a date before :max';
+            hint = WebformUtils.getCustomValue(props.field, 'dateBeforeError', props.settings) || site.t('Please enter a date before {{max}}');
             break;
           case 'after':
-            hint = WebformUtils.getCustomValue(props.field, 'dateAfterError', props.settings) || 'Please enter a date after :min';
+            hint = WebformUtils.getCustomValue(props.field, 'dateAfterError', props.settings) || site.t('Please enter a date after {{min}}');
             break;
           default:
           case 'range':
-            hint = WebformUtils.getCustomValue(props.field, 'dateRangeError', props.settings) || 'Please enter a date between :min and :max';
+            hint = WebformUtils.getCustomValue(props.field, 'dateRangeError', props.settings) || site.t('Please enter a date between {{min}} and {{max}}');
             break;
         }
 

src/EmailField/index.jsx

@@ -53,13 +53,13 @@ class EmailField extends Component {
     rules.set(`email_${props.field['#webform_key']}`, {
       rule: () => field.isEmpty || validator.isEmail(field.value),
       hint: value =>
-        <RuleHint key={`email_${props.field['#webform_key']}`} hint={WebformUtils.getCustomValue(props.field, 'emailError', props.settings) || 'Please enter a valid email.'} tokens={{ value }} />,
+        <RuleHint key={`email_${props.field['#webform_key']}`} hint={WebformUtils.getCustomValue(props.field, 'emailError', props.settings) || site.t('Please enter a valid email.')} tokens={{ value }} />,
       shouldValidate: () => field.isBlurred && !field.isEmpty,
     });
     rules.set(`email_neverbounce_${props.field['#webform_key']}`, {
       rule: () => field.isEmpty || field.lookupSuccessful,
       hint: () =>
-        <RuleHint key={`email_neverbounce_${props.field['#webform_key']}`} hint={WebformUtils.getCustomValue(props.field, 'neverBounceError', props.settings) || 'Please enter a valid email.'} />,
+        <RuleHint key={`email_neverbounce_${props.field['#webform_key']}`} hint={WebformUtils.getCustomValue(props.field, 'neverBounceError', props.settings) || site.t('Please enter a valid email.')} />,
       shouldValidate: () => field.isBlurred && !field.isEmpty && validator.isEmail(field.value),
     });
 

src/IBAN/index.jsx

@@ -2,6 +2,7 @@ import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import iban from 'ibantools';
 import { observer } from 'mobx-react';
+import { site } from 'hn-react';
 import Input from '../Input';
 import rules from '../Webform/rules';
 import RuleHint from '../RuleHint';
@@ -29,7 +30,7 @@ class IBAN extends Component {
     rules.set(`iban_${props.field['#webform_key']}`, {
       rule: value => iban.isValidIBAN(value),
       hint: () =>
-        <RuleHint key={`iban_${props.field['#webform_key']}`} hint={WebformUtils.getCustomValue(props.field, 'ibanError', props.settings) || 'Please enter a valid IBAN.'} />,
+        <RuleHint key={`iban_${props.field['#webform_key']}`} hint={WebformUtils.getCustomValue(props.field, 'ibanError', props.settings) || site.t('Please enter a valid IBAN.')} />,
       shouldValidate: field => field.isBlurred,
     });
   }

src/Observables/Field.jsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import { observable, computed } from 'mobx';
 import getNested from 'get-nested';
+import { site } from 'hn-react';
 import RuleHint from '../RuleHint';
 import rules from '../Webform/rules';
 import { components } from '../index';
@@ -84,7 +85,7 @@ class Field {
       hint: value =>
         (<RuleHint
           key={`req_${this.key}`}
-          hint={WebformUtils.getCustomValue(this.element, 'requiredError', this.formStore.form.settings) || 'This field is required'}
+          hint={WebformUtils.getCustomValue(this.element, 'requiredError', this.formStore.form.settings) || site.t('This field is required')}
           tokens={{
             value,
             name: this.element['#title'],
@@ -99,7 +100,7 @@ class Field {
         rule: (value = '') => new RegExp(pattern).test(value) || this.isEmpty,
         hint: (value) => {
           const patternError = WebformUtils.getCustomValue(this.element, 'patternError', this.formStore.form.settings);
-          const populatedPatternError = getNested(() => this.formStore.form.settings.custom_elements.patternError['#options'][patternError], this.element['#patternError'] || 'The value :value doesn\'t match the right pattern');
+          const populatedPatternError = getNested(() => this.formStore.form.settings.custom_elements.patternError['#options'][patternError], this.element['#patternError'] || site.t('Please enter a valid value.'));
           return <RuleHint key={`pattern_${this.key}`} hint={populatedPatternError} tokens={{ value }} />;
         },
         shouldValidate: field => field.isBlurred && WebformUtils.validateRule(rules.get(`${supportedActions.required}_${this.key}`), field),

src/Relation/index.jsx

@@ -1,9 +1,9 @@
 import React, { Component } from 'react';
 import getNested from 'get-nested';
 import PropTypes from 'prop-types';
+import { site } from 'hn-react';
 import CSSModules from 'react-css-modules';
 import { observer } from 'mobx-react';
-import { site } from 'hn-react';
 import composeLookUp from '../LookUp';
 import Fieldset from '../Fieldset';
 import RuleHint from '../RuleHint';
@@ -104,7 +104,7 @@ class Relation extends Component {
         onBlur={this.props.onBlur}
       >
         {field.lookupSent && !field.lookupSuccessful &&
-        <RuleHint component={<p className={styles['validation-message']} />} key={`relation_${this.props.field['#webform_key']}`} hint={WebformUtils.getCustomValue(this.props.field, 'relationError', this.props.settings) || 'We don\'t recognise this combination of relation number and postal code. Please check again, or proceed anyway.'} />
+        <RuleHint component={<p className={styles['validation-message']} />} key={`relation_${this.props.field['#webform_key']}`} hint={WebformUtils.getCustomValue(this.props.field, 'relationError', this.props.settings) || site.t('We don\'t recognise this combination of relation number and postal code. Please check again, or proceed anyway.')} />
         }
       </Fieldset>
     );