finalizing loan form

js/actions/loan_contract_actions.js

@@ -19,13 +19,15 @@ class LoanContractActions {
                     if (contracts && contracts.length > 0) {
                         this.actions.updateLoanContract({
                             contractKey: contracts[0].s3Key,
-                            contractUrl: contracts[0].s3Url
+                            contractUrl: contracts[0].s3Url,
+                            contractEmail: email
                         });
                     }
                     else {
                         this.actions.updateLoanContract({
                             contractKey: null,
-                            contractUrl: null
+                            contractUrl: null,
+                            contractEmail: null
                         });
                     }
                 })
@@ -33,7 +35,8 @@ class LoanContractActions {
                     console.error(err);
                     this.actions.updateLoanContract({
                         contractKey: null,
-                        contractUrl: null
+                        contractUrl: null,
+                        contractEmail: null
                     });
                 });
             } else {

js/components/ascribe_buttons/acl_button.js

@@ -79,7 +79,7 @@ let AclButton = React.createClass({
                 form: (<LoanForm
                         message={this.getLoanMessage()}
                         id={this.getFormDataId()}
-                        url={apiUrls.ownership_loans}/>
+                        url={this.isPiece() ? apiUrls.ownership_loans_pieces : apiUrls.ownership_loans_editions}/>
                 ),
                 handleSuccess: this.showNotification
             };

js/components/ascribe_forms/form_loan_new.js

@@ -14,7 +14,9 @@ import LoanContractStore from '../../stores/loan_contract_store';
 import LoanContractActions from '../../actions/loan_contract_actions';
 
 import AppConstants from '../../constants/application_constants';
-import { getLangText } from '../../utils/lang_utils.js';
+
+import { mergeOptions } from '../../utils/general_utils';
+import { getLangText } from '../../utils/lang_utils';
 
 
 let LoanForm = React.createClass({
@@ -54,13 +56,14 @@ let LoanForm = React.createClass({
         if(this.state.contractKey && this.state.contractUrl) {
             return (
                 <Property
-                    name='terms'
+                    name="terms"
-                    label={getLangText('Loan contract')}>
+                    className="ascribe-settings-property-collapsible-toggle"
+                    style={{paddingBottom: 0}}>
                     <InputCheckbox>
                         <span>
                             {getLangText('I agree to the')}&nbsp;
                             <a href={this.state.contractUrl} target="_blank">
-                                {getLangText('terms of')} {this.refs.loaneeEmail.getDomNode().value}
+                                {getLangText('terms of')} {this.state.contractEmail}
                             </a>
                         </span>
                     </InputCheckbox>
@@ -69,6 +72,20 @@ let LoanForm = React.createClass({
         }
     },
 
+    onRequestHide() {
+        // Since the modal can be opened without sending it to the server
+        // and therefore clearing the store,
+        // we'll need to make sure to flush the store once the
+        // modal unmounts
+        LoanContractActions.updateLoanContract({
+            contractUrl: null,
+            contractEmail: null,
+            contractKey: null
+        });
+
+        this.props.onRequestHide();
+    },
+
     render() {
 
         return (
@@ -86,7 +103,7 @@ let LoanForm = React.createClass({
                             <Button
                                 className="btn btn-danger btn-delete btn-sm ascribe-margin-1px"
                                 style={{marginLeft: '0'}}
-                                onClick={this.props.onRequestHide}>{getLangText('CLOSE')}</Button>
+                                onClick={this.onRequestHide}>{getLangText('CLOSE')}</Button>
                         </p>
                     </div>}
                 spinner={
@@ -107,9 +124,8 @@ let LoanForm = React.createClass({
                     label={getLangText('Gallery/exhibition (optional)')}
                     onBlur={this.handleOnBlur}>
                     <input
-                        type="email"
+                        type="text"
-                        placeholder={getLangText('Gallery/exhibition (optional)')}
+                        placeholder={getLangText('Gallery/exhibition (optional)')}/>
-                        required/>
                 </Property>
                 <Property
                     name='startdate'
@@ -124,7 +140,7 @@ let LoanForm = React.createClass({
                         placeholderText={getLangText('Loan end date')} />
                 </Property>
                 <Property
-                    name='consign_message'
+                    name='loan_message'
                     label={getLangText('Personal Message')}
                     editable={true}>
                     <InputTextAreaToggable
@@ -134,7 +150,7 @@ let LoanForm = React.createClass({
                         placeholder={getLangText('Enter a message...')}
                         required="required"/>
                 </Property>
-                {this.getContractCheckbox()}
+                
                 <Property
                     name='password'
                     label={getLangText('Password')}>
@@ -143,7 +159,7 @@ let LoanForm = React.createClass({
                         placeholder={getLangText('Enter your password')}
                         required/>
                 </Property>
-                <hr />
+                {this.getContractCheckbox()}
             </Form>
         );
     }

js/components/ascribe_forms/input_date.js

@@ -2,7 +2,6 @@
 
 import React from 'react';
 
-import AlertMixin from '../../mixins/alert_mixin';
 import DatePicker from 'react-datepicker/dist/react-datepicker';
 
 let InputDate = React.createClass({
@@ -11,31 +10,33 @@ let InputDate = React.createClass({
         placeholderText: React.PropTypes.string
     },
 
-    mixins: [AlertMixin],
-
     getInitialState() {
         return {
-            value: null,
+            value: null
-            value_formatted: null,
-            alerts: null // needed in AlertMixin
         };
     },
 
     handleChange(date) {
+        let formattedDate = date.format('YYYY-MM-DD');
         this.setState({
-            value: date,
+            value: formattedDate,
-            value_formatted: date.format('YYYY-MM-DD')});
+            value_moment: date
+        });
+
+        this.props.onChange({
+            target: {
+                value: formattedDate
+            }
+        });
     },
 
     render: function () {
-        let alerts = (this.props.submitted) ? null : this.state.alerts;
+        console.log(this.state.value);
         return (
             <div className="form-group">
-                {alerts}
                 <DatePicker
-                    key="example2"
                     dateFormat="YYYY-MM-DD"
-                    selected={this.state.value}
+                    selected={this.state.value_moment}
                     onChange={this.handleChange}
                     placeholderText={this.props.placeholderText}/>
             </div>

js/components/ascribe_forms/property.js

@@ -82,7 +82,7 @@ let Property = React.createClass({
             this.props.onChange(event);
         }
 
-        this.setState({value: true});
+        this.setState({value: event.target.value});
     },
 
     handleFocus() {

js/constants/api_urls.js

@@ -24,7 +24,8 @@ let apiUrls = {
     'ownership_consigns': AppConstants.apiEndpoint + 'ownership/consigns/',
     'ownership_consigns_confirm': AppConstants.apiEndpoint + 'ownership/consigns/confirm/',
     'ownership_consigns_deny': AppConstants.apiEndpoint + 'ownership/consigns/deny/',
-    'ownership_loans': AppConstants.apiEndpoint + 'ownership/loans/',
+    'ownership_loans_pieces': AppConstants.apiEndpoint + 'ownership/loans/pieces/',
+    'ownership_loans_editions': AppConstants.apiEndpoint + 'ownership/loans/editions/',
     'ownership_loans_confirm': AppConstants.apiEndpoint + 'ownership/loans/confirm/',
     'ownership_loans_deny': AppConstants.apiEndpoint + 'ownership/loans/deny/',
     'ownership_loans_contract': AppConstants.apiEndpoint + 'ownership/loans/editions/contract/',

js/fetchers/ownership_fetcher.js

@@ -1,8 +1,8 @@
 'use strict';
 
 import requests from '../utils/requests';
-import AppConstants from '../constants/application_constants';
 
+import ApiUrls from '../constants/api_urls';
 
 let OwnershipFetcher = {
     /**
@@ -10,7 +10,7 @@ let OwnershipFetcher = {
      * If no arg is supplied, load the current user
      */
     fetchLoanContract(email) {
-        return requests.get(AppConstants.apiEndpoint + 'ownership/loans/contract/?loanee=' + email);
+        return requests.get(ApiUrls.ownership_loans_contract + '?loanee=' + email);
     }
 };
 

js/stores/loan_contract_store.js

@@ -8,12 +8,14 @@ class LoanContractStore {
     constructor() {
         this.contractKey = null;
         this.contractUrl = null;
+        this.contractEmail = null;
         this.bindActions(LoanContractActions);
     }
 
-    onUpdateLoanContract({contractKey, contractUrl}) {
+    onUpdateLoanContract({contractKey, contractUrl, contractEmail}) {
         this.contractKey = contractKey;
         this.contractUrl = contractUrl;
+        this.contractEmail = contractEmail;
     }
 }