(freeCodeCamp#119-4)Instead of having the EIN field hard coded there …

…could be a settings section for extra receipt related fields, similar to the create donation items fields and household section on the customer application

client/modules/settings/components/General.js

@@ -68,13 +68,6 @@ const General = () =>
             required
           />
         </Col>
-        <Col lg={3}>
-          <RFFieldGroup
-            name="EIN"
-            label="EIN"
-            type="text"
-          />
-        </Col>
         <Clearfix visibleSmBlock visibleMdBlock />
         <Col lg={6}>
           <RFFieldGroup

client/modules/settings/components/ReceiptFields.js

@@ -0,0 +1,81 @@
+import React from 'react'
+import {Clearfix, Button} from 'react-bootstrap'
+
+import {Box, BoxHeader} from '../../../components/box'
+import {RFFieldGroup} from '../../../components/form'
+
+import { FieldArray } from 'redux-form'
+
+const renderRow = ({ fields, meta: { error, submitFailed } }) => (
+
+  <div style={{padding: '10px'}}>
+    <ul style={{paddingLeft: 0}}>
+      <h4>Receipt Fields:</h4>
+      {fields.map((receiptField, index) => (
+        <li key={index} style={{display: 'flex', flexWrap: 'nowrap'}}>
+          <div style={{display: 'flex', flexGrow: 1}}>
+            <RFFieldGroup
+              name={`${receiptField}.name`}
+              type="text"
+              placeholder="Name"
+              style={{
+                flexGrow: 1,
+                margin: '10px 10px 0 0'
+              }}
+            />
+            <RFFieldGroup
+              name={`${receiptField}.value`}
+              type="text"
+              placeholder="Value"
+              style={{
+                flexGrow: 1,
+                margin: '10px 0px 0 0'
+              }}
+            />
+            <Button
+              type="button"
+              title="Remove ReceiptField"
+              onClick={() => fields.remove(index)}
+              className="btn"
+              style={{
+                margin: '10px 0 0px 18px',
+                height: '34px'
+              }}
+            >
+              <i className="fa fa-trash" />
+            </Button>
+            <Clearfix visibleSmBlock visibleMdBlock />
+          </div>
+        </li>
+      ))}
+      <Button
+        type="button"
+        onClick={() => fields.push({})}
+        className="btn"
+        style={{
+          margin: '15px 0px 0px 15px',
+          height: '34px'
+        }}
+      >
+        Add Field
+      </Button>
+      {submitFailed && error && <span>{error}</span>}
+    </ul>
+  </div>
+)
+
+const ReceiptFields = props => {
+  const { handleSubmit } = props
+  return (
+    <Box>
+      <BoxHeader heading="General Receipt Fields" />
+      <form onSubmit={handleSubmit} >
+        <div className="form-group">
+          <FieldArray name="receiptFields" component={renderRow} />
+        </div>
+      </form>
+    </Box>
+  )
+}
+
+export default ReceiptFields

client/modules/settings/components/SettingsForm.js

@@ -6,6 +6,7 @@ import {Link} from 'react-router-dom'
 import {Button} from 'react-bootstrap'
 
 import General from './General'
+import ReceiptFields from './ReceiptFields'
 import Keys from './Keys'
 import Images from './Images'
 import withConfirmNavigation from '../../../components/withConfirmNavigation'
@@ -27,6 +28,7 @@ const enhance = compose(
 const SettingsForm = ({handleSubmit}) =>
   <div>
     <General />
+    <ReceiptFields />
     <Images />
     <Keys />
 

common/placeholders.js

@@ -10,7 +10,10 @@ const placeholders = [
   {id: 'url', label: 'Foodbank Website'},
   {id: 'clientIntakeNumber', label: 'Client Intake Number'},
   {id: 'supportNumber', label: 'Support Number'},
-  {id: 'ein', label: 'Employer Identification Number'},
+  {id: 'receiptFields',
+    label: 'Receipt Fields',
+    format: value => `<p>${value.name}: ${value.value}</p>`
+  },
 
   {id: 'firstName', label: 'User First Name', type: placeholderTypes.EMAIL},
   {id: 'lastName', label: 'User Last Name', type: placeholderTypes.EMAIL},
@@ -68,12 +71,13 @@ function getPlaceholders(types) {
 }
 
 function renderReceipt(values) {
-  const ids = ['organization', 'address', 'url', 'supportNumber', 'ein']
+  const ids = ['organization', 'address', 'url', 'supportNumber', 'receiptFields']
   let table = '<table>'
 
   for (let i = 0; i < ids.length; i++) {
     const placeholder = placeholders.find(p => p.id === ids[i])
-    table += `<tr><td>${placeholder.label}:</td><td> ${values[ids[i]]}</td></tr>`
+    if (ids[i] === 'receiptFields')  table += `<tr><td>${values[ids[i]].name}:</td><td> ${values[ids[i]].value}</td></tr>`
+    else table += `<tr><td>${placeholder.label}:</td><td> ${values[ids[i]]}</td></tr>`
   }
 
   table += `<tr><td><p>Here you have a list of the donations our organization recibed from you:</p></td></tr>`

server/config/mailer.js

@@ -49,6 +49,5 @@ export default async function sendEmail(
     path: '/v3/mail/send',
     body: mail.toJSON()
   })
-
   return sg.API(request)
 }

server/controllers/settings.js

@@ -40,7 +40,7 @@ export default {
 
     const settings = {
       ...req.body,
-      location
+      location,
     }
 
     const count = await Settings.count()

server/models/settings.js

@@ -5,6 +5,19 @@ import locationSchema from './location-schema'
 
 const {Schema} = mongoose
 
+const receiptFieldSchema = new Schema({
+  name: {
+    type: String,
+    required: true
+  },
+  value: {
+    type: String,
+    required: true
+  }
+}, {
+  _id: false
+})
+
 const SettingsSchema = new Schema({
   organization: {
     type: String,
@@ -27,6 +40,7 @@ const SettingsSchema = new Schema({
     trim: true
   },
   location: locationSchema,
+  receiptFields: [receiptFieldSchema],
   gmapsApiKey: {
     type: String,
     trim: true,