loan form styling and loan contract store

js/actions/loan_contract_actions.js

@@ -0,0 +1,45 @@
+'use strict';
+
+import alt from '../alt';
+import OwnershipFetcher from '../fetchers/ownership_fetcher';
+
+
+class LoanContractActions {
+    constructor() {
+        this.generateActions(
+            'updateLoanContract'
+        );
+    }
+
+    fetchLoanContract(email) {
+
+        if(email.match(/.+\@.+\..+/)) {
+            OwnershipFetcher.fetchLoanContract(email)
+                .then((contracts) => {
+                    if (contracts && contracts.length > 0) {
+                        this.actions.updateLoanContract({
+                            contractKey: contracts[0].s3Key,
+                            contractUrl: contracts[0].s3Url
+                        });
+                    }
+                    else {
+                        this.actions.updateLoanContract({
+                            contractKey: null,
+                            contractUrl: null
+                        });
+                    }
+                })
+                .catch((err) => {
+                    console.error(err);
+                    this.actions.updateLoanContract({
+                        contractKey: null,
+                        contractUrl: null
+                    });
+                });
+            } else {
+                /* No email was entered - Ignore and keep going*/
+            }
+    }
+}
+
+export default alt.createActions(LoanContractActions);

js/components/ascribe_buttons/acl_button.js

@@ -5,7 +5,7 @@ import React from 'react';
 import ConsignForm from '../ascribe_forms/form_consign';
 import UnConsignForm from '../ascribe_forms/form_unconsign';
 import TransferForm from '../ascribe_forms/form_transfer';
-import LoanForm from '../ascribe_forms/form_loan';
+import LoanForm from '../ascribe_forms/form_loan_new';
 import ShareForm from '../ascribe_forms/form_share_email';
 import ModalWrapper from '../ascribe_modal/modal_wrapper';
 import AppConstants from '../../constants/application_constants';
@@ -30,7 +30,7 @@ let AclButton = React.createClass({
     },
 
     isPiece(){
-        return !(this.props.pieceOrEditions.constructor === Array);
+        return this.props.pieceOrEditions.constructor !== Array;
     },
 
     actionProperties(){
@@ -68,7 +68,7 @@ let AclButton = React.createClass({
                         message={this.getTransferMessage()}
                         id={this.getFormDataId()}
                         url={apiUrls.ownership_transfers}/>
-                    ),
+                ),
                 handleSuccess: this.showNotification
             };
         }
