Merge pull request codeforboston#619 from knod/care-income

Fixes codeforboston#450 Makes sub-section for income earned because of care

Author: knod

src/forms/CashFlowRowAfterConfirm.js

@@ -78,7 +78,7 @@ class CashFlowRowAfterConfirm extends React.Component {
 
     return (
 
-      <div>
+      <div style={{ display: 'inline-block' }}>
 
         <ControlledRadioYesNo
           labelText = { confirmLabel }

src/forms/CurrentExpenses.js

@@ -14,6 +14,7 @@ import {
   IntervalColumnHeadings,
   CashFlowRow,
   ControlledRadioYesNo,
+  AttentionArrow,
 } from './formHelpers';
 import {
   ContractRentField,
@@ -33,11 +34,35 @@ import {
   isDisabled,
   isUnder13,
 } from '../utils/getMembers';
+import { getUnder13Expenses } from '../utils/cashflow';
 
 
 // ========================================
 // COMPONENTS
 // ========================================
+const EarnedFrom = function ({ hasExpenses, cashflowProps, children }) {
+
+  if (hasExpenses) {
+
+    // Because we're familiar with the benefit code, we
+    // happen to know these values don't need to be reset
+    // to 0, even if the client erases childcare expenses.
+    // Not sure if that's a great general practice, though.
+    return (
+      <div className= { 'earned-from' }>
+        <AttentionArrow />
+        <CashFlowRowAfterConfirm { ...cashflowProps }>
+          { children }
+        </CashFlowRowAfterConfirm>
+      </div>
+    );
+
+  } else {
+    return null;
+  }
+
+};  // End EarnedFrom
+
 
 const Utilities = function ({ current, type, time, setClientProperty }) {
 
@@ -267,7 +292,7 @@ const ExpensesFormContent = function ({ current, time, setClientProperty }) {
         ? 
         <div>
           <FormHeading subheading = { 'A "child" is a person 12 or younger. Don\'t include amounts that are paid for by other benefit programs.\n' }>
-            Reasonable Unreimbursed Non-Medical Child(ren) Care
+            Reasonable Unreimbursed Non-Medical Child Care
           </FormHeading>
           <IntervalColumnHeadings type={ type } />
           <CashFlowRow
@@ -286,12 +311,16 @@ const ExpensesFormContent = function ({ current, time, setClientProperty }) {
             { ...sharedProps }
             generic={ 'childOtherCare' }> Other care 
           </CashFlowRow>
-          <CashFlowRowAfterConfirm
-            { ...sharedProps }
-            generic={ 'earnedBecauseOfChildCare' }
-            confirmLabel={ 'Does childcare allow you to make additional income?' }>
-            <span style={{ textDecoration: 'underline' }}>Income</span> made possible by child care expenses
-          </CashFlowRowAfterConfirm>
+
+          <EarnedFrom
+            hasExpenses   ={ getUnder13Expenses(current) !== 0 }
+            cashflowProps ={{
+              ...sharedProps,
+              generic:      'earnedBecauseOfChildCare',
+              confirmLabel: `If you didn't have that child care, would it change how much pay you can bring home?`,
+            }}>
+            How much less would you make?
+          </EarnedFrom>
         </div>
         : null
       }
@@ -348,12 +377,16 @@ const ExpensesFormContent = function ({ current, time, setClientProperty }) {
             { ...sharedProps }
             generic={ 'disabledAssistance' }> Disabled/Handicapped assistance 
           </CashFlowRow>
-          <CashFlowRowAfterConfirm
-            { ...sharedProps }
-            generic={ 'earnedBecauseOfAdultCare' }
-            confirmLabel={ 'Do assistance expenses allow you to make additional income?' }>
-            <span style={{ textDecoration: 'underline' }}>Income</span> made possible by assistance expenses
-          </CashFlowRowAfterConfirm>
+
+          <EarnedFrom
+            hasExpenses   ={ current.disabledAssistance !== 0 }
+            cashflowProps ={{
+              ...sharedProps,
+              generic:      'earnedBecauseOfAdultCare',
+              confirmLabel: `If you didn't have that assistance, would it change how much pay you can bring home?`,
+            }}>
+            How much less would you make?
+          </EarnedFrom>
         </div>
         : null
       }

src/forms/formHelpers.js

@@ -12,6 +12,7 @@ import {
   Grid,
   // Input,
   Checkbox,
+  Icon,
 } from 'semantic-ui-react';
 
 // UTILITIES
@@ -690,7 +691,28 @@ class ControlledRadioYesNo extends Component {
       </div>
     );
   }
-}
+};
+
+
+var AttentionArrow = function () {
+
+  return (
+    <span className={ 'attention-arrow' }>
+      <Icon
+        className = { 'attention-font' }
+        fitted
+        name      = { 'angle right' }
+        size      = { 'big' } />
+      <Icon
+        className = { 'attention-font' }
+        fitted
+        name      = { 'angle right' }
+        size      = { 'big' } />
+    </span>
+  );
+
+};  // End AttentionArrow
+
 
 /** @todo Separate into different files? */
 export {
@@ -701,5 +723,5 @@ export {
   RowMessage,
   IntervalColumnHeadings, ColumnHeading, ManagedNumberField,
   CashFlowRow, MonthlyCashFlowRow, CashFlowContainer,
-  ControlledRadioYesNo,
+  ControlledRadioYesNo, AttentionArrow,
 };

src/index.css

@@ -193,6 +193,31 @@ input[type=number]::-webkit-outer-spin-button {
 buttons are put on the left side. */
 .radio-yes-no {
   display: flex;
+  margin-bottom: 1rem;
+}
+
+.ui.form .radio-yes-no .field {
+  margin-bottom: 0;
+}
+
+.earned-from {
+  display: flex;
+  align-items: flex-start;
+  margin-bottom: 1rem;
+}
+
+.ui.form i.icon.attention-font {
+  color: #f2711c;
+  font-weight: 600;
+}
+
+.attention-arrow {
+  display: inline-block;
+  margin-right: 1rem;
+}
+
+.attention-arrow i.fitted.attention-font {
+  line-height: .6em;
 }
 
 /* Give padding between elements, but not at the start

src/utils/cashflow.js

@@ -33,6 +33,19 @@ const getDependentCostsMonthly = function (client) {
 };  // End getDependentCostsMonthly()
 
 
+/**
+ * Client's total MONTHLY costs for dependents under 13
+ *     (does not include child support paid out).
+ * 
+ * @function
+ * @param {object} client - `current` or `future` property of client data
+ * @returns {number}
+ */
+const getUnder13Expenses = function (client) {
+  return sumProps(client, UNDER13_CARE_EXPENSES);
+};  // End getUnder13Expenses()
+
+
 // ==================================
 // STRAIGHT UP INCOME
 // ==================================
@@ -87,6 +100,7 @@ const sumProps = function (obj, props) {
 
 export {
   getDependentCostsMonthly,
+  getUnder13Expenses,
   getSimpleGrossIncomeMonthly,
   getGrossUnearnedIncomeMonthly,
   sumProps,