Merge remote-tracking branch 'remotes/origin/AD-943-add-custom-additional-fields' into AD-996-add-action-buttons-to-piece-detai

js/actions/contract_agreement_list_actions.js

@@ -89,6 +89,10 @@ class ContractAgreementListActions {
         });
     }
 
+    flushContractAgreementList(){
+        this.actions.updateContractAgreementList(null);
+    }
+
 }
 
 export default alt.createActions(ContractAgreementListActions);

js/components/ascribe_buttons/acl_button.js

@@ -162,21 +162,24 @@ let AclButton = React.createClass({
     },
 
     render() {
-        let shouldDisplay = this.props.availableAcls[this.props.action];
+        if (this.props.availableAcls){
-        let aclProps = this.actionProperties();
+            let shouldDisplay = this.props.availableAcls[this.props.action];
-        let buttonClassName = this.props.buttonAcceptClassName ? this.props.buttonAcceptClassName : '';
+            let aclProps = this.actionProperties();
-        return (
+            let buttonClassName = this.props.buttonAcceptClassName ? this.props.buttonAcceptClassName : '';
-            <ModalWrapper
+            return (
-                trigger={
+                <ModalWrapper
-                    <button className={shouldDisplay ? 'btn btn-default btn-sm ' + buttonClassName : 'hidden'}>
+                    trigger={
-                        {this.sanitizeAction()}
+                        <button className={shouldDisplay ? 'btn btn-default btn-sm ' + buttonClassName : 'hidden'}>
-                    </button>
+                            {this.sanitizeAction()}
-                }
+                        </button>
-                handleSuccess={aclProps.handleSuccess}
+                    }
-                title={aclProps.title}>
+                    handleSuccess={aclProps.handleSuccess}
-                {aclProps.form}
+                    title={aclProps.title}>
-            </ModalWrapper>
+                    {aclProps.form}
-        );
+                </ModalWrapper>
+            );
+        }
+        return null;
     }
 });
 

js/components/ascribe_detail/edition.js