@@ -76,7 +76,11 @@ let AclButton = React.createClass({
             return {
                 title: getLangText('Loan artwork'),
                 tooltip: getLangText('Loan your artwork for a limited period of time'),
-                form: <LoanForm currentUser={ this.props.currentUser } editions={ this.props.pieceOrEditions }/>,
+                form: (<LoanForm
+                        message={this.getLoanMessage()}
+                        id={this.getFormDataId()}
+                        url={apiUrls.ownership_loans}/>
+                ),
                 handleSuccess: this.showNotification
             };
         }
@@ -135,6 +139,20 @@ let AclButton = React.createClass({
 ${getLangText('I transfer ownership of')}:
 ${this.getTitlesString()} ${getLangText('to you')}.
 
+${getLangText('Truly yours')},
+${this.props.currentUser.username}
+            `
+        );
+    },
+
+    // plz move to transfer form
+    getLoanMessage(){
+        return (
+            `${getLangText('Hi')},
+
+${getLangText('I loan')}:
+${this.getTitlesString()} ${getLangText('to you')}.
+
 ${getLangText('Truly yours')},
 ${this.props.currentUser.username}
             `
@@ -191,6 +209,7 @@ ${this.props.currentUser.username}
     render() {
         let shouldDisplay = this.props.availableAcls[this.props.action];
         let aclProps = this.actionProperties();
+
         return (
             <ModalWrapper
                 button={
@@ -198,10 +217,10 @@ ${this.props.currentUser.username}
                         {this.sanitizeAction()}
                     </button>
                 }
-                handleSuccess={ aclProps.handleSuccess }
-                title={ aclProps.title }
-                tooltip={ aclProps.tooltip }>
-                { aclProps.form }
+                handleSuccess={aclProps.handleSuccess}
+                title={aclProps.title}
+                tooltip={aclProps.tooltip}>
+                {aclProps.form}
             </ModalWrapper>
         );
     }

js/components/ascribe_forms/form_loan.js

@@ -13,7 +13,7 @@ import InputTextArea from './input_textarea';
 import OwnershipFetcher from '../../fetchers/ownership_fetcher';
 import ButtonSubmitOrClose from '../ascribe_buttons/button_submit_close';
 
-import { getLangText } from '../../utils/lang_utils.js'
+import { getLangText } from '../../utils/lang_utils.js';
 
 let LoanForm = React.createClass({
     

js/components/ascribe_forms/form_loan_new.js

@@ -0,0 +1,152 @@
+'use strict';
+
+import React from 'react';
+
+import Button from 'react-bootstrap/lib/Button';
+
+import Form from './form';
+import Property from './property';
+import InputTextAreaToggable from './input_textarea_toggable';
+import InputDate from './input_date';
+import InputCheckbox from './input_checkbox';
+
+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';
+
+
+let LoanForm = React.createClass({
+    propTypes: {
+        url: React.PropTypes.string,
+        id: React.PropTypes.object,
+        message: React.PropTypes.string,
+        onRequestHide: React.PropTypes.func,
+        handleSuccess: React.PropTypes.func
+    },
+
+    getInitialState() {
+        return LoanContractStore.getState();
+    },
+
+    componentDidMount() {
+        LoanContractStore.listen(this.onChange);
+    },
+
+    componentWillUnmount() {
+        LoanContractStore.unlisten(this.onChange);
+    },
+
+    onChange(state) {
+        this.setState(state);
+    },
+
+    getFormData(){
+        return this.props.id;
+    },
+
+    handleOnBlur(event) {
+        LoanContractActions.fetchLoanContract(event.target.value);
+    },
+
+    getContractCheckbox() {
+        if(this.state.contractKey && this.state.contractUrl) {
+            return (
+                <Property
+                    name='terms'
+                    label={getLangText('Loan contract')}>
+                    <InputCheckbox>
+                        <span>
+                            {getLangText('I agree to the')}&nbsp;
+                            <a href={this.state.contractUrl} target="_blank">
+                                {getLangText('terms of')} {this.refs.loaneeEmail.getDomNode().value}
+                            </a>
+                        </span>
+                    </InputCheckbox>
+                </Property>
+            );
+        }
+    },
+
+    render() {
+
+        return (
+            <Form
+                ref='form'
+                url={this.props.url}
+                getFormData={this.getFormData}
+                handleSuccess={this.props.handleSuccess}
+                buttons={
+                    <div className="modal-footer">
+                        <p className="pull-right">
+                            <Button
+                                className="btn btn-default btn-sm ascribe-margin-1px"
+                                type="submit">{getLangText('LOAN')}</Button>
+                            <Button
+                                className="btn btn-danger btn-delete btn-sm ascribe-margin-1px"
+                                style={{marginLeft: '0'}}
+                                onClick={this.props.onRequestHide}>{getLangText('CLOSE')}</Button>
+                        </p>
+                    </div>}
+                spinner={
+                    <div className="modal-footer">
+                        <img src={AppConstants.baseUrl + 'static/img/ascribe_animated_small.gif'} />
+                    </div>}>
+                <Property
+                    name='loanee'
+                    label={getLangText('Loanee Email')}
+                    onBlur={this.handleOnBlur}>
+                    <input
+                        type="email"
+                        placeholder={getLangText('Email of the loanee')}
+                        required/>
+                </Property>
+                <Property
+                    name='gallery_name'
+                    label={getLangText('Gallery/exhibition (optional)')}
+                    onBlur={this.handleOnBlur}>
+                    <input
+                        type="email"
+                        placeholder={getLangText('Gallery/exhibition (optional)')}
+                        required/>
+                </Property>
+                <Property
+                    name='startdate'
+                    label={getLangText('Start date')}>
+                    <InputDate
+                        placeholderText={getLangText('Loan start date')} />
+                </Property>
+                <Property
+                    name='enddate'
+                    label={getLangText('End date')}>
+                    <InputDate
+                        placeholderText={getLangText('Loan end date')} />
+                </Property>
+                <Property
+                    name='consign_message'
+                    label={getLangText('Personal Message')}
+                    editable={true}>
+                    <InputTextAreaToggable
+                        rows={1}
+                        editable={true}
+                        defaultValue={this.props.message}
+                        placeholder={getLangText('Enter a message...')}
+                        required="required"/>
+                </Property>
+                {this.getContractCheckbox()}
+                <Property
+                    name='password'
+                    label={getLangText('Password')}>
+                    <input
+                        type="password"
+                        placeholder={getLangText('Enter your password')}
+                        required/>
+                </Property>
+                <hr />
+            </Form>
+        );
+    }
+});
+
+export default LoanForm;

js/components/ascribe_forms/property.js

@@ -104,10 +104,14 @@ let Property = React.createClass({
         });
     },
 
-    handleBlur() {
+    handleBlur(event) {
         this.setState({
             isFocused: false
         });
+
+        if(this.props.onBlur) {
+            this.props.onBlur(event);
+        }
     },
 
     handleSuccess(){

js/stores/loan_contract_store.js

@@ -0,0 +1,20 @@
+'use strict';
+
+import alt from '../alt';
+import LoanContractActions from '../actions/loan_contract_actions';
+
+
+class LoanContractStore {
+    constructor() {
+        this.contractKey = null;
+        this.contractUrl = null;
+        this.bindActions(LoanContractActions);
+    }
+
+    onUpdateLoanContract({contractKey, contractUrl}) {
+        this.contractKey = contractKey;
+        this.contractUrl = contractUrl;
+    }
+}
+
+export default alt.createStore(LoanContractStore, 'LoanContractStore');

sass/ascribe_settings.scss

@@ -96,7 +96,7 @@
         margin-top: 0 !important;
     }
 
-    > input, > pre, > textarea, > select {
+    > input, > pre, > textarea, > select, .datepicker__input {
         font-weight: 400;
         font-size: 1.1em;
         width:100%;
@@ -105,6 +105,7 @@
         background-color: rgba(0,0,0,0);
         color: rgba(0,0,0,.8);
         padding-left: 0;
+        box-shadow: none;
 
         &:focus {
             border:0;

sass/main.scss

@@ -234,18 +234,6 @@ hr {
     font-style: italic;
 }
 
-.input-text-ascribe,
-.datepicker__input {
-    border-bottom: 1px solid black;
-    border-top: 0;
-    border-left: 0;
-    border-right: 0;
-    background: transparent;
-    border-radius: 0 !important;
-    box-shadow: none;
-    width: 100%;
-}
-
 .textarea-ascribe-message {
     height: 13em !important;
 }