1
0
mirror of https://github.com/ascribe/onion.git synced 2024-12-23 01:39:36 +01:00
onion/js/components/ascribe_forms/form_loan.js

308 lines
12 KiB
JavaScript
Raw Normal View History

'use strict';
2015-05-29 16:53:30 +02:00
import React from 'react';
2015-08-12 13:34:41 +02:00
import classnames from 'classnames';
2015-07-15 17:51:09 +02:00
import Button from 'react-bootstrap/lib/Button';
import Form from './form';
import Property from './property';
import InputTextAreaToggable from './input_textarea_toggable';
2015-06-01 14:16:06 +02:00
import InputDate from './input_date';
2015-07-15 17:51:09 +02:00
import InputCheckbox from './input_checkbox';
import ContractAgreementListStore from '../../stores/contract_agreement_list_store';
import ContractAgreementListActions from '../../actions/contract_agreement_list_actions';
2015-07-15 17:51:09 +02:00
import AscribeSpinner from '../ascribe_spinner';
2015-06-05 11:40:49 +02:00
import { mergeOptions } from '../../utils/general_utils';
2015-07-15 17:51:09 +02:00
import { getLangText } from '../../utils/lang_utils';
2015-10-15 11:17:16 +02:00
import AclInformation from '../ascribe_buttons/acl_information';
2015-07-03 19:08:56 +02:00
2015-06-01 13:02:53 +02:00
let LoanForm = React.createClass({
2015-07-15 17:51:09 +02:00
propTypes: {
2015-08-12 14:40:44 +02:00
loanHeading: React.PropTypes.string,
2015-08-12 13:34:41 +02:00
email: React.PropTypes.string,
gallery: React.PropTypes.string,
2015-08-12 13:53:17 +02:00
startdate: React.PropTypes.object,
enddate: React.PropTypes.object,
2015-08-12 13:34:41 +02:00
showPersonalMessage: React.PropTypes.bool,
2015-08-26 09:50:38 +02:00
showEndDate: React.PropTypes.bool,
showStartDate: React.PropTypes.bool,
showPassword: React.PropTypes.bool,
2015-07-15 17:51:09 +02:00
url: React.PropTypes.string,
id: React.PropTypes.object,
message: React.PropTypes.string,
createPublicContractAgreement: React.PropTypes.bool,
2015-07-15 17:51:09 +02:00
handleSuccess: React.PropTypes.func
},
2015-08-12 13:34:41 +02:00
getDefaultProps() {
return {
2015-08-12 14:40:44 +02:00
loanHeading: '',
2015-08-26 09:50:38 +02:00
showPersonalMessage: true,
2015-08-26 17:32:42 +02:00
showEndDate: true,
showStartDate: true,
showPassword: true,
createPublicContractAgreement: true
2015-08-12 13:34:41 +02:00
};
},
getInitialState() {
return ContractAgreementListStore.getState();
},
2015-07-15 17:51:09 +02:00
componentDidMount() {
ContractAgreementListStore.listen(this.onChange);
this.getContractAgreementsOrCreatePublic(this.props.email);
2015-07-15 17:51:09 +02:00
},
2015-05-29 16:53:30 +02:00
/**
* This method needs to be in form_loan as some whitelabel pages (Cyland) load
* the loanee's email async!
*
* SO LEAVE IT IN!
*/
2015-09-15 13:22:52 +02:00
componentWillReceiveProps(nextProps) {
if(nextProps && nextProps.email && this.props.email !== nextProps.email) {
2015-09-15 13:22:52 +02:00
this.getContractAgreementsOrCreatePublic(nextProps.email);
}
},
2015-07-15 17:51:09 +02:00
componentWillUnmount() {
ContractAgreementListStore.unlisten(this.onChange);
2015-05-29 16:53:30 +02:00
},
2015-07-15 17:51:09 +02:00
onChange(state) {
this.setState(state);
2015-05-29 16:53:30 +02:00
},
getContractAgreementsOrCreatePublic(email){
2015-09-18 13:49:50 +02:00
ContractAgreementListActions.flushContractAgreementList.defer();
2015-09-17 13:28:59 +02:00
if (email) {
// fetch the available contractagreements (pending/accepted)
ContractAgreementListActions.fetchAvailableContractAgreementList(email, true);
2015-09-17 13:28:59 +02:00
}
},
2015-07-15 17:51:09 +02:00
getFormData(){
return mergeOptions(
this.props.id,
this.getContractAgreementId()
);
2015-06-01 13:02:53 +02:00
},
2015-08-28 11:13:28 +02:00
handleOnChange(event) {
// event.target.value is the submitted email of the loanee
if(event && event.target && event.target.value && event.target.value.match(/.*@.*\..*/)) {
this.getContractAgreementsOrCreatePublic(event.target.value);
} else {
ContractAgreementListActions.flushContractAgreementList();
2015-08-28 11:13:28 +02:00
}
2015-06-01 13:02:53 +02:00
},
2015-07-15 17:51:09 +02:00
getContractAgreementId() {
if (this.state.contractAgreementList && this.state.contractAgreementList.length > 0) {
return {'contract_agreement_id': this.state.contractAgreementList[0].id};
}
2015-09-28 15:14:45 +02:00
return {};
},
2015-07-15 17:51:09 +02:00
getContractCheckbox() {
if(this.state.contractAgreementList && this.state.contractAgreementList.length > 0) {
// we need to define a key on the InputCheckboxes as otherwise
// react is not rerendering them on a store switch and is keeping
// the default value of the component (which is in that case true)
let contractAgreement = this.state.contractAgreementList[0];
let contract = contractAgreement.contract;
if(contractAgreement.datetime_accepted) {
return (
<Property
name="terms"
2015-09-28 15:14:45 +02:00
label={getLangText('Loan Contract')}
expanded={true}
className="notification-contract-pdf">
<embed
className="loan-form"
src={contract.blob.url_safe}
alt="pdf"
pluginspage="http://www.adobe.com/products/acrobat/readstep2.html"/>
2015-10-16 11:29:08 +02:00
<a href={contract.blob.url_safe} target="_blank">
2015-10-16 12:10:28 +02:00
<span className="glyphicon glyphicon-download" aria-hidden="true"></span> {getLangText('Download contract')}
2015-10-16 11:29:08 +02:00
</a>
{/* We still need to send the server information that we're accepting */}
<InputCheckbox
style={{'display': 'none'}}
key="terms_implicitly"
defaultChecked={true} />
</Property>
);
} else {
return (
<Property
name="terms"
className="ascribe-property-collapsible-toggle"
style={{paddingBottom: 0}}>
<InputCheckbox
key="terms_explicitly"
defaultChecked={false}>
<span>
{getLangText('I agree to the')}&nbsp;
<a href={contract.blob.url_safe} target="_blank">
{getLangText('terms of ')} {contract.issuer}
</a>
</span>
</InputCheckbox>
</Property>
);
}
2015-07-15 17:57:28 +02:00
} else {
return (
<Property
name="terms"
2015-07-28 15:33:47 +02:00
style={{paddingBottom: 0}}
expanded={false}>
2015-07-28 15:33:47 +02:00
<InputCheckbox
key="terms_implicitly"
2015-07-28 15:33:47 +02:00
defaultChecked={true} />
2015-07-15 17:57:28 +02:00
</Property>
);
2015-06-01 13:02:53 +02:00
}
2015-07-15 17:51:09 +02:00
},
2015-09-21 10:54:13 +02:00
getAppendix() {
if(this.state.contractAgreementList && this.state.contractAgreementList.length > 0) {
let appendix = this.state.contractAgreementList[0].appendix;
if (appendix && appendix.default) {
return (
<Property
name='appendix'
label={getLangText('Appendix')}>
<pre className="ascribe-pre">{appendix.default}</pre>
</Property>
2015-09-21 10:54:13 +02:00
);
}
}
return null;
},
2015-08-12 13:34:41 +02:00
getButtons() {
2015-08-12 14:40:44 +02:00
if(this.props.loanHeading) {
2015-08-12 13:34:41 +02:00
return (
<button
type="submit"
2015-10-12 17:55:02 +02:00
className="btn btn-default btn-wide">
2015-08-12 13:34:41 +02:00
{getLangText('Finish process')}
</button>
);
} else {
return (
<div className="modal-footer">
<p className="pull-right">
<Button
className="btn btn-default btn-sm ascribe-margin-1px"
type="submit">
{getLangText('LOAN')}
</Button>
</p>
</div>
);
}
},
2015-08-12 13:34:41 +02:00
render() {
2015-05-29 16:53:30 +02:00
return (
2015-07-15 17:51:09 +02:00
<Form
2015-08-12 14:40:44 +02:00
className={classnames({'ascribe-form-bordered': this.props.loanHeading})}
2015-07-15 17:51:09 +02:00
ref='form'
url={this.props.url}
getFormData={this.getFormData}
onReset={this.handleOnChange}
2015-07-15 17:51:09 +02:00
handleSuccess={this.props.handleSuccess}
2015-08-12 13:34:41 +02:00
buttons={this.getButtons()}
2015-07-15 17:51:09 +02:00
spinner={
<div className="modal-footer">
<p className="pull-right">
<AscribeSpinner color='dark-blue' size='md'/>
</p>
2015-07-15 17:51:09 +02:00
</div>}>
<div className={classnames({'ascribe-form-header': true, 'hidden': !this.props.loanHeading})}>
2015-08-12 14:40:44 +02:00
<h3>{this.props.loanHeading}</h3>
2015-08-12 13:34:41 +02:00
</div>
2015-10-15 11:17:16 +02:00
<AclInformation aim={'form'} verbs={['acl_loan']}/>
2015-07-15 17:51:09 +02:00
<Property
name='loanee'
label={getLangText('Loanee Email')}
2015-08-20 11:03:00 +02:00
editable={!this.props.email}
onChange={this.handleOnChange}
2015-08-21 11:29:57 +02:00
overrideForm={!!this.props.email}>
2015-07-15 17:51:09 +02:00
<input
2015-08-12 13:34:41 +02:00
value={this.props.email}
2015-07-15 17:51:09 +02:00
type="email"
placeholder={getLangText('Email of the loanee')}
required/>
</Property>
<Property
2015-08-26 09:50:38 +02:00
name='gallery'
2015-08-12 13:34:41 +02:00
label={getLangText('Gallery/exhibition (optional)')}
2015-08-20 11:03:00 +02:00
editable={!this.props.gallery}
2015-08-21 11:29:57 +02:00
overrideForm={!!this.props.gallery}>
2015-07-15 17:51:09 +02:00
<input
2015-08-12 13:34:41 +02:00
value={this.props.gallery}
2015-07-15 17:51:09 +02:00
type="text"
placeholder={getLangText('Gallery/exhibition (optional)')}/>
</Property>
<Property
name='startdate'
2015-08-12 13:34:41 +02:00
label={getLangText('Start date')}
2015-08-26 18:01:50 +02:00
editable={!this.props.startdate}
overrideForm={!!this.props.startdate}
expanded={this.props.showStartDate}>
2015-07-15 17:51:09 +02:00
<InputDate
2015-08-12 13:53:17 +02:00
defaultValue={this.props.startdate}
2015-07-15 17:51:09 +02:00
placeholderText={getLangText('Loan start date')} />
</Property>
<Property
name='enddate'
2015-08-26 18:01:50 +02:00
editable={!this.props.enddate}
overrideForm={!!this.props.enddate}
2015-08-12 13:34:41 +02:00
label={getLangText('End date')}
expanded={this.props.showEndDate}>
2015-07-15 17:51:09 +02:00
<InputDate
2015-08-12 13:53:17 +02:00
defaultValue={this.props.enddate}
2015-07-15 17:51:09 +02:00
placeholderText={getLangText('Loan end date')} />
</Property>
<Property
name='loan_message'
label={getLangText('Personal Message')}
2015-08-12 13:34:41 +02:00
editable={true}
overrideForm={true}
expanded={this.props.showPersonalMessage}>
2015-07-15 17:51:09 +02:00
<InputTextAreaToggable
rows={1}
defaultValue={this.props.message}
placeholder={getLangText('Enter a message...')}
required={this.props.showPersonalMessage}/>
2015-07-15 17:51:09 +02:00
</Property>
{this.getContractCheckbox()}
{this.getAppendix()}
2015-07-15 17:51:09 +02:00
<Property
name='password'
2015-08-26 09:50:38 +02:00
label={getLangText('Password')}
expanded={this.props.showPassword}>
2015-07-15 17:51:09 +02:00
<input
type="password"
placeholder={getLangText('Enter your password')}
2015-08-26 09:50:38 +02:00
required={this.props.showPassword ? 'required' : ''}/>
2015-07-15 17:51:09 +02:00
</Property>
2015-08-21 10:54:57 +02:00
{this.props.children}
2015-07-15 17:51:09 +02:00
</Form>
2015-05-29 16:53:30 +02:00
);
}
});
export default LoanForm;