@@ -152,8 +152,9 @@ let Edition = React.createClass({
 
                     <CollapsibleParagraph
                         title="Notes"
-                        show={(this.state.currentUser.username && true || false) ||
+                        show={!!(this.state.currentUser.username
-                                (this.props.edition.acl.acl_edit || this.props.edition.public_note)}>
+                                || this.props.edition.acl.acl_edit
+                                || this.props.edition.public_note)}>
                         <Note
                             id={() => {return {'bitcoin_id': this.props.edition.bitcoin_id}; }}
                             label={getLangText('Personal note (private)')}

js/components/ascribe_detail/piece_container.js

@@ -237,12 +237,11 @@ let PieceContainer = React.createClass({
                     </CollapsibleParagraph>
                     <CollapsibleParagraph
                         title={getLangText('Notes')}
-                        show={(this.state.currentUser.username && true || false) ||
+                        show={!!(this.state.currentUser.username || this.state.piece.public_note)}>
-                                (this.state.piece.public_note)}>
                         <Note
                             id={this.getId}
                             label={getLangText('Personal note (private)')}
-                            defaultValue={this.state.piece.private_note ? this.state.piece.private_note : null}
+                            defaultValue={this.state.piece.private_note || null}
                             placeholder={getLangText('Enter your comments ...')}
                             editable={true}
                             successMessage={getLangText('Private note saved')}

js/components/ascribe_forms/form_contract_agreement.js

@@ -35,7 +35,7 @@ let ContractAgreementForm = React.createClass({
 
     componentDidMount() {
         ContractListStore.listen(this.onChange);
-        ContractListActions.fetchContractList(true);
+        ContractListActions.fetchContractList(true, false);
     },
 
     componentWillUnmount() {
@@ -95,45 +95,56 @@ let ContractAgreementForm = React.createClass({
     },
 
     render() {
+        if (this.state.contractList && this.state.contractList.length > 0) {
+            return (
+                <Form
+                    className="ascribe-form-bordered ascribe-form-wrapper"
+                    ref='form'
+                    url={ApiUrls.ownership_contract_agreements}
+                    getFormData={this.getFormData}
+                    handleSuccess={this.handleSubmitSuccess}
+                    buttons={<button
+                                type="submit"
+                                className="btn ascribe-btn ascribe-btn-login">
+                                {getLangText('Send loan request')}
+                            </button>}
+                    spinner={
+                        <span className="btn ascribe-btn ascribe-btn-login ascribe-btn-login-spinner">
+                            <img src="https://s3-us-west-2.amazonaws.com/ascribe0/media/thumbnails/ascribe_animated_medium.gif" />
+                        </span>
+                        }>
+                    <div className="ascribe-form-header">
+                        <h3>{getLangText('Contract form')}</h3>
+                    </div>
+                    <Property
+                        name='signee'
+                        label={getLangText('Artist Email')}>
+                        <input
+                            type="email"
+                            placeholder={getLangText('(e.g. andy@warhol.co.uk)')}
+                            required/>
+                    </Property>
+                    {this.getContracts()}
+                    <PropertyCollapsible
+                        name='appendix'
+                        checkboxLabel={getLangText('Add appendix to the contract')}>
+                        <span>{getLangText('Appendix')}</span>
+                        <InputTextAreaToggable
+                            rows={1}
+                            editable={true}
+                            placeholder={getLangText('This will be appended to the contract selected above')}/>
+                    </PropertyCollapsible>
+                </Form>
+            );
+        }
         return (
-            <Form
+            <div>
-                className="ascribe-form-bordered ascribe-form-wrapper"
+                <p className="text-center">
-                ref='form'
+                    {getLangText('No private contracts found, please go to the ')}
-                url={ApiUrls.ownership_contract_agreements}
+                    <a href="settings">{getLangText('settings page')}</a>
-                getFormData={this.getFormData}
+                    {getLangText(' and create them.')}
-                handleSuccess={this.handleSubmitSuccess}
+                </p>
-                buttons={<button
+            </div>
-                            type="submit"
-                            className="btn ascribe-btn ascribe-btn-login">
-                            {getLangText('Send loan request')}
-                        </button>}
-                spinner={
-                    <span className="btn ascribe-btn ascribe-btn-login ascribe-btn-login-spinner">
-                        <img src="https://s3-us-west-2.amazonaws.com/ascribe0/media/thumbnails/ascribe_animated_medium.gif" />
-                    </span>
-                    }>
-                <div className="ascribe-form-header">
-                    <h3>{getLangText('Contract form')}</h3>
-                </div>
-                <Property
-                    name='signee'
-                    label={getLangText('Artist Email')}>
-                    <input
-                        type="email"
-                        placeholder={getLangText('(e.g. andy@warhol.co.uk)')}
-                        required/>
-                </Property>
-                {this.getContracts()}
-                <PropertyCollapsible
-                    name='appendix'
-                    checkboxLabel={getLangText('Add appendix to the contract')}>
-                    <span>{getLangText('Appendix')}</span>
-                    <InputTextAreaToggable
-                        rows={1}
-                        editable={true}
-                        placeholder={getLangText('This will be appended to the contract selected above')}/>
-                </PropertyCollapsible>
-            </Form>
         );
     }
 });

js/components/ascribe_forms/form_copyright_association.js

@@ -0,0 +1,75 @@
+'use strict';
+
+import React from 'react';
+
+import GlobalNotificationModel from '../../models/global_notification_model';
+import GlobalNotificationActions from '../../actions/global_notification_actions';
+
+import Form from './form';
+import Property from './property';
+
+import ApiUrls from '../../constants/api_urls';
+import AppConstants from '../../constants/application_constants';
+
+import { getLangText } from '../../utils/lang_utils';
+
+let CopyrightAssociationForm = React.createClass({
+    propTypes: {
+        currentUser: React.PropTypes.object
+    },
+
+    handleSubmitSuccess(){
+        let notification = getLangText('Copyright association updated');
+        notification = new GlobalNotificationModel(notification, 'success', 10000);
+        GlobalNotificationActions.appendGlobalNotification(notification);
+    },
+
+    getProfileFormData(){
+        return {email: this.props.currentUser.email};
+    },
+
+    render() {
+        let selectedState = -1;
+        if (this.props.currentUser
+            && this.props.currentUser.profile
+            && this.props.currentUser.profile.copyright_association) {
+            selectedState = AppConstants.copyrightAssociations.indexOf(this.props.currentUser.profile.copyright_association);
+        }
+        if (this.props.currentUser && this.props.currentUser.email){
+            return (
+                <Form
+                    ref='form'
+                    url={ApiUrls.users_profile}
+                    getFormData={this.getProfileFormData}
+                    handleSuccess={this.handleSubmitSuccess}>
+                    <Property
+                        name="copyright_association"
+                        className="ascribe-settings-property-collapsible-toggle"
+                        label={getLangText('Copyright Association')}
+                        style={{paddingBottom: 0}}>
+                        <select name="contract">
+                            <option disabled selected={selectedState === -1}>
+                                {' -- ' + getLangText('select an association') + ' -- '}
+                            </option>
+                            {AppConstants.copyrightAssociations.map((association, i) => {
+                                return (
+                                    <option
+                                        name={i}
+                                        key={i}
+                                        value={ association }
+                                        selected={selectedState === i}>
+                                        { association }
+                                    </option>
+                                );
+                            })}
+                        </select>
+                    </Property>
+                    <hr />
+                </Form>
+            );
+        }
+        return null;
+    }
+});
+
+export default CopyrightAssociationForm;

js/components/ascribe_forms/form_loan.js

@@ -35,6 +35,7 @@ let LoanForm = React.createClass({
         url: React.PropTypes.string,
         id: React.PropTypes.object,
         message: React.PropTypes.string,
+        createPublicContractAgreement: React.PropTypes.bool,
         handleSuccess: React.PropTypes.func
     },
 
@@ -44,7 +45,8 @@ let LoanForm = React.createClass({
             showPersonalMessage: true,
             showEndDate: true,
             showStartDate: true,
-            showPassword: true
+            showPassword: true,
+            createPublicContractAgreement: true
         };
     },
 
@@ -61,7 +63,7 @@ let LoanForm = React.createClass({
         // however, it can also be that at the time the component is mounting,
         // the email is not defined (because it's asynchronously fetched from the server).
         // Then we need to update it as soon as it is included into LoanForm's props.
-        if(nextProps && nextProps.email) {
+        if(nextProps && nextProps.email && this.props.email !== nextProps.email) {
             this.getContractAgreementsOrCreatePublic(nextProps.email);
         }
     },
@@ -77,9 +79,11 @@ let LoanForm = React.createClass({
     getContractAgreementsOrCreatePublic(email){
         ContractAgreementListActions.flushContractAgreementList();
         if (email) {
+            // fetch the available contractagreements (pending/accepted)
             ContractAgreementListActions.fetchAvailableContractAgreementList(email).then(
                 (contractAgreementList) => {
-                    if (!contractAgreementList) {
+                    if (!contractAgreementList && this.props.createPublicContractAgreement) {
+                        // for public contracts: fetch the public contract and create a contractagreement if available
                         ContractAgreementListActions.createContractAgreementFromPublicContract(email);
                     }
                 }

js/components/ascribe_forms/form_login.js

@@ -27,7 +27,7 @@ let LoginForm = React.createClass({
         onLogin: React.PropTypes.func
     },
 
-    mixins: [Router.Navigation],
+    mixins: [Router.Navigation, Router.State],
 
     getDefaultProps() {
         return {
@@ -95,6 +95,7 @@ let LoginForm = React.createClass({
     },
 
     render() {
+        let email = this.getQuery().email || null;
         return (
             <Form
                 className="ascribe-form-bordered"
@@ -122,7 +123,8 @@ let LoginForm = React.createClass({
                     <input
                         type="email"
                         placeholder={getLangText('Enter your email')}
-                        name="username"
+                        name="email"
+                        defaultValue={email}
                         required/>
                 </Property>
                 <Property

js/components/ascribe_forms/form_signup.js

@@ -66,17 +66,24 @@ let SignupForm = React.createClass({
         }
     },
 
+    getFormData() {
+        if (this.getQuery().token){
+            return {token: this.getQuery().token};
+        }
+        return null;
+    },
+
     render() {
         let tooltipPassword = getLangText('Your password must be at least 10 characters') + '.\n ' +
             getLangText('This password is securing your digital property like a bank account') + '.\n ' +
             getLangText('Store it in a safe place') + '!';
-        let email = this.getQuery().email ? this.getQuery().email : null;
+        let email = this.getQuery().email || null;
         return (
             <Form
                 className="ascribe-form-bordered"
                 ref='form'
                 url={ApiUrls.users_signup}
-                getFormData={this.getQuery}
+                getFormData={this.getFormData}
                 handleSuccess={this.handleSuccess}
                 buttons={
                     <button type="submit" className="btn ascribe-btn ascribe-btn-login">

js/components/ascribe_settings/account_settings.js

@@ -13,6 +13,8 @@ import Property from '../ascribe_forms/property';
 import InputCheckbox from '../ascribe_forms/input_checkbox';
 import CollapsibleParagraph from '../ascribe_collapsible/collapsible_paragraph';
 
+import CopyrightAssociationForm from '../ascribe_forms/form_copyright_association';
+
 import ApiUrls from '../../constants/api_urls';
 import AppConstants from '../../constants/application_constants';
 
@@ -117,6 +119,7 @@ let AccountSettings = React.createClass({
                 show={true}
                 defaultExpanded={true}>
                 {content}
+                <CopyrightAssociationForm currentUser={this.state.currentUser}/>
                 {profile}
                 {/*<Form
                     url={AppConstants.serverUrl + 'api/users/set_language/'}>

js/components/ascribe_slides_container/slides_container.js

@@ -178,7 +178,7 @@ let SlidesContainer = React.createClass({
         let breadcrumbs = [];
 
         ReactAddons.Children.map(this.props.children, (child, i) => {
-            if(i >= this.state.startFrom && child.props['data-slide-title']) {
+            if(child && i >= this.state.startFrom && child.props['data-slide-title']) {
                 breadcrumbs.push(child.props['data-slide-title']);
             }
         });
@@ -229,7 +229,7 @@ let SlidesContainer = React.createClass({
 
             // since the default parameter of startFrom is -1, we do not need to check
             // if its actually present in the url bar, as it will just not match
-            if(i >= this.state.startFrom) {
+            if(child && i >= this.state.startFrom) {
                 return ReactAddons.addons.cloneWithProps(child, {
                     className: 'ascribe-slide',
                     style: {

js/components/signup_container.js

@@ -1,8 +1,12 @@
 'use strict';
 
 import React from 'react';
+import Router from 'react-router';
 import SignupForm from './ascribe_forms/form_signup';
 
+import { getLangText } from '../utils/lang_utils';
+
+let Link = Router.Link;
 
 let SignupContainer = React.createClass({
     getInitialState() {
@@ -33,7 +37,12 @@ let SignupContainer = React.createClass({
         return (
             <div className="ascribe-login-wrapper">
                 <SignupForm handleSuccess={this.handleSuccess} />
+                <div className="ascribe-login-text">
+                    {getLangText('Already an ascribe user')}&#63; <Link to="login">{getLangText('Log in')}...</Link><br/>
+                    {getLangText('Forgot my password')}&#63; <Link to="password_reset">{getLangText('Rescue me')}...</Link>
+                </div>
             </div>
+
         );
     }
 });

js/components/whitelabel/wallet/components/cyland/ascribe_detail/cyland_piece_container.js

@@ -98,12 +98,11 @@ let CylandPieceContainer = React.createClass({
                     </CollapsibleParagraph>
                     <CollapsibleParagraph
                         title={getLangText('Notes')}
-                        show={(this.state.currentUser.username && true || false) ||
+                        show={!!(this.state.currentUser.username || this.state.piece.public_note)}>
-                                (this.state.piece.public_note)}>
                         <Note
                             id={() => {return {'id': this.state.piece.id}; }}
                             label={getLangText('Personal note (private)')}
-                            defaultValue={this.state.piece.private_note ? this.state.piece.private_note : null}
+                            defaultValue={this.state.piece.private_note || null}
                             placeholder={getLangText('Enter your comments ...')}
                             editable={true}
                             successMessage={getLangText('Private note saved')}

js/components/whitelabel/wallet/components/cyland/cyland_register_piece.js

@@ -10,9 +10,6 @@ import Row from 'react-bootstrap/lib/Row';
 
 import RegisterPieceForm from '../../../../ascribe_forms/form_register_piece';
 
-import Property from '../../../../ascribe_forms/property';
-import InputCheckbox from '../../../../ascribe_forms/input_checkbox';
-
 import WhitelabelActions from '../../../../../actions/whitelabel_actions';
 import WhitelabelStore from '../../../../../stores/whitelabel_store';
 
@@ -136,7 +133,7 @@ let CylandRegisterPiece = React.createClass({
         this.transitionTo('piece', {pieceId: this.state.piece.id});
     },
 
-    // We need to increase the step to lock the forms that are already filed out
+    // We need to increase the step to lock the forms that are already filled out
     incrementStep() {
         // also increase step
         let newStep = this.state.step + 1;

js/components/whitelabel/wallet/components/ikonotv/ascribe_accordion_list/ikonotv_accordion_list_item.js

@@ -63,12 +63,16 @@ let IkonotvAccordionListItem = React.createClass({
         return (
             <div>
                 <AclProxy
-                    aclObject={this.props.content.acl}
+                    aclObject={this.state.currentUser.acl}
                     aclName="acl_submit">
-                    <IkonotvSubmitButton
+                    <AclProxy
-                        className="btn-xs pull-right"
+                        aclObject={this.props.content.acl}
-                        handleSuccess={this.handleSubmitSuccess}
+                        aclName="acl_submit">
-                        piece={this.props.content}/>
+                        <IkonotvSubmitButton
+                            className="btn-xs pull-right"
+                            handleSuccess={this.handleSubmitSuccess}
+                            piece={this.props.content}/>
+                    </AclProxy>
                 </AclProxy>
                 <AclProxy
                     aclObject={this.props.content.acl}

js/components/whitelabel/wallet/components/ikonotv/ascribe_buttons/ikonotv_submit_button.js

@@ -1,17 +1,8 @@
 'use strict';
 
 import React from 'react';
-import Moment from 'moment';
 import classNames from 'classnames';
-
+import ButtonLink from 'react-router-bootstrap/lib/ButtonLink';
-import ModalWrapper from '../../../../../ascribe_modal/modal_wrapper';
-
-import LoanForm from '../../../../../ascribe_forms/form_loan';
-
-import Property from '../../../../../ascribe_forms/property';
-import InputCheckbox from '../../../../../ascribe_forms/input_checkbox';
-
-import ApiUrls from '../../../../../../constants/api_urls';
 
 import { getLangText } from '../../../../../../utils/lang_utils';
 
@@ -22,37 +13,30 @@ let IkonotvSubmitButton = React.createClass({
         piece: React.PropTypes.object.isRequired
     },
 
-    getSubmitButton() {
-        return (
-            <button
-                className={classNames('btn', 'btn-default', this.props.className)}>
-                {getLangText('Loan to IkonoTV')}
-            </button>
-        );
-    },
-
     render() {
+        let piece = this.props.piece;
+        let startFrom = 1;
 
-        let today = new Moment();
+        // In the Ikonotv loan page a user has to complete two steps.
-        let enddate = new Moment();
+        // Since every one of those steps is atomic a user should always be able to continue
-        enddate.add(1, 'years');
+        // where he left of.
+        // This is why we start the process form slide 1/2 if the user has already finished
+        // it in another session.
+        if(piece && piece.extra_data && Object.keys(piece.extra_data).length > 0) {
+            startFrom = 1;
+        }
 
         return (
-            <ModalWrapper
+            <ButtonLink
-                trigger={this.getSubmitButton()}
+                to="register_piece"
-                handleSuccess={this.props.handleSuccess}
+                query={{
-                title={getLangText('Loan to IkonoTV archive')}>
+                    'slide_num': 0,
-                <LoanForm
+                    'start_from': startFrom,
-                    id={{piece_id: this.props.piece.id}}
+                    'piece_id': piece.id
-                    url={ApiUrls.ownership_loans_pieces}
+                }}
-                    email="submissions@ikono.org"
+                className={classNames('btn', 'btn-default', 'btn-xs', this.props.className)}>
-                    startdate={today}
+                {getLangText('Loan to IkonoTV')}
-                    enddate={enddate}
+            </ButtonLink>
-                    gallery="IkonoTV archive"
-                    showPersonalMessage={false}
-                    handleSuccess={this.props.handleSuccess} />
-            </ModalWrapper>
-            
         );
     }
 });

js/components/whitelabel/wallet/components/ikonotv/ascribe_detail/ikonotv_piece_container.js

@@ -5,32 +5,23 @@ import React from 'react';
 import PieceActions from '../../../../../../actions/piece_actions';
 import PieceStore from '../../../../../../stores/piece_store';
 
-import PieceListActions from '../../../../../../actions/piece_list_actions';
-import PieceListStore from '../../../../../../stores/piece_list_store';
-
 import UserStore from '../../../../../../stores/user_store';
 
 import Piece from '../../../../../../components/ascribe_detail/piece';
 
-import ListRequestActions from '../../../../../ascribe_forms/list_form_request_actions';
+import AppConstants from '../../../../../../constants/application_constants';
-import AclButtonList from '../../../../../ascribe_buttons/acl_button_list';
-import DeleteButton from '../../../../../ascribe_buttons/delete_button';
 
+import Form from '../../../../../../components/ascribe_forms/form';
+import Property from '../../../../../../components/ascribe_forms/property';
+import InputTextAreaToggable from '../../../../../../components/ascribe_forms/input_textarea_toggable';
 import CollapsibleParagraph from '../../../../../../components/ascribe_collapsible/collapsible_paragraph';
 
-import IkonotvSubmitButton from '../ascribe_buttons/ikonotv_submit_button';
-
 import HistoryIterator from '../../../../../ascribe_detail/history_iterator';
+import Note from '../../../../../ascribe_detail/note';
 
 import DetailProperty from '../../../../../ascribe_detail/detail_property';
 
-
+import ApiUrls from '../../../../../../constants/api_urls';
-import GlobalNotificationModel from '../../../../../../models/global_notification_model';
-import GlobalNotificationActions from '../../../../../../actions/global_notification_actions';
-
-import AclProxy from '../../../../../acl_proxy';
-
-import AppConstants from '../../../../../../constants/application_constants';
 
 import { getLangText } from '../../../../../../utils/lang_utils';
 import { mergeOptions } from '../../../../../../utils/general_utils';
@@ -40,8 +31,7 @@ let IkonotvPieceContainer = React.createClass({
     getInitialState() {
         return mergeOptions(
             PieceStore.getState(),
-            UserStore.getState(),
+            UserStore.getState()
-            PieceListStore.getState()
         );
     },
 
@@ -49,7 +39,6 @@ let IkonotvPieceContainer = React.createClass({
         PieceStore.listen(this.onChange);
         PieceActions.fetchOne(this.props.params.pieceId);
         UserStore.listen(this.onChange);
-        PieceListStore.listen(this.onChange);
     },
 
     componentWillReceiveProps(nextProps) {
@@ -67,7 +56,6 @@ let IkonotvPieceContainer = React.createClass({
         PieceActions.updatePiece({});
         PieceStore.unlisten(this.onChange);
         UserStore.unlisten(this.onChange);
-        PieceListStore.unlisten(this.onChange);
     },
 
     onChange(state) {
@@ -78,59 +66,6 @@ let IkonotvPieceContainer = React.createClass({
         PieceActions.fetchOne(this.props.params.pieceId);
     },
 
-    handleSubmitSuccess(response) {
-        PieceListActions.fetchPieceList(this.state.page, this.state.pageSize, this.state.search,
-                                        this.state.orderBy, this.state.orderAsc, this.state.filterBy);
-
-        this.loadPiece();
-        let notification = new GlobalNotificationModel(response.notification, 'success', 10000);
-        GlobalNotificationActions.appendGlobalNotification(notification);
-    },
-
-    getActions(){
-        if (this.state.piece &&
-            this.state.piece.notifications &&
-            this.state.piece.notifications.length > 0) {
-            return (
-                <ListRequestActions
-                    pieceOrEditions={this.state.piece}
-                    currentUser={this.state.currentUser}
-                    handleSuccess={this.loadPiece}
-                    notifications={this.state.piece.notifications}/>);
-        }
-        else {
-
-            //We need to disable the normal acl_loan because we're inserting a custom acl_loan button
-            let availableAcls;
-
-            if(this.state.piece && this.state.piece.acl && typeof this.state.piece.acl.acl_loan !== 'undefined') {
-                // make a copy to not have side effects
-                availableAcls = mergeOptions({}, this.state.piece.acl);
-                availableAcls.acl_loan = false;
-            }
-
-            return (
-                <AclButtonList
-                    className="text-center ascribe-button-list"
-                    availableAcls={availableAcls}
-                    editions={this.state.piece}
-                    handleSuccess={this.loadPiece}>
-                        <AclProxy
-                            aclObject={availableAcls}
-                            aclName="acl_submit">
-                            <IkonotvSubmitButton
-                                className="btn-sm"
-                                handleSuccess={this.handleSubmitSuccess}
-                                piece={this.state.piece}/>
-                        </AclProxy>
-                        <DeleteButton
-                            handleSuccess={this.handleDeleteSuccess}
-                            piece={this.state.piece}/>
-                </AclButtonList>
-            );
-        }
-    },
-
     render() {
         if(this.state.piece && this.state.piece.title) {
             return (
@@ -152,14 +87,28 @@ let IkonotvPieceContainer = React.createClass({
                             <DetailProperty label={getLangText('ID')} value={ this.state.piece.bitcoin_id } ellipsis={true} />
                             <hr/>
                         </div>
-                    }
+                    }>
-                    buttons={this.getActions()}>
+
                     <CollapsibleParagraph
                         title={getLangText('Loan History')}
                         show={this.state.piece.loan_history && this.state.piece.loan_history.length > 0}>
                         <HistoryIterator
                             history={this.state.piece.loan_history} />
                     </CollapsibleParagraph>
+                    <CollapsibleParagraph
+                        title={getLangText('Notes')}
+                        show={!!(this.state.currentUser.username || this.state.piece.public_note)}>
+                        <Note
+                            id={() => {return {'id': this.state.piece.id}; }}
+                            label={getLangText('Personal note (private)')}
+                            defaultValue={this.state.piece.private_note || null}
+                            placeholder={getLangText('Enter your comments ...')}
+                            editable={true}
+                            successMessage={getLangText('Private note saved')}
+                            url={ApiUrls.note_private_piece}
+                            currentUser={this.state.currentUser}/>
+                    </CollapsibleParagraph>
+                    <IkonotvPieceDetails piece={this.state.piece}/>
                 </Piece>
             );
         } else {
@@ -172,4 +121,43 @@ let IkonotvPieceContainer = React.createClass({
     }
 });
 
+
+let IkonotvPieceDetails = React.createClass({
+    propTypes: {
+        piece: React.PropTypes.object
+    },
+
+    render() {
+        if (this.props.piece && Object.keys(this.props.piece.extra_data).length !== 0){
+            return (
+                <CollapsibleParagraph
+                    title={getLangText('Further Details')}
+                    show={true}
+                    defaultExpanded={true}>
+                    <Form ref='form'>
+                        {Object.keys(this.props.piece.extra_data).map((data, i) => {
+                            let label = data.replace('_', ' ');
+                            return (
+                                <Property
+                                    key={i}
+                                    name={data}
+                                    label={label}
+                                    hidden={!this.props.piece.extra_data[data]}
+                                    editable={false}>
+                                    <InputTextAreaToggable
+                                        rows={1}
+                                        editable={false}
+                                        defaultValue={this.props.piece.extra_data[data]}/>
+                                </Property>);
+                            }
+                        )}
+                        <hr />
+                    </Form>
+                </CollapsibleParagraph>
+            );
+        }
+        return null;
+    }
+});
+
 export default IkonotvPieceContainer;

js/components/whitelabel/wallet/components/ikonotv/ascribe_forms/ikonotv_artist_details_form.js

@@ -0,0 +1,145 @@
+'use strict';
+
+import React from 'react';
+
+import Form from '../../../../../ascribe_forms/form';
+import Property from '../../../../../ascribe_forms/property';
+
+import InputTextAreaToggable from '../../../../../ascribe_forms/input_textarea_toggable';
+
+//import FurtherDetailsFileuploader from '../../../../../ascribe_detail/further_details_fileuploader';
+
+import ApiUrls from '../../../../../../constants/api_urls';
+import AppConstants from '../../../../../../constants/application_constants';
+
+import requests from '../../../../../../utils/requests';
+
+import { getLangText } from '../../../../../../utils/lang_utils';
+
+
+let IkonotvArtistDetailsForm = React.createClass({
+    propTypes: {
+        handleSuccess: React.PropTypes.func.isRequired,
+        piece: React.PropTypes.object.isRequired,
+
+        disabled: React.PropTypes.bool
+    },
+
+    getInitialState() {
+        return {
+            isUploadReady: true
+        };
+    },
+
+    getFormData() {
+        let extradata = {};
+        let formRefs = this.refs.form.refs;
+
+        // Put additional fields in extra data object
+        Object
+            .keys(formRefs)
+            .forEach((fieldName) => {
+                extradata[fieldName] = formRefs[fieldName].state.value;
+            });
+
+        return {
+            extradata: extradata,
+            piece_id: this.props.piece.id
+        };
+
+    },
+
+    uploadStarted() {
+        this.setState({
+            isUploadReady: false
+        });
+    },
+
+    setIsUploadReady(isReady) {
+        this.setState({
+            isUploadReady: isReady
+        });
+    },
+
+    render() {
+        if(this.props.piece && this.props.piece.id && this.props.piece.extra_data) {
+            return (
+                <Form
+                    disabled={this.props.disabled}
+                    className="ascribe-form-bordered"
+                    ref='form'
+                    url={requests.prepareUrl(ApiUrls.piece_extradata, {piece_id: this.props.piece.id})}
+                    handleSuccess={this.props.handleSuccess}
+                    getFormData={this.getFormData}
+                    buttons={
+                        <button
+                            type="submit"
+                            className="btn ascribe-btn ascribe-btn-login"
+                            disabled={!this.state.isUploadReady || this.props.disabled}>
+                            {getLangText('Proceed to artwork details')}
+                        </button>
+                    }
+                    spinner={
+                        <div className="modal-footer">
+                            <img src={AppConstants.baseUrl + 'static/img/ascribe_animated_small.gif'} />
+                        </div>
+                    }>
+                    <div className="ascribe-form-header">
+                        <h3>
+                            {getLangText('Artist Details')}
+                        </h3>
+                    </div>
+                    <Property
+                        name='artist_website'
+                        label={getLangText('Artist Website')}
+                        editable={!this.props.disabled}>
+                        <InputTextAreaToggable
+                            rows={1}
+                            editable={!this.props.disabled}
+                            defaultValue={this.props.piece.extra_data.artist_website}
+                            placeholder={getLangText('The artist\'s website if present...')}/>
+                    </Property>
+                    <Property
+                        name='gallery_website'
+                        label={getLangText('Website of related Gallery, Museum, etc.')}
+                        editable={!this.props.disabled}>
+                        <InputTextAreaToggable
+                            rows={1}
+                            editable={!this.props.disabled}
+                            defaultValue={this.props.piece.extra_data.gallery_website}
+                            placeholder={getLangText('The website of any related Gallery or Museum')}/>
+                    </Property>
+                    <Property
+                        name='additional_websites'
+                        label={getLangText('Additional Websites/Publications')}
+                        editable={!this.props.disabled}>
+                        <InputTextAreaToggable
+                            rows={1}
+                            editable={!this.props.disabled}
+                            defaultValue={this.props.piece.extra_data.additional_websites}
+                            placeholder={getLangText('Enter additional Websites/Publications if any')}/>
+                    </Property>
+                    <Property
+                        name='conceptual_overview'
+                        label={getLangText('Short text about the Artist')}
+                        editable={!this.props.disabled}>
+                        <InputTextAreaToggable
+                            rows={1}
+                            editable={!this.props.disabled}
+                            defaultValue={this.props.piece.extra_data.conceptual_overview}
+                            placeholder={getLangText('Enter a short bio about the Artist')}
+                            />
+                    </Property>
+                </Form>
+            );
+        } else {
+            return (
+                <div className="ascribe-loading-position">
+                    <img src={AppConstants.baseUrl + 'static/img/ascribe_animated_medium.gif'} />
+                </div>
+            );
+        }
+    }
+});
+
+export default IkonotvArtistDetailsForm;

js/components/whitelabel/wallet/components/ikonotv/ascribe_forms/ikonotv_artwork_details_form.js

@@ -0,0 +1,162 @@
+'use strict';
+
+import React from 'react';
+
+import Form from '../../../../../ascribe_forms/form';
+import Property from '../../../../../ascribe_forms/property';
+
+import InputTextAreaToggable from '../../../../../ascribe_forms/input_textarea_toggable';
+
+import ApiUrls from '../../../../../../constants/api_urls';
+import AppConstants from '../../../../../../constants/application_constants';
+
+import requests from '../../../../../../utils/requests';
+
+import { getLangText } from '../../../../../../utils/lang_utils';
+
+
+let IkonotvArtworkDetailsForm = React.createClass({
+    propTypes: {
+        handleSuccess: React.PropTypes.func.isRequired,
+        piece: React.PropTypes.object.isRequired,
+
+        disabled: React.PropTypes.bool
+    },
+
+    getInitialState() {
+        return {
+            isUploadReady: true
+        };
+    },
+
+    getFormData() {
+        let extradata = {};
+        let formRefs = this.refs.form.refs;
+
+        // Put additional fields in extra data object
+        Object
+            .keys(formRefs)
+            .forEach((fieldName) => {
+                extradata[fieldName] = formRefs[fieldName].state.value;
+            });
+
+        return {
+            extradata: extradata,
+            piece_id: this.props.piece.id
+        };
+
+    },
+
+    uploadStarted() {
+        this.setState({
+            isUploadReady: false
+        });
+    },
+
+    setIsUploadReady(isReady) {
+        this.setState({
+            isUploadReady: isReady
+        });
+    },
+
+    render() {
+        if(this.props.piece && this.props.piece.id && this.props.piece.extra_data) {
+            return (
+                <Form
+                    disabled={this.props.disabled}
+                    className="ascribe-form-bordered"
+                    ref='form'
+                    url={requests.prepareUrl(ApiUrls.piece_extradata, {piece_id: this.props.piece.id})}
+                    handleSuccess={this.props.handleSuccess}
+                    getFormData={this.getFormData}
+                    buttons={
+                        <button
+                            type="submit"
+                            className="btn ascribe-btn ascribe-btn-login"
+                            disabled={!this.state.isUploadReady || this.props.disabled}>
+                            {getLangText('Proceed to loan')}
+                        </button>
+                    }
+                    spinner={
+                        <div className="modal-footer">
+                            <img src={AppConstants.baseUrl + 'static/img/ascribe_animated_small.gif'} />
+                        </div>
+                    }>
+                    <div className="ascribe-form-header">
+                        <h3>
+                            {getLangText('Artwork Details')}
+                        </h3>
+                    </div>
+                    <Property
+                        name='medium'
+                        label={getLangText('Medium')}
+                        editable={!this.props.disabled}>
+                        <InputTextAreaToggable
+                            rows={1}
+                            editable={!this.props.disabled}
+                            defaultValue={this.props.piece.extra_data.medium}
+                            placeholder={getLangText('The medium of the file (i.e. photo, video, other, ...)')}/>
+                    </Property>
+                    <Property
+                        name='size_duration'
+                        label={getLangText('Size/Duration')}
+                        editable={!this.props.disabled}>
+                        <InputTextAreaToggable
+                            rows={1}
+                            editable={!this.props.disabled}
+                            defaultValue={this.props.piece.extra_data.size_duration}
+                            placeholder={getLangText('The size of the file in MB or the duration of the movie')}/>
+                    </Property>
+                    <Property
+                        name='copyright'
+                        label={getLangText('Copyright')}
+                        editable={!this.props.disabled}>
+                        <InputTextAreaToggable
+                            rows={1}
+                            editable={!this.props.disabled}
+                            defaultValue={this.props.piece.extra_data.copyright}
+                            placeholder={getLangText('Which copyright is attached to this work?')}/>
+                    </Property>
+                    <Property
+                        name='courtesy_of'
+                        label={getLangText('Courtesy of')}
+                        editable={!this.props.disabled}>
+                        <InputTextAreaToggable
+                            rows={1}
+                            editable={!this.props.disabled}
+                            defaultValue={this.props.piece.extra_data.courtesy_of}
+                            placeholder={getLangText('The current owner of the artwork')}/>
+                    </Property>
+                    <Property
+                        name='copyright_of_photography'
+                        label={getLangText('Copyright of Photography')}
+                        editable={!this.props.disabled}>
+                        <InputTextAreaToggable
+                            rows={1}
+                            editable={!this.props.disabled}
+                            defaultValue={this.props.piece.extra_data.copyright_of_photography}
+                            placeholder={getLangText('Who should be attributed for the photography?')}/>
+                    </Property>
+                    <Property
+                        name='additional_details'
+                        label={getLangText('Additional Details about the artwork')}
+                        editable={!this.props.disabled}>
+                        <InputTextAreaToggable
+                            rows={1}
+                            editable={!this.props.disabled}
+                            defaultValue={this.props.piece.extra_data.additional_details}
+                            placeholder={getLangText('Insert artwork overview')}/>
+                    </Property>
+                </Form>
+            );
+        } else {
+            return (
+                <div className="ascribe-loading-position">
+                    <img src={AppConstants.baseUrl + 'static/img/ascribe_animated_medium.gif'} />
+                </div>
+            );
+        }
+    }
+});
+
+export default IkonotvArtworkDetailsForm;

js/components/whitelabel/wallet/components/ikonotv/ikonotv_contract_notifications.js

@@ -6,20 +6,24 @@ import Router from 'react-router';
 import Glyphicon from 'react-bootstrap/lib/Glyphicon';
 import Button from 'react-bootstrap/lib/Button';
 
-import Form from '../../../../ascribe_forms/form';
-import Property from '../../../../ascribe_forms/property';
-import InputCheckbox from '../../../../ascribe_forms/input_checkbox';
-
 import NotificationActions from '../../../../../actions/notification_actions';
 import NotificationStore from '../../../../../stores/notification_store';
+
+import UserActions from '../../../../../actions/user_actions';
+import UserStore from '../../../../../stores/user_store';
+
+import OwnershipFetcher from '../../../../../fetchers/ownership_fetcher';
+
 import WhitelabelStore from '../../../../../stores/whitelabel_store';
+import WhitelabelActions from '../../../../../actions/whitelabel_actions';
 
 import GlobalNotificationModel from '../../../../../models/global_notification_model';
 import GlobalNotificationActions from '../../../../../actions/global_notification_actions';
 
-import apiUrls from '../../../../../constants/api_urls';
+import CopyrightAssociationForm from '../../../../ascribe_forms/form_copyright_association';
+
+import AppConstants from '../../../../../constants/application_constants';
 
-import requests from '../../../../../utils/requests';
 import { getLangText } from '../../../../../utils/lang_utils';
 import { mergeOptions } from '../../../../../utils/general_utils';
 
@@ -32,13 +36,17 @@ let IkonotvContractNotifications = React.createClass({
     getInitialState() {
         return mergeOptions(
             NotificationStore.getState(),
+            UserStore.getState(),
             WhitelabelStore.getState()
         );
     },
 
     componentDidMount() {
         NotificationStore.listen(this.onChange);
+        UserStore.listen(this.onChange);
+        UserActions.fetchCurrentUser();
         WhitelabelStore.listen(this.onChange);
+        WhitelabelActions.fetchWhitelabel();
         if (this.state.contractAgreementListNotifications === null){
             NotificationActions.fetchContractAgreementListNotifications();
         }
@@ -87,8 +95,9 @@ let IkonotvContractNotifications = React.createClass({
     getAppendix() {
         let notifications = this.state.contractAgreementListNotifications[0];
         let appendix = notifications.contract_agreement.appendix;
-        if (appendix) {
+        if (appendix && appendix.default) {
-            return (<div>
+            return (
+                <div className='notification-contract-footer'>
                     <h1>{getLangText('Appendix')}</h1>
                     <pre>
                         {appendix.default}
@@ -99,30 +108,54 @@ let IkonotvContractNotifications = React.createClass({
         return null;
     },
 
+    handleConfirm() {
+        let contractAgreement = this.state.contractAgreementListNotifications[0].contract_agreement;
+        OwnershipFetcher.confirmContractAgreement(contractAgreement).then(
+            () => this.handleConfirmSuccess()
+        );
+    },
+
     handleConfirmSuccess() {
-        let notification = new GlobalNotificationModel(getLangText('You have accepted the conditions'), 'success', 10000);
+        let notification = new GlobalNotificationModel(getLangText('You have accepted the conditions'), 'success', 5000);
         GlobalNotificationActions.appendGlobalNotification(notification);
         this.transitionTo('pieces');
     },
 
     handleDeny() {
         let contractAgreement = this.state.contractAgreementListNotifications[0].contract_agreement;
-        requests.put(apiUrls.ownership_contract_agreements_deny, {contract_agreement_id: contractAgreement.id}).then(
+        OwnershipFetcher.denyContractAgreement(contractAgreement).then(
             () => this.handleDenySuccess()
         );
     },
 
     handleDenySuccess() {
-        let notification = new GlobalNotificationModel(getLangText('You have denied the conditions'), 'success', 10000);
+        let notification = new GlobalNotificationModel(getLangText('You have denied the conditions'), 'success', 5000);
         GlobalNotificationActions.appendGlobalNotification(notification);
         this.transitionTo('pieces');
     },
 
+    getCopyrightAssociationForm(){
+        let c = this.state.currentUser;
+
+        if (c && c.profile && !c.profile.copyright_association) {
+            return (
+                <div className='notification-contract-footer'>
+                    <h1>{getLangText('Are you a member of any copyright societies?')}</h1>
+
+                    <p>
+                        {AppConstants.copyrightAssociations.join(', ')}
+                    </p>
+                    <CopyrightAssociationForm currentUser={this.state.currentUser}/>
+                </div>
+            );
+        }
+        return null;
+    },
+
     render() {
 
         if (this.state.contractAgreementListNotifications &&
             this.state.contractAgreementListNotifications.length > 0) {
-            let contractAgreement = this.state.contractAgreementListNotifications[0].contract_agreement;
             return (
                 <div className='container'>
                     <div className='notification-contract-wrapper'>
@@ -133,41 +166,17 @@ let IkonotvContractNotifications = React.createClass({
                             </div>
                         </div>
                         {this.getContract()}
-
                         <div className='notification-contract-footer'>
-                            {this.getAppendix}
+                            {this.getAppendix()}
-                            <h1>{getLangText('Are you a member of any copyright societies?')}</h1>
+                            {this.getCopyrightAssociationForm()}
-                            <p>
+                            <p style={{marginTop: '1em'}}>
-                                ARS, DACS, Bildkunst, Pictoright, SODRAC, Copyright Agency/Viscopy, SAVA, Bildrecht GmbH,
+                                <Button type="submit" onClick={this.handleConfirm}>
-                                SABAM, AUTVIS, CREAIMAGEN, SONECA, Copydan, EAU, Kuvasto, GCA, HUNGART, IVARO, SIAE, JASPAR-SPDA,
+                                    {getLangText('I agree with the conditions')}
-                                AKKA/LAA, LATGA-A, SOMAAP, ARTEGESTION, CARIER, BONO, APSAV, SPA, GESTOR, VISaRTA, RAO, LITA,
+                                </Button>
-                                DALRO, VeGaP, BUS, ProLitteris, AGADU, AUTORARTE, BUBEDRA, BBDA, BCDA, BURIDA, ADAVIS, BSDA
+                                <Button bsStyle="danger" className="btn-delete" bsSize="medium" onClick={this.handleDeny}>
+                                    {getLangText('I disagree')}
+                                </Button>
                             </p>
-                            <Form
-                                ref='form'
-                                url={requests.prepareUrl(apiUrls.ownership_contract_agreements_confirm, {contract_agreement_id: contractAgreement.id})}
-                                handleSuccess={this.handleConfirmSuccess}
-                                method='put'
-                                buttons={
-                                    <p style={{marginTop: '1em'}}>
-                                        <Button type="submit">{getLangText('I agree with the conditions')}</Button>
-                                        <Button bsStyle="danger" className="btn-delete" bsSize="medium" onClick={this.handleDeny}>
-                                            {getLangText('I disagree')}
-                                        </Button>
-                                    </p>
-                                }>
-                                <Property
-                                    name="terms"
-                                    className="ascribe-settings-property-collapsible-toggle"
-                                    style={{paddingBottom: 0}}>
-                                    <InputCheckbox>
-                                        <span>
-                                            {' ' + getLangText('Yes') }
-                                        </span>
-                                    </InputCheckbox>
-                                </Property>
-
-                            </Form>
                         </div>
                     </div>
                 </div>

js/components/whitelabel/wallet/components/ikonotv/ikonotv_landing.js

@@ -1,10 +1,10 @@
 'use strict';
 
 import React from 'react';
+import Router from 'react-router';
 
 import ButtonLink from 'react-router-bootstrap/lib/ButtonLink';
 
-import UserActions from '../../../../../actions/user_actions';
 import UserStore from '../../../../../stores/user_store';
 
 import { getLangText } from '../../../../../utils/lang_utils';
@@ -12,6 +12,8 @@ import { getLangText } from '../../../../../utils/lang_utils';
 
 let IkonotvLanding = React.createClass({
 
+    mixins: [Router.Navigation, Router.State],
+
     getInitialState() {
         return UserStore.getState();
     },
@@ -29,19 +31,19 @@ let IkonotvLanding = React.createClass({
     },
 
     getEnterButton() {
+        let redirect = 'login';
+
         if(this.state.currentUser && this.state.currentUser.email) {
-            return (
+            redirect = 'pieces';
-                <ButtonLink to="pieces">
-                    {getLangText('ENTER')}
-                </ButtonLink>
-            );
-        } else {
-            return (
-                <ButtonLink to="signup">
-                    {getLangText('ENTER')}
-                </ButtonLink>
-            );
         }
+        else if (this.getQuery() && this.getQuery().redirect) {
+            redirect = this.getQuery().redirect;
+        }
+        return (
+            <ButtonLink to={redirect} query={this.getQuery()}>
+                {getLangText('ENTER')}
+            </ButtonLink>
+        );
     },
 
     render() {
@@ -52,7 +54,7 @@ let IkonotvLanding = React.createClass({
                     <div className="tagline">
                         <h1>PROTECT</h1>
                         <img src="http://placehold.it/600x300" />
-                        <h1>& SHARE</h1>
+                        <h1>&amp; SHARE</h1>
                     </div>
                     <h2>Welcome to the ikonoTV</h2>
                     <h2>Registration Page</h2>
@@ -93,7 +95,7 @@ let IkonotvLanding = React.createClass({
                     </section>
                     <footer>
                         <p>Elizabeth Markevitch</p>
-                        <p>Founder & CEO Markevitch Media GmbH</p>
+                        <p>Founder &amp; CEO Markevitch Media GmbH</p>
                         {this.getEnterButton()}
                     </footer>
                 </article>

js/components/whitelabel/wallet/components/ikonotv/ikonotv_register_piece.js

@@ -0,0 +1,268 @@
+'use strict';
+
+import React from 'react';
+import Moment from 'moment';
+import Router from 'react-router';
+
+import Col from 'react-bootstrap/lib/Col';
+import Row from 'react-bootstrap/lib/Row';
+
+import PieceListStore from '../../../../../stores/piece_list_store';
+import PieceListActions from '../../../../../actions/piece_list_actions';
+
+import UserStore from '../../../../../stores/user_store';
+import UserActions from '../../../../../actions/user_actions';
+
+import PieceStore from '../../../../../stores/piece_store';
+import PieceActions from '../../../../../actions/piece_actions';
+
+import GlobalNotificationModel from '../../../../../models/global_notification_model';
+import GlobalNotificationActions from '../../../../../actions/global_notification_actions';
+
+import RegisterPieceForm from '../../../../ascribe_forms/form_register_piece';
+import LoanForm from '../../../../ascribe_forms/form_loan';
+
+import IkonotvArtistDetailsForm from './ascribe_forms/ikonotv_artist_details_form';
+import IkonotvArtworkDetailsForm from './ascribe_forms/ikonotv_artwork_details_form';
+
+import SlidesContainer from '../../../../ascribe_slides_container/slides_container';
+
+import ApiUrls from '../../../../../constants/api_urls';
+
+import { mergeOptions } from '../../../../../utils/general_utils';
+import { getLangText } from '../../../../../utils/lang_utils';
+
+let IkonotvRegisterPiece = React.createClass({
+
+    propTypes: {
+        handleSuccess: React.PropTypes.func,
+        piece: React.PropTypes.object.isRequired
+    },
+
+    mixins: [Router.Navigation, Router.State],
+
+    getInitialState(){
+        return mergeOptions(
+            UserStore.getState(),
+            PieceListStore.getState(),
+            PieceStore.getState(),
+            {
+                step: 0
+            });
+    },
+
+    componentDidMount() {
+        PieceListStore.listen(this.onChange);
+        UserStore.listen(this.onChange);
+        PieceStore.listen(this.onChange);
+        UserActions.fetchCurrentUser();
+
+        let queryParams = this.getQuery();
+
+        // Since every step of this register process is atomic,
+        // we may need to enter the process at step 1 or 2.
+        // If this is the case, we'll need the piece number to complete submission.
+        // It is encoded in the URL as a queryParam and we're checking for it here.
+        //
+        // We're using 'in' here as we want to know if 'piece_id' is present in the url,
+        // we don't care about the value.
+        if (queryParams && 'piece_id' in queryParams) {
+            PieceActions.fetchOne(queryParams.piece_id);
+        }
+    },
+
+    componentWillUnmount() {
+        PieceListStore.unlisten(this.onChange);
+        UserStore.unlisten(this.onChange);
+        PieceStore.unlisten(this.onChange);
+    },
+
+    onChange(state) {
+        this.setState(state);
+
+        if(this.state.currentUser && this.state.currentUser.email) {
+            // we should also make the fineuploader component editable again
+            this.setState({
+                isFineUploaderActive: true
+            });
+        }
+    },
+
+
+    handleRegisterSuccess(response){
+
+        this.refreshPieceList();
+
+        // also start loading the piece for the next step
+        if(response && response.piece) {
+            PieceActions.updatePiece(response.piece);
+        }
+        if (!this.canSubmit()) {
+            this.transitionTo('pieces');
+        }
+        else {
+            this.incrementStep();
+            this.refs.slidesContainer.nextSlide();
+        }
+
+    },
+
+    handleAdditionalDataSuccess() {
+
+        // We need to refetch the piece again after submitting the additional data
+        // since we want it's otherData to be displayed when the user choses to click
+        // on the browsers back button.
+        PieceActions.fetchOne(this.state.piece.id);
+
+        this.refreshPieceList();
+
+        this.incrementStep();
+
+        this.refs.slidesContainer.nextSlide();
+    },
+
+    handleLoanSuccess(response) {
+        let notification = new GlobalNotificationModel(response.notification, 'success', 10000);
+        GlobalNotificationActions.appendGlobalNotification(notification);
+
+        this.refreshPieceList();
+
+        PieceActions.fetchOne(this.state.piece.id);
+        this.transitionTo('piece', {pieceId: this.state.piece.id});
+    },
+
+    // We need to increase the step to lock the forms that are already filled out
+    incrementStep() {
+        // also increase step
+        let newStep = this.state.step + 1;
+        this.setState({
+            step: newStep
+        });
+    },
+
+    refreshPieceList() {
+        PieceListActions.fetchPieceList(
+            this.state.page,
+            this.state.pageSize,
+            this.state.searchTerm,
+            this.state.orderBy,
+            this.state.orderAsc,
+            this.state.filterBy
+        );
+    },
+
+    changeSlide() {
+        // only transition to the login store, if user is not logged in
+        // ergo the currentUser object is not properly defined
+        if(this.state.currentUser && !this.state.currentUser.email) {
+            this.onLoggedOut();
+        }
+    },
+
+    // basically redirects to the second slide (index: 1), when the user is not logged in
+    onLoggedOut() {
+        this.transitionTo('login');
+    },
+
+    canSubmit() {
+        let c = this.state.currentUser;
+        return c && c.acl && c.acl.acl_submit;
+    },
+
+    getSlideArtistDetails() {
+        if (this.canSubmit()) {
+            return (
+                <div data-slide-title={getLangText('Artist details')}>
+                    <Row className="no-margin">
+                        <Col xs={12} sm={10} md={8} smOffset={1} mdOffset={2}>
+                            <IkonotvArtistDetailsForm
+                                disabled={this.state.step > 1}
+                                handleSuccess={this.handleAdditionalDataSuccess}
+                                piece={this.state.piece}/>
+                        </Col>
+                    </Row>
+                </div>
+            );
+        }
+        return null;
+    },
+
+    getSlideArtworkDetails() {
+        if (this.canSubmit()) {
+            return (
+                <div data-slide-title={getLangText('Artwork details')}>
+                    <Row className="no-margin">
+                        <Col xs={12} sm={10} md={8} smOffset={1} mdOffset={2}>
+                            <IkonotvArtworkDetailsForm
+                                disabled={this.state.step > 1}
+                                handleSuccess={this.handleAdditionalDataSuccess}
+                                piece={this.state.piece}/>
+                        </Col>
+                    </Row>
+                </div>
+            );
+        }
+        return null;
+    },
+
+    getSlideLoan() {
+        if (this.canSubmit()) {
+
+            let today = new Moment();
+            let enddate = new Moment();
+            enddate.add(1, 'years');
+            return (
+                <div data-slide-title={getLangText('Loan')}>
+                    <Row className="no-margin">
+                        <Col xs={12} sm={10} md={8} smOffset={1} mdOffset={2}>
+                            <LoanForm
+                                loanHeading={getLangText('Loan to IkonoTV archive')}
+                                id={{piece_id: this.state.piece.id}}
+                                url={ApiUrls.ownership_loans_pieces}
+                                email="submissions@ikono.org"
+                                startdate={today}
+                                enddate={enddate}
+                                gallery="IkonoTV archive"
+                                showPersonalMessage={false}
+                                createPublicContractAgreement={false}
+                                handleSuccess={this.handleLoanSuccess}/>
+                        </Col>
+                    </Row>
+                </div>
+            );
+        }
+        return null;
+    },
+
+    render() {
+        return (
+            <SlidesContainer
+                ref="slidesContainer"
+                forwardProcess={true}
+                glyphiconClassNames={{
+                    pending: 'glyphicon glyphicon-chevron-right',
+                    completed: 'glyphicon glyphicon-lock'
+                    }}>
+                <div data-slide-title={getLangText('Register work')}>
+                    <Row className="no-margin">
+                        <Col xs={12} sm={10} md={8} smOffset={1} mdOffset={2}>
+                            <RegisterPieceForm
+                                disabled={this.state.step > 0}
+                                enableLocalHashing={false}
+                                headerMessage={getLangText('Register work')}
+                                submitMessage={getLangText('Register')}
+                                isFineUploaderActive={this.state.isFineUploaderActive}
+                                handleSuccess={this.handleRegisterSuccess}
+                                onLoggedOut={this.onLoggedOut} />
+                        </Col>
+                    </Row>
+                </div>
+                {this.getSlideArtistDetails()}
+                {this.getSlideArtworkDetails()}
+                {this.getSlideLoan()}
+            </SlidesContainer>
+        );
+    }
+});
+
+export default IkonotvRegisterPiece;

js/components/whitelabel/wallet/wallet_app.js

@@ -19,7 +19,7 @@ let WalletApp = React.createClass({
         let ROUTES = getRoutes(null, subdomain);
 
         let header = null;
-        if ((this.isActive('landing') || this.isActive('login') || this.isActive('signup'))
+        if ((this.isActive('landing') || this.isActive('login') || this.isActive('signup') || this.isActive('contract_notifications'))
             && (['ikonotv', 'cyland']).indexOf(subdomain) > -1) {
             header = (
                 <div className="hero"/>);

js/components/whitelabel/wallet/wallet_routes.js

@@ -22,6 +22,7 @@ import CylandPieceList from './components/cyland/cyland_piece_list';
 import IkonotvLanding from './components/ikonotv/ikonotv_landing';
 import IkonotvPieceList from './components/ikonotv/ikonotv_piece_list';
 import IkonotvRequestLoan from './components/ikonotv/ikonotv_request_loan';
+import IkonotvRegisterPiece from './components/ikonotv/ikonotv_register_piece';
 import IkonotvPieceContainer from './components/ikonotv/ascribe_detail/ikonotv_piece_container';
 import IkonotvContractNotifications from './components/ikonotv/ikonotv_contract_notifications';
 
@@ -73,7 +74,7 @@ let ROUTES = {
             <Route name="signup" path="signup" handler={SignupContainer} />
             <Route name="password_reset" path="password_reset" handler={PasswordResetContainer} />
             <Route name="request_loan" path="request_loan" handler={IkonotvRequestLoan} headerTitle="SEND NEW CONTRACT" aclName="acl_send_contract" />
-            <Route name="register_piece" path="register_piece" handler={RegisterPiece} headerTitle="+ NEW WORK"/>
+            <Route name="register_piece" path="register_piece" handler={IkonotvRegisterPiece} headerTitle="+ NEW WORK"/>
             <Route name="pieces" path="collection" handler={IkonotvPieceList} headerTitle="COLLECTION"/>
             <Route name="piece" path="pieces/:pieceId" handler={IkonotvPieceContainer} />
             <Route name="edition" path="editions/:editionId" handler={EditionContainer} />

js/constants/application_constants.js

@@ -74,7 +74,11 @@ let constants = {
     'whitelabel': {},
     'raven': {
         'url': 'https://0955da3388c64ab29bd32c2a429f9ef4@app.getsentry.com/48351'
-    }
+    },
+    'copyrightAssociations': ['ARS', 'DACS', 'Bildkunst', 'Pictoright', 'SODRAC', 'Copyright Agency/Viscopy', 'SAVA',
+        'Bildrecht GmbH', 'SABAM', 'AUTVIS', 'CREAIMAGEN', 'SONECA', 'Copydan', 'EAU', 'Kuvasto', 'GCA', 'HUNGART',
+        'IVARO', 'SIAE', 'JASPAR-SPDA', 'AKKA/LAA', 'LATGA-A', 'SOMAAP', 'ARTEGESTION', 'CARIER', 'BONO', 'APSAV',
+        'SPA', 'GESTOR', 'VISaRTA', 'RAO', 'LITA', 'DALRO', 'VeGaP', 'BUS', 'ProLitteris', 'AGADU', 'AUTORARTE', 'BUBEDRA', 'BBDA', 'BCDA', 'BURIDA', 'ADAVIS', 'BSDA']
 };
 
 export default constants;

js/fetchers/ownership_fetcher.js

@@ -44,6 +44,14 @@ let OwnershipFetcher = {
         return requests.get(ApiUrls.ownership_contract_agreements, queryParams);
     },
 
+    confirmContractAgreement(contractAgreement){
+        return requests.put(ApiUrls.ownership_contract_agreements_confirm, {contract_agreement_id: contractAgreement.id});
+    },
+
+    denyContractAgreement(contractAgreement){
+        return requests.put(ApiUrls.ownership_contract_agreements_deny, {contract_agreement_id: contractAgreement.id});
+    },
+
     fetchLoanPieceRequestList(){
         return requests.get(ApiUrls.ownership_loans_pieces_request);
     },