Fix references to form due to nested property elements

js/components/ascribe_forms/form.js

@@ -124,8 +124,12 @@ let Form = React.createClass({
     getFormData() {
         let data = {};
 
-        for (let ref in this.refs) {
+        for (let refName in this.refs) {
-            data[this.refs[ref].props.name] = this.refs[ref].state.value;
+            const ref = this.refs[refName];
+
+            if (ref.state && 'value' in ref.state) {
+                data[ref.props.name] = ref.state.value;
+            }
         }
 
         if (typeof this.props.getFormData === 'function') {

js/components/ascribe_forms/form_loan.js

@@ -57,13 +57,6 @@ let LoanForm = React.createClass({
         };
     },
 
-    getFormData() {
-        return mergeOptions(
-            this.props.id,
-            this.refs.contractAgreement.getFormDataForProperty()
-        );
-    },
-
     handleEmailOnChange(event) {
         // event.target.value is the submitted email of the loanee
         this.setState({
@@ -75,6 +68,13 @@ let LoanForm = React.createClass({
         this.handleEmailOnChange();
     },
 
+    getFormData() {
+        return mergeOptions(
+            this.props.id,
+            this.refs.contractAgreement.getFormDataForProperty()
+        );
+    },
+
     getButtons() {
         if(this.props.loanHeading) {
             return (
@@ -191,10 +191,11 @@ let LoanForm = React.createClass({
                         required={showPersonalMessage}/>
                 </Property>
                 <ContractAgreementProperty
-                    ref='contractAgreement'
+                    ref={ref => this.refs.contractAgreement = ref}
                     createPublicContractAgreement={createPublicContractAgreement}
                     email={email}
                     embedClassName={'loan-form'}
+                    name='contract_agreement'
                     label={getLangText('Loan Contract')} />
                 <Property
                     name='password'

js/components/ascribe_forms/property_contract_agreement.js

@@ -13,10 +13,16 @@ import { isEmail } from '../../utils/regex_utils';
 
 let ContractAgreementProperty = React.createClass({
     propTypes: {
-        createPublicContractAgreement: React.PropTypes.string,
+        createPublicContractAgreement: React.PropTypes.bool,
         email: React.PropTypes.string,
         embedClassName: React.PropTypes.string,
-        label: React.PropTypes.string
+        label: React.PropTypes.string,
+
+        // Necessary for Form to pick this element up as a ref
+        name: React.PropTypes.string,
+
+        // Passed down from Form element
+        handleChange: React.PropTypes.func
     },
 
     getDefaultProps() {
@@ -37,11 +43,13 @@ let ContractAgreementProperty = React.createClass({
     componentWillReceiveProps({ email: nextEmail }) {
         const { contractAgreementList } = this.state;
 
-        if (nextEmail && this.props.email !== nextEmail && isEmail(nextEmail)) {
+        if (this.props.email !== nextEmail) {
+            if (isEmail(nextEmail)) {
                 this.getContractAgreementsOrCreatePublic(nextEmail);
             } else if (contractAgreementList && contractAgreementList.length > 0) {
                 ContractAgreementListActions.flushContractAgreementList();
             }
+        }
     },
 
     componentWillUnmount() {
@@ -53,14 +61,21 @@ let ContractAgreementProperty = React.createClass({
     },
 
     getFormDataForProperty() {
-        return this.getContractAgreementId();
+        const contractAgreementId = this.getContractAgreementId();
+        const formData = {
+            'terms': this.refs.terms.state.value
+        };
+
+        if (contractAgreementId) {
+            formData.contract_agreement_id = contractAgreementId;
+        }
+
+        return formData;
     },
 
     getContractAgreementId() {
         if (this.state.contractAgreementList && this.state.contractAgreementList.length > 0) {
-            return { 'contract_agreement_id': this.state.contractAgreementList[0].id };
+            return this.state.contractAgreementList[0].id;
-        } else {
-            return {};
         }
     },
 
@@ -82,7 +97,8 @@ let ContractAgreementProperty = React.createClass({
                 return (
                     <Property
                         name='appendix'
-                        label={getLangText('Appendix')}>
+                        label={getLangText('Appendix')}
+                        handleChange={this.props.handleChange}>
                         <pre className="ascribe-pre">{appendix.default}</pre>
                     </Property>
                 );
@@ -91,24 +107,27 @@ let ContractAgreementProperty = React.createClass({
     },
 
     getContractCheckbox() {
+        const { embedClassName, handleChange, label } = this.props;
         const { contractAgreementList } = this.state;
 
         if (contractAgreementList && 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)
             const contractAgreement = contractAgreementList[0];
             const { issuer: contractIssuer, blob: { url_safe: contractUrl } } = contractAgreement.contract;
 
+            // 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)
             if (contractAgreement.datetime_accepted) {
                 return (
                     <Property
+                        ref="terms"
                         name="terms"
-                        label={this.props.label}
+                        label={label}
                         hidden={false}
+                        handleChange={handleChange}
                         className="notification-contract-pdf">
                         <embed
-                            className={this.props.embedClassName}
+                            className={embedClassName}
                             src={contractUrl}
                             alt="pdf"
                             pluginspage="http://www.adobe.com/products/acrobat/readstep2.html"/>
@@ -125,8 +144,10 @@ let ContractAgreementProperty = React.createClass({
             } else {
                 return (
                     <Property
+                        ref="terms"
                         name="terms"
                         className="ascribe-property-collapsible-toggle"
+                        handleChange={handleChange}
                         style={{paddingBottom: 0}}>
                         <InputCheckbox
                             key="terms_explicitly"
@@ -144,7 +165,9 @@ let ContractAgreementProperty = React.createClass({
         } else {
             return (
                 <Property
+                    ref="terms"
                     name="terms"
+                    handleChange={handleChange}
                     style={{paddingBottom: 0}}
                     hidden={true}>
                     <InputCheckbox

sass/ascribe_notification_page.scss

@@ -31,12 +31,14 @@
         margin-top: .5em;
         margin-bottom: 1em;
 
+        .consign-form,
         .loan-form {
             margin-top: .5em;
             height: 45vh;
         }
     }
 
+    .consign-form,
     .loan-form {
         height: 40vh;
     }