Finalize InputContractAgreementCheckbox

js/components/ascribe_forms/form.js

@@ -131,7 +131,6 @@ let Form = React.createClass({
                 // An input can also provide an `Object` as a value
                 // which we're going to merge with `data` (overwrites)
                 if(ref.state.value.constructor === Object) {
-                    console.log(ref.state.value);
                     Object.assign(data, ref.state.value);
                 } else {
                     data[ref.props.name] = ref.state.value;

js/components/ascribe_forms/input_contract_agreement_checkbox.js

@@ -74,7 +74,21 @@ const InputContractAgreementCheckbox = React.createClass({
 
         state = mergeOptions(state, {
             value: {
+                // If `email` is defined in this component, `getContractAgreementsOrCreatePublic`
+                // is either:
+                //
+                // - fetching a already existing contract agreement; or
+                // - trying to create a contract agreement
+                //
+                // If both attempts result in `contractAgreement` being not defined,
+                // it means that the receiver hasn't defined a contract, which means
+                // a contract agreement cannot be created, which means we don't have to
+                // specify `contract_agreement_id` when sending a request to the server.
                 contract_agreement_id: contractAgreement ? contractAgreement.id : null,
+                // If the receiver hasn't set a contract or the contract was
+                // previously accepted, we set the terms to `true`
+                // as we always need to at least give a boolean value for `terms`
+                // to the API endpoint
                 terms: !contractAgreement || !!contractAgreement.datetime_accepted
             }
         });
@@ -91,7 +105,7 @@ const InputContractAgreementCheckbox = React.createClass({
         this.props.onChange(event);
     },
 
-    getContractAgreement(contractAgreementList) {
+    getContractAgreement(contractAgreementList = this.state.contractAgreementList) {
         if (contractAgreementList && contractAgreementList.length > 0) {
             return contractAgreementList[0];
         }
@@ -107,30 +121,22 @@ const InputContractAgreementCheckbox = React.createClass({
     },
 
     getAppendix() {
-        const { contractAgreementList } = this.state;
+        const contractAgreement = this.getContractAgreement();
 
-        if (contractAgreementList && contractAgreementList.length > 0) {
+        if (contractAgreement &&
-            const appendix = contractAgreementList[0].appendix;
+            contractAgreement.appendix &&
-            if (appendix && appendix.default) {
+            contractAgreement.appendix.default) {
             return (
-                    <pre className="ascribe-pre">{appendix.default}</pre>
+                <div className="ascribe-property contract-appendix-form">
+                    <p><span>{getLangText('Appendix')}</span></p>
+                    <pre className="ascribe-pre">{contractAgreement.appendix.default}</pre>
+                </div>
             );
         }
-        }
     },
 
     getContractCheckbox() {
-        const { name,
+        const contractAgreement = this.getContractAgreement();
-                disabled,
-                style } = this.props;
-        const { contractAgreementList } = this.state;
-        const contractAgreement = this.getContractAgreement(contractAgreementList);
-        const inputCheckboxProps = {
-            name,
-            disabled,
-            style,
-            onChange: this.onChange
-        };
 
         if(contractAgreement) {
             const {
@@ -145,7 +151,7 @@ const InputContractAgreementCheckbox = React.createClass({
                 return (
                     <div className="notification-contract-pdf">
                         <embed
-                            className="loan-form"
+                            className="embed-form"
                             src={contractUrl}
                             alt="pdf"
                             pluginspage="http://www.adobe.com/products/acrobat/readstep2.html"/>
@@ -155,9 +161,17 @@ const InputContractAgreementCheckbox = React.createClass({
                     </div>
                 );
             } else {
+                const {
+                    name,
+                    disabled,
+                    style } = this.props;
+
                 return (
                     <InputCheckbox
-                        {...inputCheckboxProps}
+                        name={name}
+                        disabled={disabled}
+                        style={style}
+                        onChange={this.onChange}
                         key="terms_explicitly"
                         defaultChecked={false}>
                         <span>

js/components/ascribe_forms/property.js

@@ -42,7 +42,8 @@ const Property = React.createClass({
         ]),
         style: object,
         expanded: bool,
-        checkboxLabel: string
+        checkboxLabel: string,
+        autoFocus: bool
     },
 
     getDefaultProps() {
@@ -75,6 +76,12 @@ const Property = React.createClass({
         };
     },
 
+    componentDidMount() {
+        if(this.props.autoFocus) {
+            this.handleFocus();
+        }
+    },
+
     componentWillReceiveProps(nextProps) {
         let childInput = this.refs.input;
 
@@ -86,7 +93,7 @@ const Property = React.createClass({
         //    set from the outside as a prop then(!!!))
         //
         // This handles case 1. and 3.
-        if(typeof nextProps.expanded === this.props.expanded && nextProps.expanded !== this.state.expanded && !this.props.checkboxLabel) {
+        if(nextProps.expanded !== this.props.expanded && nextProps.expanded !== this.state.expanded && !this.props.checkboxLabel) {
             this.setState({ expanded: nextProps.expanded });
         }
 

sass/ascribe_notification_page.scss

@@ -31,18 +31,11 @@
         margin-top: .5em;
         margin-bottom: 1em;
 
-        .consign-form,
+        &.embed-form {
-        .loan-form {
-            margin-top: .5em;
             height: 45vh;
         }
     }
 
-    .consign-form,
-    .loan-form {
-        height: 40vh;
-    }
-
     .notification-contract-pdf-download {
         text-align: left;
         margin-left: 1em;
@@ -72,3 +65,7 @@
         width: 100%;
     }
 }
+
+.ascribe-property.contract-appendix-form {
+    padding-left: 0;
+}