NPO-Accounting/houdini
6
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Add address info to the offsite donation creation form

Browse source
This commit is contained in:
Eric Schultz 2018-10-24 12:54:47 -05:00 committed by Eric Schultz
parent 8393bfe2db
commit c912e4ffbe
1 changed files with 58 additions and 17 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

75
javascripts/src/components/create_offsite_payment_pane/CreateOffsitePaymentPane.tsx
View file

@ -22,6 +22,7 @@ import blacklist = require("validator/lib/blacklist");
import * as _ from 'lodash' import * as _ from 'lodash'
import moment = require('moment'); import moment = require('moment');
import { castToUndefinedIfBlank } from '../../lib/utils'; import { castToUndefinedIfBlank } from '../../lib/utils';
import ReactInput from "../common/form/ReactInput";
export interface CreateOffsitePaymentPaneProps export interface CreateOffsitePaymentPaneProps
{ {
@ -84,11 +85,22 @@ class CreateNewOffsitePaymentPane extends React.Component<CreateOffsitePaymentPa
} }
if (this.form.$('dedication.type').get('value') != '') { if (this.form.$('dedication.type').get('value') != '') {
const nameToValueForContact = ['full_address', 'phone', 'email'].map((i) => {
return {
name: i, value: this.form.$(`dedication.${i}`).get('value')
}
});
const contact = _.some(nameToValueForContact, (i) => i.value && i.value != "") ?
_.reduce(nameToValueForContact, (result: any, i) => {
result[i.name] = i.value;
return result;
}, {}) : undefined;
postData.dedication = serializeDedication({ postData.dedication = serializeDedication({
type: this.form.$('dedication.type').get('value'), type: this.form.$('dedication.type').get('value'),
supporter_id: this.form.$('dedication.supporter_id').get('value'), supporter_id: this.form.$('dedication.supporter_id').get('value'),
name: this.form.$('dedication.name').get('value'), name: this.form.$('dedication.name').get('value'),
contact:this.form.$('dedication.contact').get('value'), contact: contact,
note: this.form.$('dedication.note').get('value') note: this.form.$('dedication.note').get('value')
}) })
} }
@ -145,8 +157,10 @@ class CreateNewOffsitePaymentPane extends React.Component<CreateOffsitePaymentPa
createFieldDefinition({name:'type', label: 'Dedication Type'}), createFieldDefinition({name:'type', label: 'Dedication Type'}),
createFieldDefinition({name: 'supporter_id', type: 'hidden'}), createFieldDefinition({name: 'supporter_id', type: 'hidden'}),
createFieldDefinition({name:'name', label:'Person dedicated for'}), createFieldDefinition({name:'name', label:'Person dedicated for'}),
createFieldDefinition({name: 'contact', type: 'hidden'}), createFieldDefinition({name: 'full_address', label: 'Full address'}),
createFieldDefinition({name: 'note'}) createFieldDefinition({name: 'phone', label: 'Phone'}),
createFieldDefinition({name: 'email', label: 'Email'}),
createFieldDefinition({name: 'note', label: 'Dedication Note', type: 'textarea'})
]}, ]},
'designation': {name: 'designation', label: 'Designation'}, 'designation': {name: 'designation', label: 'Designation'},
'comment': {name: 'comment', label: 'Note'} 'comment': {name: 'comment', label: 'Note'}
@ -182,7 +196,7 @@ class CreateNewOffsitePaymentPane extends React.Component<CreateOffsitePaymentPa
render() { render() {
this.form.values() this.form.values()
const modal = const modal =
<Modal modalActive={this.props.modalActive} titleText={'Edit Donation'} focusDialog={true} <Modal modalActive={this.props.modalActive} titleText={'Create Offsite Donation'} focusDialog={true}
onClose={this.props.onClose} dialogStyle={{minWidth:'768px'}} childGenerator={() => { onClose={this.props.onClose} dialogStyle={{minWidth:'768px'}} childGenerator={() => {
return <div className={"tw-bs"}> return <div className={"tw-bs"}>
<form className='u-marginTop--20'> <form className='u-marginTop--20'>
@ -206,21 +220,48 @@ class CreateNewOffsitePaymentPane extends React.Component<CreateOffsitePaymentPa
<div className="panel panel-default"> <div className="panel panel-default">
<div className="panel-heading"><label>Dedication <small> (optional)</small></label></div> <div className="panel-heading"><label>Dedication <small> (optional)</small></label></div>
<div className="panel-body"> <div className="panel-body">
<SelectField field={this.form.$('dedication.type')} label={"Dedication Type"} options={[{id: null, name: ''}, {id: 'honor', name: 'In honor of'}, {id:'memory', name: 'In memory of'}]} /> <SelectField field={this.form.$('dedication.type')} label={"Dedication Type"}
options={[{id: null, name: ''}, {id: 'honor', name: 'In honor of'}, {
id: 'memory',
name: 'In memory of'
}]}/>
{ this.form.$('dedication.type').get('value') != '' ? <div> <div className={"panel panel-default"}> {this.form.$('dedication.type').get('value') != '' ? <div>
<div className="panel-heading"><label>Dedicated to:</label></div> <div className={"panel panel-default"}>
<div className={'panel-body'}> <div className="panel-heading"><label>Dedicated to:</label></div>
<table className='table--small u-marginBottom--10'> <div className={'panel-body'}>
<tr> <table className='table--small u-marginBottom--10'>
<th>Name</th> <tbody>
<td><input {...this.form.$('dedication.name').bind()}/></td> <tr>
</tr> <th>Name</th>
</table> <td><ReactInput field={this.form.$('dedication.name')} label={'Name'} className={"form-control"}/></td>
</tr>
<tr>
<th>Full Address
</th>
<td><ReactInput field={this.form.$('dedication.full_address')} className={"form-control"}/>
</td>
</tr>
<tr>
<th>Phone Number
</th>
<td><ReactInput field={this.form.$('dedication.phone')} className={"form-control"}/>
</td>
</tr>
<tr>
<th>Email Address
</th>
<td><ReactInput field={this.form.$('dedication.email')} className={"form-control"}/>
</td>
</tr>
</tbody>
</table>
</div>
</div> </div>
</div> <TextareaField rows={3} placeholder={"Dedication"} field={this.form.$('dedication.note')}
<TextareaField rows={3} placeholder={"Dedication"} field={this.form.$('dedication.note')} label={"Dedication Note"}/></div> label={"Dedication Note"}/></div>
: undefined } : undefined}
</div> </div>
</div> </div>