(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,96 @@
+import React from 'react'
+import {Clearfix, Col, Row, Button} from 'react-bootstrap'
+
+import {Box, BoxBody, BoxHeader} from '../../../components/box'
+import {RFFieldGroup} from '../../../components/form'
+
+import { FieldArray } from 'redux-form'
+
+/*const renderField = ({ input, label, type, meta: { touched, error } }) => (
+  <div>
+    <label>{label}</label>
+    <div>
+      <input {...input} type={type} placeholder={label} className="form-control" />
+      {touched && error && <span>{error}</span>}
+    </div>
+  </div>
+)*/
+
+const renderRow = ({ fields, meta: { error, submitFailed } }) => (
+  <BoxBody>
+    <h4>Receipt Fields:</h4>
+    {fields.map((receiptField, index) => (
+      <Row key={index}>
+        <Col lg={3}>
+          <RFFieldGroup
+            name={`${receiptField}.name`}
+            type="text"
+            //component={renderField}
+            placeholder="Name"
+            style={{
+              flexGrow: 1,
+              margin: '10px 0 0 0'
+            }}
+          />
+        </Col>
+        <Col lg={3}>
+          <RFFieldGroup
+            name={`${receiptField}.value`}
+            type="text"
+            //component={renderField}
+            placeholder="Value"
+            style={{
+              flexGrow: 1,
+              margin: '10px 0 0 0'
+            }}
+          />
+        </Col>
+        <Col lg={3}>
+          <Button
+            type="button"
+            title="Remove ReceiptField"
+            onClick={() => fields.remove(index)}
+            className="btn"
+            style={{
+              margin: '18px 0 0px 18px',
+              height: '34px'
+            }}
+          >
+            <i className="fa fa-trash" />
+          </Button>
+        </Col>
+        <Clearfix visibleSmBlock visibleMdBlock />
+      </Row>
+    ))}
+    <Row>
+      <Button
+        type="button"
+        onClick={() => fields.push({})}
+        className="btn"
+        style={{
+          margin: '15px 0px 0px 15px',
+          height: '34px'
+        }}
+      >
+        Add Field
+      </Button>
+      {submitFailed && error && <span>{error}</span>}
+    </Row>
+  </BoxBody>
+)
+
+const ReceiptFields = props => {
+  const { handleSubmit /*, pristine, reset, submitting */ } = 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,