Merge remote-tracking branch 'remotes/origin/AD-499-whitelabel-prize-with-sluice-as-k' into AD-419-decouple-piece-registration-from-

js/actions/loan_contract_actions.js

@@ -0,0 +1,48 @@
+'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,
+                            contractEmail: email
+                        });
+                    }
+                    else {
+                        this.actions.updateLoanContract({
+                            contractKey: null,
+                            contractUrl: null,
+                            contractEmail: null
+                        });
+                    }
+                })
+                .catch((err) => {
+                    console.error(err);
+                    this.actions.updateLoanContract({
+                        contractKey: null,
+                        contractUrl: null,
+                        contractEmail: null
+                    });
+                });
+            } else {
+                /* No email was entered - Ignore and keep going*/
+            }
+    }
+}
+
+export default alt.createActions(LoanContractActions);

js/components/ascribe_accordion_list/accordion_list_item.js

@@ -13,6 +13,9 @@ import CreateEditionsForm from '../ascribe_forms/create_editions_form';
 import PieceListActions from '../../actions/piece_list_actions';
 import PieceListStore from '../../stores/piece_list_store';
 
+import WhitelabelStore from '../../stores/whitelabel_store';
+import WhitelabelActions from '../../actions/whitelabel_actions';
+
 import EditionListActions from '../../actions/edition_list_actions';
 
 import GlobalNotificationModel from '../../models/global_notification_model';
