fix(calculate-formula): make formulas available for hidden fields

Author: Ian Wensink

src/Converse/index.jsx

@@ -25,7 +25,7 @@ class Converse extends Component {
 
   static getTokens(formStore, field) {
     if(field.visible) {
-      const amount = field.componentClass.calculateCurrentAmount(formStore, field);
+      const amount = Converse.calculateFormula(formStore.values, field.element['#payment_amount']) || 0;
       const formattedAmount = parseFloat(amount).toFixed(2);
       return {
         payment_amount: formattedAmount,
@@ -36,14 +36,34 @@ class Converse extends Component {
     return {};
   }
 
-  static calculateCurrentAmount(formStore, field) {
+  /**
+   * financial_amount_monthly_suggestion|0| + financial_amount_monthly|0| + financial_amount_yearly_suggestion|0| + financial_amount_yearly|0|
+   * @param values
+   * @param formula
+   * @returns {*}
+   */
+  static calculateFormula(values, formula) {
     const parser = new FormulaParser();
-    Object.entries(formStore.values).forEach(([key, value]) => {
+    const formattedFormula = formula.replace(/\|([0-9])\|/g, ''); // Remove all fallback values from formula (|1|)
+    const formulaParts = formula.split('|'); // Split formula into parts, an array of fields & fallback values ('field|1| + field2|0|' => ['field', 1, 'field2', 0])
+    parser.on('callVariable', (name, done) => { // Get's called on every variable during calculation
+      const value = values[name]; // Get field value from store
+      if(typeof value === 'undefined' || isNaN(parseFloat(value))) { // If value doesn't exist, or isn't a number after parsing
+        const fallbackIndex = formulaParts.findIndex(item => item.endsWith(name)); // Get index of field in formula parts
+        const fallbackValue = parseFloat(formulaParts[fallbackIndex + 1]); // Next to field is the fallback value, hence the + 1
+        if(fallbackIndex !== false && !isNaN(fallbackValue)) { // If the fallback value exists, and is a number
+          done(fallbackValue);
+        }
+      } else {
+        done(value.replace(',', '.')); // The value exists, make sure it's in the correct format to be recognized as a number
+      }
+    });
+    Object.entries(values).forEach(([key, value]) => {
       parser.setVariable(key, value);
     });
-    const amount = parser.parse(field.element['#payment_amount']).result;
+    const amount = parser.parse(formattedFormula).result;
     if(isNaN(amount) || amount === null) {
-      return 0;
+      return null;
     }
     return amount < 0 ? 0 : amount;
   }

src/Hidden/index.jsx

@@ -1,17 +1,41 @@
 import React from 'react';
+import PropTypes from 'prop-types';
+import { observer } from 'mobx-react';
+import Converse from '../Converse';
+import Form from '../Observables/Form';
+
 // styled
 import StyledHidden from './styled/hidden';
 
 const Hidden = props => (
   <StyledHidden
     {...props}
+    value={Hidden.rewriteValue(props.value, props.formStore.values)}
     type='hidden'
   />
 );
 
-Hidden.meta = {
+/**
+ * ~financial_amount_monthly_suggestion|0| + financial_amount_monthly|0| + financial_amount_yearly_suggestion|0| + financial_amount_yearly|0|~
+ * @param value
+ * @param values
+ * @returns {*}
+ */
+Hidden.rewriteValue = (value, values) => {
+  if(!value.startsWith('~') || !value.endsWith('~')) return value;
+  return Converse.calculateFormula(values, value.slice(1, -1));
+};
+
+Hidden.propTypes = {
+  value: PropTypes.string.isRequired,
+  formStore: PropTypes.instanceOf(Form).isRequired,
+};
+
+const DecoratedHidden = observer(Hidden);
+
+DecoratedHidden.meta = {
   wrapper: 'div',
   wrapperProps: { style: { display: 'none' } },
 };
 
-export default Hidden;
+export default DecoratedHidden;

src/Observables/Form.js

@@ -82,7 +82,7 @@ class Form {
     const values = {};
 
     this.visibleFields.filter(field => !field.isEmpty).forEach((field) => {
-      values[field.key] = typeof field.componentClass.rewriteValue === 'function' ? field.componentClass.rewriteValue(field.value) : field.value;
+      values[field.key] = typeof field.componentClass.rewriteValue === 'function' ? field.componentClass.rewriteValue(field.value, values) : field.value;
     });
 
     return values;