@@ -40,16 +43,19 @@ let AccordionListItem = React.createClass({
             {
                 showCreateEditionsDialog: false
             },
-            PieceListStore.getState()
+            PieceListStore.getState(),
+            WhitelabelStore.getState()
         );
     },
 
     componentDidMount() {
         PieceListStore.listen(this.onChange);
+        WhitelabelStore.listen(this.onChange);
     },
 
     componentWillUnmount() {
         PieceListStore.unlisten(this.onChange);
+        WhitelabelStore.unlisten(this.onChange);
     },
 
     onChange(state) {
@@ -111,6 +117,17 @@ let AccordionListItem = React.createClass({
         }
     },
 
+    getLicences() {
+        // convert this to acl_view_licences later
+        if(this.state.whitelabel.name === 'Creative Commons France') {
+            return (
+                <a href={this.props.content.license_type.url} target="_blank" className="pull-right">
+                    {getLangText('%s license', this.props.content.license_type.code)}
+                </a>
+            );
+        }
+    },
+
     render() {
         let linkData;
 
@@ -173,6 +190,7 @@ let AccordionListItem = React.createClass({
                                         {getLangText('Submitted to prize')} <span className="glyphicon glyphicon-ok" aria-hidden="true"></span>
                                     </button>
                                 </AclProxy>
+                                {this.getLicences()}
                             </div>
                         </div>
                         <span style={{'clear': 'both'}}></span>

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(){
@@ -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={this.isPiece() ? apiUrls.ownership_loans_pieces : apiUrls.ownership_loans_editions}/>
+                ),
                 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_detail/media_container.js

@@ -22,6 +22,7 @@ let MediaContainer = React.createClass({
         let mimetype = this.props.content.digital_work.mime;
         let embed = null;
         let extraData = null;
+        let isEmbedDisabled = mimetype === 'video' && this.props.content.digital_work.isEncoding !== undefined && this.props.content.digital_work.isEncoding !== 100;
 
         if (this.props.content.digital_work.encoding_urls) {
             extraData = this.props.content.digital_work.encoding_urls.map(e => { return { url: e.url, type: e.label }; });
@@ -31,25 +32,26 @@ let MediaContainer = React.createClass({
             embed = (
                 <CollapsibleButton
                     button={
-                        <Button bsSize="xsmall" className="ascribe-margin-1px">
+                        <Button bsSize="xsmall" className="ascribe-margin-1px" disabled={isEmbedDisabled ? '"disabled"' : ''}>
                             Embed
                         </Button>
                     }
                     panel={
                         <pre className="">
                             {'<iframe width="560" height="315" src="http://embed.ascribe.io/content/'
-                                + this.props.content.bitcoin_id + '" frameborder="0" allowfullscreen></iframe>'
-                            }
+                                + this.props.content.bitcoin_id + '" frameborder="0" allowfullscreen></iframe>'}
                         </pre>
                     }/>
             );
         }
         return (
             <div>
-                <MediaPlayer mimetype={mimetype}
+                <MediaPlayer
+                    mimetype={mimetype}
                     preview={thumbnail}
                     url={this.props.content.digital_work.url}
-                                        extraData={extraData} />
+                    extraData={extraData}
+                    encodingStatus={this.props.content.digital_work.isEncoding} />
                 <p className="text-center">
                     <AclProxy
                         aclObject={this.props.content.acl}

js/components/ascribe_detail/piece.js

@@ -6,8 +6,12 @@ import Router from 'react-router';
 import Row from 'react-bootstrap/lib/Row';
 import Col from 'react-bootstrap/lib/Col';
 
+import CollapsibleParagraph from './../ascribe_collapsible/collapsible_paragraph';
+
 import DetailProperty from './detail_property';
 
+import FurtherDetails from './further_details';
+
 import UserActions from '../../actions/user_actions';
 import UserStore from '../../stores/user_store';
 
@@ -33,15 +37,13 @@ import GlobalNotificationActions from '../../actions/global_notification_actions
 import { getLangText } from '../../utils/lang_utils';
 import { mergeOptions } from '../../utils/general_utils';
 
-
 /**
  * This is the component that implements display-specific functionality
  */
 let Piece = React.createClass({
     propTypes: {
         piece: React.PropTypes.object,
-        loadPiece: React.PropTypes.func,
-        children: React.PropTypes.object
+        loadPiece: React.PropTypes.func
     },
 
     mixins: [Router.Navigation],
@@ -157,8 +159,20 @@ let Piece = React.createClass({
                     </AclButtonList>
 
                     {this.getCreateEditionsDialog()}
-                    {this.props.children}
 
+                    <CollapsibleParagraph
+                        title="Further Details"
+                        show={this.props.piece.acl.acl_edit
+                            || Object.keys(this.props.piece.extra_data).length > 0
+                            || this.props.piece.other_data !== null}
+                        defaultExpanded={true}>
+                        <FurtherDetails
+                            editable={this.props.piece.acl.acl_edit}
+                            pieceId={this.props.piece.id}
+                            extraData={this.props.piece.extra_data}
+                            otherData={this.props.piece.other_data}
+                            handleSuccess={this.props.loadPiece}/>
+                    </CollapsibleParagraph>
                 </Col>
             </Row>
         );

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,168 @@
+'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 { mergeOptions } from '../../utils/general_utils';
+import { getLangText } from '../../utils/lang_utils';
+
+
+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"
+                    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.state.contractEmail}
+                            </a>
+                        </span>
+                    </InputCheckbox>
+                </Property>
+            );
+        }
+    },
+
+    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 (
+            <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.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="text"
+                        placeholder={getLangText('Gallery/exhibition (optional)')}/>
+                </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='loan_message'
+                    label={getLangText('Personal Message')}
+                    editable={true}>
+                    <InputTextAreaToggable
+                        rows={1}
+                        editable={true}
+                        defaultValue={this.props.message}
+                        placeholder={getLangText('Enter a message...')}
+                        required="required"/>
+                </Property>
+                
+                <Property
+                    name='password'
+                    label={getLangText('Password')}>
+                    <input
+                        type="password"
+                        placeholder={getLangText('Enter your password')}
+                        required/>
+                </Property>
+                {this.getContractCheckbox()}
+            </Form>
+        );
+    }
+});
+
+export default LoanForm;

js/components/ascribe_forms/form_signup.js

@@ -58,12 +58,9 @@ let SignupForm = React.createClass({
     },
 
     handleSuccess(response){
-
-        let notificationText = getLangText('Sign up successful');
-        let notification = new GlobalNotificationModel(notificationText, 'success', 50000);
+        let notification = new GlobalNotificationModel(getLangText('Sign up successful'), 'success', 50000);
         GlobalNotificationActions.appendGlobalNotification(notification);
-        this.props.handleSuccess(getLangText('We sent an email to your address') + ' ' + response.user.email +
-                                 ', ' + getLangText('please confirm') + '.');
+        this.props.handleSuccess(getLangText('We sent an email to your address') + ' ' + response.user.email + ', ' + getLangText('please confirm') + '.');
 
     },
     getFormData(){

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_formatted: null,
-            alerts: null // needed in AlertMixin
+            value: null
         };
     },
 
     handleChange(date) {
+        let formattedDate = date.format('YYYY-MM-DD');
         this.setState({
-            value: date,
-            value_formatted: date.format('YYYY-MM-DD')});
+            value: formattedDate,
+            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() {
@@ -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/components/signup_container.js

@@ -2,9 +2,6 @@
 
 import React from 'react';
 import SignupForm from './ascribe_forms/form_signup';
-import Property from './ascribe_forms/property';
-
-import { getLangText } from '../utils/lang_utils';
 
 
 let SignupContainer = React.createClass({

js/components/whitelabel/prize/components/landing.js

@@ -14,20 +14,20 @@ let Landing = React.createClass({
             <div className="container">
                 <div className="row">
                     <div className="col-xs-12 wp-landing-wrapper">
-                        <h1>Sluice Art Prize 2015</h1>
+                        <h1>Sluice_screens ↄc Prize 2015</h1>
                         <p>
-                            This is the submission page for sluice art fair price 2015.
+                            This is the submission page for Sluice_screens ↄc Prize 2015.
                         </p>
                         <ButtonGroup className="enter" bsSize="large" vertical block>
                             <ButtonLink to="signup">
-                                Signup to the prize
+                                Signup to submit
                             </ButtonLink>
 
                             <p>
                                 or, already an ascribe user?
                             </p>
                             <ButtonLink to="login">
-                                Login with ascribe
+                                Login to submit
                             </ButtonLink>
                         </ButtonGroup>
                     </div>

js/components/whitelabel/prize/components/signup_container.js

@@ -28,16 +28,17 @@ let SignupContainer = React.createClass({
                     </div>
                 </div>
             );
-        }
+        } else {
             return (
                 <div className="ascribe-login-wrapper">
                     <SignupForm
-                    headerMessage="Sign up to the prize"
+                        headerMessage="Create account for submission"
                         submitMessage="Sign up"
                         handleSuccess={this.handleSuccess} />
                 </div>
             );
         }
+    }
 });
 
 

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

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

sass/ascribe_settings.scss

@@ -100,7 +100,7 @@
         margin-top: 0 !important;
     }
 
-    > input, > pre, > textarea, > select {
+    > input, > pre, > textarea, > select, .datepicker__input {
         font-weight: 400;
         font-size: 1.1em;
         width:100%;
@@ -109,6 +109,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

@@ -243,18 +243,6 @@ form{
     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;
 }