Merge branch 'master' into AD-1313-Attach-thumbnail-to-piece-in-register-form

Conflicts:
	js/components/ascribe_detail/further_details_fileuploader.js
	js/components/ascribe_forms/form.js
	js/components/ascribe_forms/form_loan.js
	js/components/ascribe_forms/form_register_piece.js
	js/components/ascribe_forms/input_fineuploader.js
	js/components/ascribe_forms/property.js
	js/components/ascribe_forms/property_collapsible.js
	js/components/ascribe_uploader/ascribe_file_drag_and_drop/file_drag_and_drop.js
	js/components/ascribe_uploader/react_s3_fine_uploader.js
	js/components/whitelabel/wallet/components/cyland/cyland_forms/cyland_additional_data_form.js
	js/components/whitelabel/wallet/components/ikonotv/ikonotv_forms/ikonotv_artist_details_form.js
	js/components/whitelabel/wallet/components/ikonotv/ikonotv_forms/ikonotv_artwork_details_form.js
	sass/ascribe-fonts/ascribe-fonts.scss
	sass/whitelabel/wallet/cyland/cyland_custom_style.scss

js/actions/contract_agreement_list_actions.js

@@ -22,8 +22,7 @@ class ContractAgreementListActions {
                     if (contractAgreementList.count > 0) {
                         this.actions.updateContractAgreementList(contractAgreementList.results);
                         resolve(contractAgreementList.results);
-                    }
-                    else{
+                    } else {
                         resolve(null);
                     }
                 })
@@ -35,13 +34,13 @@ class ContractAgreementListActions {
         );
     }
 
-    fetchAvailableContractAgreementList(issuer, createContractAgreement) {
+    fetchAvailableContractAgreementList(issuer, createPublicContractAgreement) {
         return Q.Promise((resolve, reject) => {
             OwnershipFetcher.fetchContractAgreementList(issuer, true, null)
                 .then((acceptedContractAgreementList) => {
                     // if there is at least an accepted contract agreement, we're going to
                     // use it
-                    if(acceptedContractAgreementList.count > 0) {
+                    if (acceptedContractAgreementList.count > 0) {
                         this.actions.updateContractAgreementList(acceptedContractAgreementList.results);
                     } else {
                         // otherwise, we're looking for contract agreements that are still pending
@@ -50,15 +49,13 @@ class ContractAgreementListActions {
                         // overcomplicate the method
                         OwnershipFetcher.fetchContractAgreementList(issuer, null, true)
                             .then((pendingContractAgreementList) => {
-                                if(pendingContractAgreementList.count > 0) {
+                                if (pendingContractAgreementList.count > 0) {
                                     this.actions.updateContractAgreementList(pendingContractAgreementList.results);
-                                } else {
+                                } else if (createPublicContractAgreement) {
                                     // if there was neither a pending nor an active contractAgreement
-                                    // found and createContractAgreement is set to true, we create a
-                                    // new contract agreement
-                                    if(createContractAgreement) {
-                                        this.actions.createContractAgreementFromPublicContract(issuer);
-                                    }
+                                    // found and createPublicContractAgreement is set to true, we create a
+                                    // new public contract agreement
+                                    this.actions.createContractAgreementFromPublicContract(issuer);
                                 }
                             })
                             .catch((err) => {
@@ -81,8 +78,7 @@ class ContractAgreementListActions {
                 // create an agreement with the public contract if there is one
                 if (publicContract && publicContract.length > 0) {
                     return this.actions.createContractAgreement(null, publicContract[0]);
-                }
-                else {
+                } else {
                     /*
                     contractAgreementList in the store is already set to null;
                      */
@@ -91,21 +87,17 @@ class ContractAgreementListActions {
                 if (publicContracAgreement) {
                     this.actions.updateContractAgreementList([publicContracAgreement]);
                 }
-            }).catch((err) => {
-                console.logGlobal(err);
-            });
+            }).catch(console.logGlobal);
     }
 
     createContractAgreement(issuer, contract){
         return Q.Promise((resolve, reject) => {
-            OwnershipFetcher.createContractAgreement(issuer, contract).then(
-                (contractAgreement) => {
-                    resolve(contractAgreement);
-                }
-            ).catch((err) => {
-                console.logGlobal(err);
-                reject(err);
-            });
+            OwnershipFetcher
+                .createContractAgreement(issuer, contract).then(resolve)
+                .catch((err) => {
+                    console.logGlobal(err);
+                    reject(err);
+                });
         });
     }
 }

js/actions/edition_actions.js

@@ -7,7 +7,8 @@ import EditionFetcher from '../fetchers/edition_fetcher';
 class EditionActions {
     constructor() {
         this.generateActions(
-            'updateEdition'
+            'updateEdition',
+            'editionFailed'
         );
     }
 
@@ -18,6 +19,7 @@ class EditionActions {
             })
             .catch((err) => {
                 console.logGlobal(err);
+                this.actions.editionFailed(err.json);
             });
     }
 }

js/actions/piece_actions.js

@@ -8,7 +8,8 @@ class PieceActions {
     constructor() {
         this.generateActions(
             'updatePiece',
-            'updateProperty'
+            'updateProperty',
+            'pieceFailed'
         );
     }
 
@@ -19,6 +20,7 @@ class PieceActions {
             })
             .catch((err) => {
                 console.logGlobal(err);
+                this.actions.pieceFailed(err.json);
             });
     }
 }

js/actions/webhook_actions.js

@@ -0,0 +1,19 @@
+'use strict';
+
+import { alt } from '../alt';
+
+
+class WebhookActions {
+    constructor() {
+        this.generateActions(
+            'fetchWebhooks',
+            'successFetchWebhooks',
+            'fetchWebhookEvents',
+            'successFetchWebhookEvents',
+            'removeWebhook',
+            'successRemoveWebhook'
+        );
+    }
+}
+
+export default alt.createActions(WebhookActions);

js/components/ascribe_accordion_list/accordion_list_item_edition_widget.js

@@ -78,7 +78,6 @@ let AccordionListItemEditionWidget = React.createClass({
                 return (
                     <AscribeSpinner
                         size='sm'
-                        color='white'
                         classNames='pull-right margin-left-2px'/>
                 );
             } else {
@@ -137,4 +136,4 @@ let AccordionListItemEditionWidget = React.createClass({
     }
 });
 
-export default AccordionListItemEditionWidget;
+export default AccordionListItemEditionWidget;

js/components/ascribe_accordion_list/accordion_list_item_piece.js

@@ -4,6 +4,7 @@ import React from 'react';
 import { Link } from 'react-router';
 
 import AccordionListItem from './accordion_list_item';
+import AccordionListItemThumbnailPlacholder from './accordion_list_item_thumbnail_placeholder';
 
 import { getLangText } from '../../utils/lang_utils';
 
@@ -19,7 +20,14 @@ let AccordionListItemPiece = React.createClass({
         ]),
         subsubheading: React.PropTypes.object,
         buttons: React.PropTypes.object,
-        badge: React.PropTypes.object
+        badge: React.PropTypes.object,
+        thumbnailPlaceholder: React.PropTypes.func
+    },
+
+    getDefaultProps() {
+        return {
+            thumbnailPlaceholder: AccordionListItemThumbnailPlacholder
+        };
     },
 
     getLinkData() {
@@ -34,19 +42,23 @@ let AccordionListItemPiece = React.createClass({
     },
 
     render() {
-        const { className, piece, artistName, buttons, badge, children, subsubheading } = this.props;
+        const {
+            artistName,
+            badge,
+            buttons,
+            children,
+            className,
+            piece,
+            subsubheading,
+            thumbnailPlaceholder: ThumbnailPlaceholder } = this.props;
         const { url, url_safe } = piece.thumbnail;
         let thumbnail;
 
         // Since we're going to refactor the thumbnail generation anyway at one point,
         // for not use the annoying ascribe_spiral.png, we're matching the url against
         // this name and replace it with a CSS version of the new logo.
-        if(url.match(/https:\/\/.*\/media\/thumbnails\/ascribe_spiral.png/)) {
-            thumbnail = (
-                <span className="ascribe-logo-circle">
-                    <span>A</span>
-                </span>
-            );
+        if (url.match(/https:\/\/.*\/media\/thumbnails\/ascribe_spiral.png/)) {
+            thumbnail = (<ThumbnailPlaceholder />);
         } else {
             thumbnail = (
                 <div style={{backgroundImage: 'url("' + url_safe + '")'}}/>

js/components/ascribe_accordion_list/accordion_list_item_thumbnail_placeholder.js

@@ -0,0 +1,15 @@
+'use strict'
+
+import React from 'react';
+
+let AccordionListItemThumbnailPlaceholder = React.createClass({
+    render() {
+        return (
+            <span className="ascribe-logo-circle">
+                <span>A</span>
+            </span>
+        );
+    }
+});
+
+export default AccordionListItemThumbnailPlaceholder;

js/components/ascribe_accordion_list/accordion_list_item_wallet.js

@@ -31,6 +31,7 @@ let AccordionListItemWallet = React.createClass({
     propTypes: {
         className: React.PropTypes.string,
         content: React.PropTypes.object,
+        thumbnailPlaceholder: React.PropTypes.func,
         children: React.PropTypes.oneOfType([
             React.PropTypes.arrayOf(React.PropTypes.element),
             React.PropTypes.element
@@ -123,32 +124,36 @@ let AccordionListItemWallet = React.createClass({
     },
 
     render() {
+        const { children, className, content, thumbnailPlaceholder } = this.props;
 
         return (
             <AccordionListItemPiece
-                className={this.props.className}
-                piece={this.props.content}
+                className={className}
+                piece={content}
                 subsubheading={
                     <div className="pull-left">
-                        <span>{Moment(this.props.content.date_created, 'YYYY-MM-DD').year()}</span>
+                        <span>{Moment(content.date_created, 'YYYY-MM-DD').year()}</span>
                         {this.getLicences()}
-                    </div>}
+                    </div>
+                }
                 buttons={
                     <div>
                         <AclProxy
-                            aclObject={this.props.content.acl}
+                            aclObject={content.acl}
                             aclName="acl_view_editions">
                             <AccordionListItemEditionWidget
                                 className="pull-right"
-                                piece={this.props.content}
+                                piece={content}
                                 toggleCreateEditionsDialog={this.toggleCreateEditionsDialog}
                                 onPollingSuccess={this.onPollingSuccess}/>
                         </AclProxy>
-                    </div>}
-                    badge={this.getGlyphicon()}>
+                    </div>
+                }
+                badge={this.getGlyphicon()}
+                thumbnailPlaceholder={thumbnailPlaceholder}>
                 {this.getCreateEditionsDialog()}
                 {/* this.props.children is AccordionListItemTableEditions */}
-                {this.props.children}
+                {children}
             </AccordionListItemPiece>
         );
     }

js/components/ascribe_buttons/acl_button_list.js

@@ -41,7 +41,7 @@ let AclButtonList = React.createClass({
 
     componentDidMount() {
         UserStore.listen(this.onChange);
-        UserActions.fetchCurrentUser();
+        UserActions.fetchCurrentUser.defer();
 
         window.addEventListener('resize', this.handleResize);
         window.dispatchEvent(new Event('resize'));

js/components/ascribe_buttons/acls/acl_button.js

@@ -26,7 +26,7 @@ export default function ({ action, displayName, title, tooltip }) {
             availableAcls: React.PropTypes.object.isRequired,
             buttonAcceptName: React.PropTypes.string,
             buttonAcceptClassName: React.PropTypes.string,
-            currentUser: React.PropTypes.object.isRequired,
+            currentUser: React.PropTypes.object,
             email: React.PropTypes.string,
             pieceOrEditions: React.PropTypes.oneOfType([
                 React.PropTypes.object,

js/components/ascribe_collapsible/collapsible_paragraph.js

@@ -12,7 +12,9 @@ const CollapsibleParagraph = React.createClass({
             React.PropTypes.object,
             React.PropTypes.array
         ]),
-        iconName: React.PropTypes.string
+        iconName: React.PropTypes.string,
+        show: React.PropTypes.bool,
+        defaultExpanded: React.PropTypes.bool
     },
 
     getDefaultProps() {

js/components/ascribe_detail/detail_property.js

@@ -7,6 +7,7 @@ let DetailProperty = React.createClass({
     propTypes: {
         label: React.PropTypes.string,
         value: React.PropTypes.oneOfType([
+            React.PropTypes.number,
             React.PropTypes.string,
             React.PropTypes.element
         ]),

js/components/ascribe_detail/edition.js

@@ -41,13 +41,20 @@ import { getLangText } from '../../utils/lang_utils';
  */
 let Edition = React.createClass({
     propTypes: {
+        actionPanelButtonListType: React.PropTypes.func,
+        furtherDetailsType: React.PropTypes.func,
         edition: React.PropTypes.object,
-        loadEdition: React.PropTypes.func,
-        location: React.PropTypes.object
+        loadEdition: React.PropTypes.func
     },
 
     mixins: [History],
 
+    getDefaultProps() {
+        return {
+            furtherDetailsType: FurtherDetails
+        };
+    },
+
     getInitialState() {
         return UserStore.getState();
     },
@@ -75,6 +82,8 @@ let Edition = React.createClass({
     },
 
     render() {
+        let FurtherDetailsType = this.props.furtherDetailsType;
+
         return (
             <Row>
                 <Col md={6}>
@@ -90,6 +99,7 @@ let Edition = React.createClass({
                         <hr/>
                     </div>
                     <EditionSummary
+                        actionPanelButtonListType={this.props.actionPanelButtonListType}
                         edition={this.props.edition}
                         currentUser={this.state.currentUser}
                         handleSuccess={this.props.loadEdition}/>
@@ -137,7 +147,7 @@ let Edition = React.createClass({
                             currentUser={this.state.currentUser}/>
                         <Note
                             id={() => {return {'bitcoin_id': this.props.edition.bitcoin_id}; }}
-                            label={getLangText('Edition note (public)')}
+                            label={getLangText('Personal note (public)')}
                             defaultValue={this.props.edition.public_note ? this.props.edition.public_note : null}
                             placeholder={getLangText('Enter your comments ...')}
                             editable={!!this.props.edition.acl.acl_edit}
@@ -151,13 +161,12 @@ let Edition = React.createClass({
                         show={this.props.edition.acl.acl_edit
                             || Object.keys(this.props.edition.extra_data).length > 0
                             || this.props.edition.other_data.length > 0}>
-                        <FurtherDetails
+                        <FurtherDetailsType
                             editable={this.props.edition.acl.acl_edit}
                             pieceId={this.props.edition.parent}
                             extraData={this.props.edition.extra_data}
                             otherData={this.props.edition.other_data}
-                            handleSuccess={this.props.loadEdition}
-                            location={this.props.location}/>
+                            handleSuccess={this.props.loadEdition} />
                     </CollapsibleParagraph>
                     <CollapsibleParagraph
                         title={getLangText('SPOOL Details')}>
@@ -173,6 +182,7 @@ let Edition = React.createClass({
 
 let EditionSummary = React.createClass({
     propTypes: {
+        actionPanelButtonListType: React.PropTypes.func,
         edition: React.PropTypes.object,
         currentUser: React.PropTypes.object,
         handleSuccess: React.PropTypes.func
@@ -185,7 +195,7 @@ let EditionSummary = React.createClass({
     getStatus(){
         let status = null;
         if (this.props.edition.status.length > 0){
-            let statusStr = this.props.edition.status.join().replace(/_/, ' ');
+            let statusStr = this.props.edition.status.join(', ').replace(/_/g, ' ');
             status = <EditionDetailProperty label="STATUS" value={ statusStr }/>;
             if (this.props.edition.pending_new_owner && this.props.edition.acl.acl_withdraw_transfer){
                 status = (
@@ -197,7 +207,7 @@ let EditionSummary = React.createClass({
     },
 
     render() {
-        let { edition, currentUser } = this.props;
+        let { actionPanelButtonListType, edition, currentUser } = this.props;
         return (
             <div className="ascribe-detail-header">
                 <EditionDetailProperty
@@ -212,10 +222,16 @@ let EditionSummary = React.createClass({
                     value={ edition.owner } />
                 <LicenseDetail license={edition.license_type}/>
                 {this.getStatus()}
-                <AclProxy show={currentUser && currentUser.email}>
+                {/*
+                    `acl_view` is always available in `edition.acl`, therefore if it has
+                    no more than 1 key, we're hiding the `DetailProperty` actions as otherwise
+                    `AclInformation` would show up
+                */}
+                <AclProxy show={currentUser && currentUser.email && Object.keys(edition.acl).length > 1}>
                     <EditionDetailProperty
                         label={getLangText('ACTIONS')}>
                         <EditionActionPanel
+                            actionPanelButtonListType={actionPanelButtonListType}
                             edition={edition}
                             currentUser={currentUser}
                             handleSuccess={this.handleSuccess} />

js/components/ascribe_detail/edition_action_panel.js

@@ -36,6 +36,7 @@ import { getLangText } from '../../utils/lang_utils';
  */
 let EditionActionPanel = React.createClass({
     propTypes: {
+        actionPanelButtonListType: React.PropTypes.func,
         edition: React.PropTypes.object,
         currentUser: React.PropTypes.object,
         handleSuccess: React.PropTypes.func
@@ -43,6 +44,12 @@ let EditionActionPanel = React.createClass({
 
     mixins: [History],
 
+    getDefaultProps() {
+        return {
+            actionPanelButtonListType: AclButtonList
+        };
+    },
+
     getInitialState() {
         return PieceListStore.getState();
     },
@@ -87,7 +94,10 @@ let EditionActionPanel = React.createClass({
     },
 
     render(){
-        let {edition, currentUser} = this.props;
+        const {
+            actionPanelButtonListType: ActionPanelButtonListType,
+            edition,
+            currentUser } = this.props;
 
         if (edition &&
             edition.notifications &&
@@ -104,7 +114,7 @@ let EditionActionPanel = React.createClass({
             return (
                 <Row>
                     <Col md={12}>
-                        <AclButtonList
+                        <ActionPanelButtonListType
                             className="ascribe-button-list"
                             availableAcls={edition.acl}
                             pieceOrEditions={[edition]}
@@ -121,8 +131,9 @@ let EditionActionPanel = React.createClass({
                                         name="bitcoin_id"
                                         expanded={false}>
                                         <input
-                                             type="text"
-                                             value={edition.bitcoin_id} />
+                                            type="text"
+                                            value={edition.bitcoin_id}
+                                            readOnly />
                                     </Property>
                                     <Button bsStyle="default" className="pull-center" bsSize="small" type="submit">
                                         {getLangText('WITHDRAW TRANSFER')}
@@ -141,8 +152,9 @@ let EditionActionPanel = React.createClass({
                                         name="bitcoin_id"
                                         expanded={false}>
                                         <input
-                                             type="text"
-                                             value={edition.bitcoin_id} />
+                                            type="text"
+                                            value={edition.bitcoin_id}
+                                            readOnly />
                                     </Property>
                                     <Button bsStyle="danger" className="btn-delete pull-center" bsSize="small" type="submit">
                                         {getLangText('WITHDRAW CONSIGN')}
@@ -164,7 +176,7 @@ let EditionActionPanel = React.createClass({
                                 aim="button"
                                 verbs={['acl_share', 'acl_transfer', 'acl_consign', 'acl_loan', 'acl_delete']}
                                 aclObject={edition.acl}/>
-                        </AclButtonList>
+                        </ActionPanelButtonListType>
                     </Col>
                 </Row>
             );

js/components/ascribe_detail/edition_container.js

@@ -1,6 +1,10 @@
 'use strict';
 
 import React from 'react';
+import { History } from 'react-router';
+
+import ReactError from '../../mixins/react_error';
+import { ResourceNotFoundError } from '../../models/errors';
 
 import EditionActions from '../../actions/edition_actions';
 import EditionStore from '../../stores/edition_store';
@@ -9,6 +13,7 @@ import Edition from './edition';
 
 import AscribeSpinner from '../ascribe_spinner';
 
+import { getLangText } from '../../utils/lang_utils';
 import { setDocumentTitle } from '../../utils/dom_utils';
 
 
@@ -17,10 +22,13 @@ import { setDocumentTitle } from '../../utils/dom_utils';
  */
 let EditionContainer = React.createClass({
     propTypes: {
-        params: React.PropTypes.object,
-        location: React.PropTypes.object
+        actionPanelButtonListType: React.PropTypes.func,
+        furtherDetailsType: React.PropTypes.func,
+        params: React.PropTypes.object
     },
 
+    mixins: [History, ReactError],
+
     getInitialState() {
         return EditionStore.getState();
     },
@@ -28,11 +36,11 @@ let EditionContainer = React.createClass({
     componentDidMount() {
         EditionStore.listen(this.onChange);
 
-        // Every time we enter the edition detail page, just reset the edition
-        // store as it will otherwise display wrong/old data once the user loads
+        // Every time we're entering the edition detail page,
+        // just reset the edition that is saved in the edition store
+        // as it will otherwise display wrong/old data once the user loads
         // the edition detail a second time
         EditionActions.updateEdition({});
-
         this.loadEdition();
     },
 
@@ -45,6 +53,14 @@ let EditionContainer = React.createClass({
         }
     },
 
+    componentDidUpdate() {
+        const { editionError } = this.state;
+
+        if(editionError && editionError.status === 404) {
+            this.throws(new ResourceNotFoundError(getLangText("Oops, the edition you're looking for doesn't exist.")));
+        }
+    },
+
     componentWillUnmount() {
         window.clearInterval(this.state.timerId);
         EditionStore.unlisten(this.onChange);
@@ -67,14 +83,15 @@ let EditionContainer = React.createClass({
     },
 
     render() {
-        if(this.state.edition && this.state.edition.title) {
+        if(this.state.edition && this.state.edition.id) {
             setDocumentTitle([this.state.edition.artist_name, this.state.edition.title].join(', '));
 
             return (
                 <Edition
+                    actionPanelButtonListType={this.props.actionPanelButtonListType}
+                    furtherDetailsType={this.props.furtherDetailsType}
                     edition={this.state.edition}
-                    loadEdition={this.loadEdition}
-                    location={this.props.location}/>
+                    loadEdition={this.loadEdition} />
             );
         } else {
             return (

js/components/ascribe_detail/further_details.js

@@ -23,8 +23,7 @@ let FurtherDetails = React.createClass({
         pieceId: React.PropTypes.number,
         extraData: React.PropTypes.object,
         otherData: React.PropTypes.arrayOf(React.PropTypes.object),
-        handleSuccess: React.PropTypes.func,
-        location: React.PropTypes.object
+        handleSuccess: React.PropTypes.func
     },
 
     getInitialState() {
@@ -86,8 +85,7 @@ let FurtherDetails = React.createClass({
                             overrideForm={true}
                             pieceId={this.props.pieceId}
                             otherData={this.props.otherData}
-                            multiple={true}
-                            location={this.props.location}/>
+                            multiple={true} />
                     </Form>
                 </Col>
             </Row>

js/components/ascribe_detail/further_details_fileuploader.js

@@ -10,9 +10,12 @@ import ApiUrls from '../../constants/api_urls';
 import AppConstants from '../../constants/application_constants';
 
 import { getCookie } from '../../utils/fetch_api_utils';
+import { getLangText } from '../../utils/lang_utils';
+
 
 let FurtherDetailsFileuploader = React.createClass({
     propTypes: {
+        label: React.PropTypes.string,
         pieceId: React.PropTypes.number,
         otherData: React.PropTypes.arrayOf(React.PropTypes.object),
         setIsUploadReady: React.PropTypes.func,
@@ -24,6 +27,7 @@ let FurtherDetailsFileuploader = React.createClass({
 
     getDefaultProps() {
         return {
+            label: getLangText('Additional files'),
             multiple: false
         };
     },
@@ -43,7 +47,7 @@ let FurtherDetailsFileuploader = React.createClass({
         return (
             <Property
                 name="other_data_key"
-                label="Additional files">
+                label={this.props.label}>
                 <ReactS3FineUploader
                     keyRoutine={{
                         url: AppConstants.serverUrl + 's3/key/',

js/components/ascribe_detail/piece.js

@@ -20,7 +20,10 @@ let Piece = React.createClass({
         subheader: React.PropTypes.object,
         buttons: React.PropTypes.object,
         loadPiece: React.PropTypes.func,
-        children: React.PropTypes.object
+        children: React.PropTypes.oneOfType([
+            React.PropTypes.arrayOf(React.PropTypes.element),
+            React.PropTypes.element
+        ])
     },
 
 

js/components/ascribe_detail/piece_container.js

@@ -4,6 +4,9 @@ import React from 'react';
 import { History } from 'react-router';
 import Moment from 'moment';
 
+import ReactError from '../../mixins/react_error';
+import { ResourceNotFoundError } from '../../models/errors';
+
 import PieceActions from '../../actions/piece_actions';
 import PieceStore from '../../stores/piece_store';
 
@@ -50,11 +53,17 @@ import { setDocumentTitle } from '../../utils/dom_utils';
  */
 let PieceContainer = React.createClass({
     propTypes: {
-        params: React.PropTypes.object,
-        location: React.PropTypes.object
+        furtherDetailsType: React.PropTypes.func,
+        params: React.PropTypes.object
     },
 
-    mixins: [History],
+    mixins: [History, ReactError],
+
+    getDefaultProps() {
+        return {
+            furtherDetailsType: FurtherDetails
+        };
+    },
 
     getInitialState() {
         return mergeOptions(
@@ -70,15 +79,22 @@ let PieceContainer = React.createClass({
     componentDidMount() {
         UserStore.listen(this.onChange);
         PieceListStore.listen(this.onChange);
-        UserActions.fetchCurrentUser();
         PieceStore.listen(this.onChange);
 
         // Every time we enter the piece detail page, just reset the piece
         // store as it will otherwise display wrong/old data once the user loads
         // the piece detail a second time
         PieceActions.updatePiece({});
-
         this.loadPiece();
+        UserActions.fetchCurrentUser();
+    },
+
+    componentDidUpdate() {
+        const { pieceError } = this.state;
+
+        if(pieceError && pieceError.status === 404) {
+            this.throws(new ResourceNotFoundError(getLangText("Oops, the piece you're looking for doesn't exist.")));
+        }
     },
 
     componentWillUnmount() {
@@ -89,7 +105,7 @@ let PieceContainer = React.createClass({
 
     onChange(state) {
         /*
-        
+
             ATTENTION:
             THIS IS JUST A TEMPORARY USABILITY FIX THAT ESSENTIALLY REMOVES THE LOAN BUTTON
             FROM THE PIECE DETAIL PAGE SO THAT USERS DO NOT CONFUSE A PIECE WITH AN EDITION.
@@ -103,7 +119,6 @@ let PieceContainer = React.createClass({
 
             let pieceState = mergeOptions({}, state.piece);
             pieceState.acl.acl_loan = false;
-
             this.setState({
                 piece: pieceState
             });
@@ -197,7 +212,12 @@ let PieceContainer = React.createClass({
         } else {
             return (
                 <AclProxy
-                    show={currentUser && currentUser.email}>
+                    show={currentUser && currentUser.email && Object.keys(piece.acl).length > 1}>
+                    {/*
+                        `acl_view` is always available in `edition.acl`, therefore if it has
+                        no more than 1 key, we're hiding the `DetailProperty` actions as otherwise
+                        `AclInformation` would show up
+                    */}
                     <DetailProperty label={getLangText('ACTIONS')}>
                         <AclButtonList
                             className="ascribe-button-list"
@@ -226,7 +246,8 @@ let PieceContainer = React.createClass({
     },
 
     render() {
-        if(this.state.piece && this.state.piece.title) {
+        if (this.state.piece && this.state.piece.id) {
+            let FurtherDetailsType = this.props.furtherDetailsType;
             setDocumentTitle([this.state.piece.artist_name, this.state.piece.title].join(', '));
 
             return (
@@ -252,7 +273,6 @@ let PieceContainer = React.createClass({
                     }
                     buttons={this.getActions()}>
                     {this.getCreateEditionsDialog()}
-
                     <CollapsibleParagraph
                         title={getLangText('Loan History')}
                         show={this.state.piece.loan_history && this.state.piece.loan_history.length > 0}>
@@ -261,11 +281,14 @@ let PieceContainer = React.createClass({
                     </CollapsibleParagraph>
                     <CollapsibleParagraph
                         title={getLangText('Notes')}
-                        show={!!(this.state.currentUser.username || this.state.piece.public_note)}>
+                        show={!!(this.state.currentUser.username
+                                || this.state.piece.acl.acl_edit
+                                || this.state.piece.public_note)}>
                         <Note
                             id={this.getId}
                             label={getLangText('Personal note (private)')}
                             defaultValue={this.state.piece.private_note || null}
+                            show = {!!this.state.currentUser.username}
                             placeholder={getLangText('Enter your comments ...')}
                             editable={true}
                             successMessage={getLangText('Private note saved')}
@@ -273,11 +296,12 @@ let PieceContainer = React.createClass({
                             currentUser={this.state.currentUser}/>
                         <Note
                             id={this.getId}
-                            label={getLangText('Piece note (public)')}
+                            label={getLangText('Personal note (public)')}
                             defaultValue={this.state.piece.public_note || null}
                             placeholder={getLangText('Enter your comments ...')}
                             editable={!!this.state.piece.acl.acl_edit}
-                            successMessage={getLangText('Public piece note saved')}
+                            show={!!(this.state.piece.public_note || this.state.piece.acl.acl_edit)}
+                            successMessage={getLangText('Public note saved')}
                             url={ApiUrls.note_public_piece}
                             currentUser={this.state.currentUser}/>
                     </CollapsibleParagraph>
@@ -287,13 +311,12 @@ let PieceContainer = React.createClass({
                             || Object.keys(this.state.piece.extra_data).length > 0
                             || this.state.piece.other_data.length > 0}
                         defaultExpanded={true}>
-                        <FurtherDetails
+                        <FurtherDetailsType
                             editable={this.state.piece.acl.acl_edit}
                             pieceId={this.state.piece.id}
                             extraData={this.state.piece.extra_data}
                             otherData={this.state.piece.other_data}
-                            handleSuccess={this.loadPiece}
-                            location={this.props.location}/>
+                            handleSuccess={this.loadPiece} />
                     </CollapsibleParagraph>
 
                 </Piece>

js/components/ascribe_forms/acl_form_factory.js

@@ -20,9 +20,11 @@ import { getAclFormMessage, getAclFormDataId } from '../../utils/form_utils';
 let AclFormFactory = React.createClass({
     propTypes: {
         action: React.PropTypes.oneOf(AppConstants.aclList).isRequired,
-        currentUser: React.PropTypes.object.isRequired,
+        autoFocusProperty: React.PropTypes.string,
+        currentUser: React.PropTypes.object,
         email: React.PropTypes.string,
         message: React.PropTypes.string,
+        labels: React.PropTypes.object,
         pieceOrEditions: React.PropTypes.oneOfType([
             React.PropTypes.object,
             React.PropTypes.array
@@ -53,10 +55,12 @@ let AclFormFactory = React.createClass({
     render() {
         const {
             action,
+            autoFocusProperty,
             pieceOrEditions,
             currentUser,
             email,
             message,
+            labels,
             handleSuccess,
             showNotification } = this.props;
 
@@ -64,14 +68,16 @@ let AclFormFactory = React.createClass({
             aclName: action,
             entities: pieceOrEditions,
             isPiece: this.isPiece(),
-            senderName: currentUser.username
+            senderName: currentUser && currentUser.username
         });
 
         if (action === 'acl_consign') {
             return (
                 <ConsignForm
+                    autoFocusProperty={autoFocusProperty}
                     email={email}
                     message={formMessage}
+                    labels={labels}
                     id={this.getFormDataId()}
                     url={ApiUrls.ownership_consigns}
                     handleSuccess={showNotification ? this.showSuccessNotification : handleSuccess} />

js/components/ascribe_forms/form.js

@@ -124,8 +124,18 @@ let Form = React.createClass({
     getFormData() {
         let data = {};
 
-        for (let ref in this.refs) {
-            data[this.refs[ref].props.name] = this.refs[ref].state.value;
+        for (let refName in this.refs) {
+            const ref = this.refs[refName];
+
+            if (ref.state && 'value' in ref.state) {
+                // An input can also provide an `Object` as a value
+                // which we're going to merge with `data` (overwrites)
+                if(ref.state.value.constructor === Object) {
+                    Object.assign(data, ref.state.value);
+                } else {
+                    data[ref.props.name] = ref.state.value;
+                }
+            }
         }
 
         if (typeof this.props.getFormData === 'function') {
@@ -238,7 +248,6 @@ let Form = React.createClass({
     renderChildren() {
         return ReactAddons.Children.map(this.props.children, (child, i) => {
             if (child) {
-
                 // Since refs will be overwritten by this functions return statement,
                 // we still want to be able to define refs for nested `Form` or `Property`
                 // children, which is why we're upfront simply invoking the callback-ref-

js/components/ascribe_forms/form_consign.js

@@ -6,31 +6,70 @@ import Button from 'react-bootstrap/lib/Button';
 
 import Form from './form';
 import Property from './property';
+
+import InputContractAgreementCheckbox from './input_contract_agreement_checkbox';
 import InputTextAreaToggable from './input_textarea_toggable';
 
+
 import AscribeSpinner from '../ascribe_spinner';
-import { getLangText } from '../../utils/lang_utils.js';
+
 import AclInformation from '../ascribe_buttons/acl_information';
 
+import { getLangText } from '../../utils/lang_utils.js';
+
 let ConsignForm = React.createClass({
     propTypes: {
         url: React.PropTypes.string,
         id: React.PropTypes.object,
+        autoFocusProperty: React.PropTypes.string,
+        email: React.PropTypes.string,
         message: React.PropTypes.string,
+        labels: React.PropTypes.object,
+        createPublicContractAgreement: React.PropTypes.bool,
         handleSuccess: React.PropTypes.func
     },
 
-    getFormData(){
+    getDefaultProps() {
+        return {
+            labels: {}
+        };
+    },
+
+    getInitialState() {
+        return {
+            email: this.props.email || ''
+        };
+    },
+
+    getFormData() {
         return this.props.id;
     },
 
+    handleEmailOnChange(event) {
+        // event.target.value is the submitted email of the consignee
+        this.setState({
+            email: event && event.target && event.target.value || ''
+        });
+    },
+
     render() {
+        const { email } = this.state;
+        const {
+            autoFocusProperty,
+            createPublicContractAgreement,
+            email: defaultEmail,
+            handleSuccess,
+            id,
+            message,
+            labels,
+            url } = this.props;
+
         return (
             <Form
                 ref='form'
-                url={this.props.url}
+                url={url}
                 getFormData={this.getFormData}
-                handleSuccess={this.props.handleSuccess}
+                handleSuccess={handleSuccess}
                 buttons={
                     <div className="modal-footer">
                         <p className="pull-right">
@@ -49,24 +88,39 @@ let ConsignForm = React.createClass({
                     </div>}>
                 <AclInformation aim={'form'} verbs={['acl_consign']}/>
                 <Property
+                    autoFocus={autoFocusProperty === 'email'}
                     name='consignee'
-                    label={getLangText('Email')}>
+                    label={labels.email || getLangText('Email')}
+                    editable={!defaultEmail}
+                    onChange={this.handleEmailOnChange}
+                    overrideForm={!!defaultEmail}>
                     <input
                         type="email"
+                        value={email}
                         placeholder={getLangText('Email of the consignee')}
                         required/>
                 </Property>
                 <Property
+                    autoFocus={autoFocusProperty === 'message'}
                     name='consign_message'
-                    label={getLangText('Personal Message')}
-                    editable={true}
-                    overrideForm={true}>
+                    label={labels.message || getLangText('Personal Message')}
+                    editable
+                    overrideForm>
                     <InputTextAreaToggable
                         rows={1}
-                        defaultValue={this.props.message}
+                        defaultValue={message}
                         placeholder={getLangText('Enter a message...')}
                         required />
                 </Property>
+                <Property
+                    name='contract_agreement'
+                    label={getLangText('Consign Contract')}
+                    className="ascribe-property-collapsible-toggle"
+                    style={{paddingBottom: 0}}>
+                    <InputContractAgreementCheckbox
+                        createPublicContractAgreement={createPublicContractAgreement}
+                        email={email} />
+                </Property>
                 <Property
                     name='password'
                     label={getLangText('Password')}>

js/components/ascribe_forms/form_loan.js

@@ -1,33 +1,34 @@
 'use strict';
 
 import React from 'react';
-
 import classnames from 'classnames';
 
 import Button from 'react-bootstrap/lib/Button';
 
+import ContractAgreementListStore from '../../stores/contract_agreement_list_store';
+
 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 ContractAgreementListStore from '../../stores/contract_agreement_list_store';
-import ContractAgreementListActions from '../../actions/contract_agreement_list_actions';
+import InputDate from './input_date';
+import InputTextAreaToggable from './input_textarea_toggable';
+import InputContractAgreementCheckbox from './input_contract_agreement_checkbox';
 
 import AscribeSpinner from '../ascribe_spinner';
 
-import { mergeOptions } from '../../utils/general_utils';
-import { getLangText } from '../../utils/lang_utils';
 import AclInformation from '../ascribe_buttons/acl_information';
 
+import { getLangText } from '../../utils/lang_utils';
+import { mergeOptions } from '../../utils/general_utils';
+
+
 let LoanForm = React.createClass({
     propTypes: {
         loanHeading: React.PropTypes.string,
         email: React.PropTypes.string,
         gallery: React.PropTypes.string,
-        startdate: React.PropTypes.object,
-        enddate: React.PropTypes.object,
+        startDate: React.PropTypes.object,
+        endDate: React.PropTypes.object,
         showPersonalMessage: React.PropTypes.bool,
         showEndDate: React.PropTypes.bool,
         showStartDate: React.PropTypes.bool,
@@ -36,7 +37,11 @@ let LoanForm = React.createClass({
         id: React.PropTypes.object,
         message: React.PropTypes.string,
         createPublicContractAgreement: React.PropTypes.bool,
-        handleSuccess: React.PropTypes.func
+        handleSuccess: React.PropTypes.func,
+        children: React.PropTypes.oneOfType([
+            React.PropTypes.object,
+            React.PropTypes.array
+        ])
     },
 
     getDefaultProps() {
@@ -45,148 +50,33 @@ let LoanForm = React.createClass({
             showPersonalMessage: true,
             showEndDate: true,
             showStartDate: true,
-            showPassword: true,
-            createPublicContractAgreement: true
+            showPassword: true
         };
     },
 
     getInitialState() {
-        return ContractAgreementListStore.getState();
-    },
-
-    componentDidMount() {
-        ContractAgreementListStore.listen(this.onChange);
-        this.getContractAgreementsOrCreatePublic(this.props.email);
-    },
-
-    /**
-     * This method needs to be in form_loan as some whitelabel pages (Cyland) load
-     * the loanee's email async!
-     *
-     * SO LEAVE IT IN!
-     */
-    componentWillReceiveProps(nextProps) {
-        if(nextProps && nextProps.email && this.props.email !== nextProps.email) {
-            this.getContractAgreementsOrCreatePublic(nextProps.email);
-        }
-    },
-
-    componentWillUnmount() {
-        ContractAgreementListStore.unlisten(this.onChange);
+        return {
+            email: this.props.email || ''
+        };
     },
 
     onChange(state) {
         this.setState(state);
     },
 
-    getContractAgreementsOrCreatePublic(email){
-        ContractAgreementListActions.flushContractAgreementList.defer();
-        if (email) {
-            // fetch the available contractagreements (pending/accepted)
-            ContractAgreementListActions.fetchAvailableContractAgreementList(email, true);
-        }
-    },
-
-    getFormData(){
-        return mergeOptions(
-            this.props.id,
-            this.getContractAgreementId()
-        );
-    },
-
-    handleOnChange(event) {
+    handleEmailOnChange(event) {
         // event.target.value is the submitted email of the loanee
-        if(event && event.target && event.target.value && event.target.value.match(/.*@.*\..*/)) {
-            this.getContractAgreementsOrCreatePublic(event.target.value);
-        } else {
-            ContractAgreementListActions.flushContractAgreementList();
-        }
+        this.setState({
+            email: event && event.target && event.target.value || ''
+        });
     },
 
-    getContractAgreementId() {
-        if (this.state.contractAgreementList && this.state.contractAgreementList.length > 0) {
-            return {'contract_agreement_id': this.state.contractAgreementList[0].id};
-        }
-        return {};
+    handleReset() {
+        this.handleEmailOnChange();
     },
 
-    getContractCheckbox() {
-        if(this.state.contractAgreementList && this.state.contractAgreementList.length > 0) {
-            // we need to define a key on the InputCheckboxes as otherwise
-            // react is not rerendering them on a store switch and is keeping
-            // the default value of the component (which is in that case true)
-            let contractAgreement = this.state.contractAgreementList[0];
-            let contract = contractAgreement.contract;
-
-            if(contractAgreement.datetime_accepted) {
-                return (
-                    <Property
-                        name="terms"
-                        label={getLangText('Loan Contract')}
-                        expanded={true}
-                        className="notification-contract-pdf">
-                        <embed
-                            className="loan-form"
-                            src={contract.blob.url_safe}
-                            alt="pdf"
-                            pluginspage="http://www.adobe.com/products/acrobat/readstep2.html"/>
-                        <a href={contract.blob.url_safe} target="_blank">
-                            <span className="glyphicon glyphicon-download" aria-hidden="true"></span> {getLangText('Download contract')}
-                        </a>
-                        {/* We still need to send the server information that we're accepting */}
-                        <InputCheckbox
-                                style={{'display': 'none'}}
-                                key="terms_implicitly"
-                                defaultChecked={true} />
-                    </Property>
-                );
-            } else {
-                return (
-                    <Property
-                        name="terms"
-                        className="ascribe-property-collapsible-toggle"
-                        style={{paddingBottom: 0}}>
-                        <InputCheckbox
-                            key="terms_explicitly"
-                            defaultChecked={false}>
-                            <span>
-                                {getLangText('I agree to the')}&nbsp;
-                                <a href={contract.blob.url_safe} target="_blank">
-                                    {getLangText('terms of ')} {contract.issuer}
-                                </a>
-                            </span>
-                        </InputCheckbox>
-                    </Property>
-                );
-            }
-        } else {
-            return (
-                <Property
-                    name="terms"
-                    style={{paddingBottom: 0}}
-                    expanded={false}>
-                    <InputCheckbox
-                        key="terms_implicitly"
-                        defaultChecked={true} />
-                </Property>
-            );
-        }
-    },
-
-    getAppendix() {
-        if(this.state.contractAgreementList && this.state.contractAgreementList.length > 0) {
-            let appendix = this.state.contractAgreementList[0].appendix;
-            if (appendix && appendix.default) {
-                return (
-                    <Property
-                        name='appendix'
-                        label={getLangText('Appendix')}>
-                        <pre className="ascribe-pre">{appendix.default}</pre>
-                    </Property>
-                );
-            }
-        }
-        return null;
+    getFormData() {
+        return this.props.id;
     },
 
     getButtons() {
@@ -214,14 +104,31 @@ let LoanForm = React.createClass({
     },
 
     render() {
+        const { email } = this.state;
+        const {
+            children,
+            createPublicContractAgreement,
+            email: defaultEmail,
+            handleSuccess,
+            gallery,
+            loanHeading,
+            message,
+            showPersonalMessage,
+            endDate,
+            startDate,
+            showEndDate,
+            showStartDate,
+            showPassword,
+            url } = this.props;
+
         return (
             <Form
-                className={classnames({'ascribe-form-bordered': this.props.loanHeading})}
+                className={classnames({'ascribe-form-bordered': loanHeading})}
                 ref='form'
-                url={this.props.url}
+                url={url}
                 getFormData={this.getFormData}
-                onReset={this.handleOnChange}
-                handleSuccess={this.props.handleSuccess}
+                onReset={this.handleReset}
+                handleSuccess={handleSuccess}
                 buttons={this.getButtons()}
                 spinner={
                     <div className="modal-footer">
@@ -229,18 +136,18 @@ let LoanForm = React.createClass({
                             <AscribeSpinner color='dark-blue' size='md'/>
                         </p>
                     </div>}>
-                <div className={classnames({'ascribe-form-header': true, 'hidden': !this.props.loanHeading})}>
-                    <h3>{this.props.loanHeading}</h3>
+                <div className={classnames({'ascribe-form-header': true, 'hidden': !loanHeading})}>
+                    <h3>{loanHeading}</h3>
                 </div>
                 <AclInformation aim={'form'} verbs={['acl_loan']}/>
                 <Property
                     name='loanee'
                     label={getLangText('Loanee Email')}
-                    editable={!this.props.email}
-                    onChange={this.handleOnChange}
-                    overrideForm={!!this.props.email}>
+                    editable={!defaultEmail}
+                    onChange={this.handleEmailOnChange}
+                    overrideForm={!!defaultEmail}>
                     <input
-                        value={this.props.email}
+                        value={email}
                         type="email"
                         placeholder={getLangText('Email of the loanee')}
                         required/>
@@ -248,31 +155,31 @@ let LoanForm = React.createClass({
                 <Property
                     name='gallery'
                     label={getLangText('Gallery/exhibition (optional)')}
-                    editable={!this.props.gallery}
-                    overrideForm={!!this.props.gallery}>
+                    editable={!gallery}
+                    overrideForm={!!gallery}>
                     <input
-                        value={this.props.gallery}
+                        value={gallery}
                         type="text"
                         placeholder={getLangText('Gallery/exhibition (optional)')}/>
                 </Property>
                 <Property
                     name='startdate'
                     label={getLangText('Start date')}
-                    editable={!this.props.startdate}
-                    overrideForm={!!this.props.startdate}
-                    expanded={this.props.showStartDate}>
+                    editable={!startDate}
+                    overrideForm={!!startDate}
+                    expanded={showStartDate}>
                     <InputDate
-                        defaultValue={this.props.startdate}
+                        defaultValue={startDate}
                         placeholderText={getLangText('Loan start date')} />
                 </Property>
                 <Property
                     name='enddate'
-                    editable={!this.props.enddate}
-                    overrideForm={!!this.props.enddate}
+                    editable={!endDate}
+                    overrideForm={!!endDate}
                     label={getLangText('End date')}
-                    expanded={this.props.showEndDate}>
+                    expanded={showEndDate}>
                     <InputDate
-                        defaultValue={this.props.enddate}
+                        defaultValue={endDate}
                         placeholderText={getLangText('Loan end date')} />
                 </Property>
                 <Property
@@ -280,25 +187,32 @@ let LoanForm = React.createClass({
                     label={getLangText('Personal Message')}
                     editable={true}
                     overrideForm={true}
-                    expanded={this.props.showPersonalMessage}>
+                    expanded={showPersonalMessage}>
                     <InputTextAreaToggable
                         rows={1}
-                        defaultValue={this.props.message}
+                        defaultValue={message}
                         placeholder={getLangText('Enter a message...')}
-                        required={this.props.showPersonalMessage}/>
+                        required={showPersonalMessage}/>
+                </Property>
+                <Property
+                    name='contract_agreement'
+                    label={getLangText('Loan Contract')}
+                    className="ascribe-property-collapsible-toggle"
+                    style={{paddingBottom: 0}}>
+                    <InputContractAgreementCheckbox
+                        createPublicContractAgreement={createPublicContractAgreement}
+                        email={email} />
                 </Property>
-                {this.getContractCheckbox()}
-                {this.getAppendix()}
                 <Property
                     name='password'
                     label={getLangText('Password')}
-                    expanded={this.props.showPassword}>
+                    expanded={showPassword}>
                     <input
                         type="password"
                         placeholder={getLangText('Enter your password')}
-                        required={this.props.showPassword ? 'required' : ''}/>
+                        required={showPassword}/>
                 </Property>
-                {this.props.children}
+                {children}
             </Form>
         );
     }

js/components/ascribe_forms/form_loan_request_answer.js

@@ -65,8 +65,8 @@ let LoanRequestAnswerForm = React.createClass({
                     url={this.props.url}
                     email={this.state.loanRequest ? this.state.loanRequest.new_owner : null}
                     gallery={this.state.loanRequest ? this.state.loanRequest.gallery : null}
-                    startdate={startDate}
-                    enddate={endDate}
+                    startDate={startDate}
+                    endDate={endDate}
                     showPassword={true}
                     showPersonalMessage={false}
                     handleSuccess={this.props.handleSuccess}/>
@@ -76,4 +76,4 @@ let LoanRequestAnswerForm = React.createClass({
     }
 });
 
-export default LoanRequestAnswerForm;
+export default LoanRequestAnswerForm;

js/components/ascribe_forms/form_register_piece.js

@@ -30,7 +30,6 @@ let RegisterPieceForm = React.createClass({
         isFineUploaderActive: React.PropTypes.bool,
         isFineUploaderEditable: React.PropTypes.bool,
         enableLocalHashing: React.PropTypes.bool,
-        onLoggedOut: React.PropTypes.func,
 
         // For this form to work with SlideContainer, we sometimes have to disable it
         disabled: React.PropTypes.bool,
@@ -124,7 +123,6 @@ let RegisterPieceForm = React.createClass({
                 submitMessage,
                 headerMessage,
                 isFineUploaderActive,
-                onLoggedOut,
                 isFineUploaderEditable,
                 location,
                 children,
@@ -175,7 +173,6 @@ let RegisterPieceForm = React.createClass({
                         setIsUploadReady={this.setIsUploadReady('digitalWorkKeyReady')}
                         isReadyForFormSubmission={formSubmissionValidation.atLeastOneUploadedFile}
                         isFineUploaderActive={isFineUploaderActive}
-                        onLoggedOut={onLoggedOut}
                         disabled={!isFineUploaderEditable}
                         enableLocalHashing={hashLocally}
                         uploadMethod={location.query.method}
@@ -207,6 +204,10 @@ let RegisterPieceForm = React.createClass({
                             singular: getLangText('Select representative image'),
                             plural: getLangText('Select representative images')
                         }}/>
+                        isFineUploaderActive={isFineUploaderActive}
+                        disabled={!isFineUploaderEditable}
+                        enableLocalHashing={enableLocalHashing}
+                        uploadMethod={location.query.method} />
                 </Property>
                 <Property
                     name='artist_name'

js/components/ascribe_forms/form_send_contract_agreement.js

@@ -20,7 +20,7 @@ import { getLangText } from '../../utils/lang_utils';
 import { mergeOptions } from '../../utils/general_utils';
 
 
-let ContractAgreementForm = React.createClass({
+let SendContractAgreementForm = React.createClass({
     propTypes: {
         handleSuccess: React.PropTypes.func
     },
@@ -54,7 +54,7 @@ let ContractAgreementForm = React.createClass({
     },
 
     handleSubmitSuccess() {
-        let notification = 'Contract agreement send';
+        let notification = 'Contract agreement sent';
         notification = new GlobalNotificationModel(notification, 'success', 10000);
         GlobalNotificationActions.appendGlobalNotification(notification);
 
@@ -148,4 +148,4 @@ let ContractAgreementForm = React.createClass({
     }
 });
 
-export default ContractAgreementForm;
+export default SendContractAgreementForm;

js/components/ascribe_forms/form_unconsign_request.js

@@ -57,7 +57,7 @@ let UnConsignRequestForm = React.createClass({
                         rows={1}
                         defaultValue={this.props.message}
                         placeholder={getLangText('Enter a message...')}
-                        required="required"/>
+                        required />
                 </Property>
                 <hr />
             </Form>
@@ -65,4 +65,4 @@ let UnConsignRequestForm = React.createClass({
     }
 });
 
-export default UnConsignRequestForm;
+export default UnConsignRequestForm;

js/components/ascribe_forms/input_contract_agreement_checkbox.js

@@ -0,0 +1,206 @@
+'use strict';
+
+import React from 'react/addons';
+
+import InputCheckbox from './input_checkbox';
+
+import ContractAgreementListStore from '../../stores/contract_agreement_list_store';
+import ContractAgreementListActions from '../../actions/contract_agreement_list_actions';
+
+import { getLangText } from '../../utils/lang_utils';
+import { mergeOptions } from '../../utils/general_utils';
+import { isEmail } from '../../utils/regex_utils';
+
+
+const InputContractAgreementCheckbox = React.createClass({
+    propTypes: {
+        createPublicContractAgreement: React.PropTypes.bool,
+        email: React.PropTypes.string,
+
+        required: React.PropTypes.bool,
+
+        // provided by Property
+        disabled: React.PropTypes.bool,
+        onChange: React.PropTypes.func,
+        name: React.PropTypes.string,
+        setExpanded: React.PropTypes.func,
+
+        // can be used to style the component from the outside
+        style: React.PropTypes.object
+    },
+
+    getDefaultProps() {
+        return {
+            createPublicContractAgreement: true
+        };
+    },
+
+    getInitialState() {
+        return mergeOptions(
+            ContractAgreementListStore.getState(),
+            {
+                value: {
+                    terms: null,
+                    contract_agreement_id: null
+                }
+            }
+        );
+    },
+
+    componentDidMount() {
+        ContractAgreementListStore.listen(this.onStoreChange);
+        this.getContractAgreementsOrCreatePublic(this.props.email);
+    },
+
+    componentWillReceiveProps({ email: nextEmail }) {
+        if (this.props.email !== nextEmail) {
+            if (isEmail(nextEmail)) {
+                this.getContractAgreementsOrCreatePublic(nextEmail);
+            } else if (this.getContractAgreement()) {
+                ContractAgreementListActions.flushContractAgreementList();
+            }
+        }
+    },
+
+    componentWillUnmount() {
+        ContractAgreementListStore.unlisten(this.onStoreChange);
+    },
+
+    onStoreChange(state) {
+        const contractAgreement = this.getContractAgreement(state.contractAgreementList);
+
+        // If there is no contract available, hide this `Property` from the user
+        this.props.setExpanded(!!contractAgreement);
+
+        state = mergeOptions(state, {
+            value: {
+                // If `email` is defined in this component, `getContractAgreementsOrCreatePublic`
+                // is either:
+                //
+                // - fetching a already existing contract agreement; or
+                // - trying to create a contract agreement
+                //
+                // If both attempts result in `contractAgreement` being not defined,
+                // it means that the receiver hasn't defined a contract, which means
+                // a contract agreement cannot be created, which means we don't have to
+                // specify `contract_agreement_id` when sending a request to the server.
+                contract_agreement_id: contractAgreement ? contractAgreement.id : null,
+                // If the receiver hasn't set a contract or the contract was
+                // previously accepted, we set the terms to `true`
+                // as we always need to at least give a boolean value for `terms`
+                // to the API endpoint
+                terms: !contractAgreement || !!contractAgreement.datetime_accepted
+            }
+        });
+
+        this.setState(state);
+    },
+
+    onChange(event) {
+        // Sync the value between our `InputCheckbox` and this component's `terms`
+        // so the parent `Property` is able to get the correct value of this component
+        // when the `Form` queries it.
+        this.setState({
+            value: React.addons.update(this.state.value, {
+                terms: { $set: event.target.value }
+            })
+        });
+
+        // Propagate change events from the checkbox up to the parent `Property`
+        this.props.onChange(event);
+    },
+
+    getContractAgreement(contractAgreementList = this.state.contractAgreementList) {
+        if (contractAgreementList && contractAgreementList.length) {
+            return contractAgreementList[0];
+        }
+    },
+
+    getContractAgreementsOrCreatePublic(email) {
+        ContractAgreementListActions.flushContractAgreementList.defer();
+
+        if (email) {
+            // fetch the available contractagreements (pending/accepted)
+            ContractAgreementListActions.fetchAvailableContractAgreementList(email, this.props.createPublicContractAgreement);
+        }
+    },
+
+    getAppendix() {
+        const contractAgreement = this.getContractAgreement();
+
+        if (contractAgreement &&
+            contractAgreement.appendix &&
+            contractAgreement.appendix.default) {
+            return (
+                <div className="ascribe-property contract-appendix-form">
+                    <p><span>{getLangText('Appendix')}</span></p>
+                    <pre className="ascribe-pre">{contractAgreement.appendix.default}</pre>
+                </div>
+            );
+        }
+    },
+
+    getContractCheckbox() {
+        const contractAgreement = this.getContractAgreement();
+
+        if(contractAgreement) {
+            const {
+                datetime_accepted: datetimeAccepted,
+                contract: {
+                    issuer: contractIssuer,
+                    blob: { url_safe: contractUrl }
+                }
+            } = contractAgreement;
+
+            if(datetimeAccepted) {
+                return (
+                    <div
+                        className="notification-contract-pdf"
+                        style={{paddingBottom: '1em'}}>
+                        <embed
+                            className="embed-form"
+                            src={contractUrl}
+                            alt="pdf"
+                            pluginspage="http://www.adobe.com/products/acrobat/readstep2.html"/>
+                        <a href={contractUrl} target="_blank">
+                            <span className="glyphicon glyphicon-download" aria-hidden="true" /> {getLangText('Download contract')}
+                        </a>
+                    </div>
+                );
+            } else {
+                const {
+                    name,
+                    disabled,
+                    style } = this.props;
+
+                return (
+                    <InputCheckbox
+                        name={name}
+                        disabled={disabled}
+                        style={style}
+                        onChange={this.onChange}
+                        key="terms_explicitly"
+                        defaultChecked={false}>
+                        <span>
+                            {getLangText('I agree to the')}&nbsp;
+                            <a href={contractUrl} target="_blank">
+                                {getLangText('terms of ')} {contractIssuer}
+                            </a>
+                        </span>
+                    </InputCheckbox>
+                );
+            }
+        }
+    },
+
+    render() {
+        return (
+            <div>
+                {this.getContractCheckbox()}
+                {this.getAppendix()}
+            </div>
+        );
+    }
+});
+
+export default InputContractAgreementCheckbox;

js/components/ascribe_forms/input_fineuploader.js

@@ -38,7 +38,6 @@ const InputFineUploader = React.createClass({
         // a user is actually not logged in already to prevent him from droping files
         // before login in
         isFineUploaderActive: bool,
-        onLoggedOut: func,
 
         enableLocalHashing: bool,
         uploadMethod: string,
@@ -52,7 +51,10 @@ const InputFineUploader = React.createClass({
             singular: string,
             plural: string
         }),
-        handleChangedFile: func
+        handleChangedFile: func,
+
+        // Provided by `Property`
+        onChange: React.PropTypes.func
     },
 
     getDefaultProps() {
@@ -95,24 +97,26 @@ const InputFineUploader = React.createClass({
     },
 
     render() {
-        const { fileInputElement,
-                keyRoutine,
-                createBlobRoutine,
-                validation,
-                setIsUploadReady,
-                isReadyForFormSubmission,
-                areAssetsDownloadable,
-                onLoggedOut,
-                enableLocalHashing,
-                fileClassToUpload,
-                uploadMethod,
-                handleChangedFile } = this.props;
-        let editable = this.props.isFineUploaderActive;
+        const {
+            areAssetsDownloadable,
+            enableLocalHashing,
+            createBlobRoutine,
+            disabled,
+            fileClassToUpload,
+            fileInputElement,
+            isFineUploaderActive,
+            isReadyForFormSubmission,
+            keyRoutine,
+            setIsUploadReady,
+            uploadMethod,
+            validation,
+            handleChangedFile } = this.props;
+        let editable = isFineUploaderActive;
 
         // if disabled is actually set by property, we want to override
         // isFineUploaderActive
-        if(typeof this.props.disabled !== 'undefined') {
-            editable = !this.props.disabled;
+        if(typeof disabled !== 'undefined') {
+            editable = !disabled;
         }
 
         return (
@@ -141,7 +145,6 @@ const InputFineUploader = React.createClass({
                        'X-CSRFToken': getCookie(AppConstants.csrftoken)
                     }
                 }}
-                onInactive={onLoggedOut}
                 enableLocalHashing={enableLocalHashing}
                 uploadMethod={uploadMethod}
                 fileClassToUpload={fileClassToUpload}

js/components/ascribe_forms/input_textarea_toggable.js

@@ -7,6 +7,7 @@ import TextareaAutosize from 'react-textarea-autosize';
 
 let InputTextAreaToggable = React.createClass({
     propTypes: {
+        autoFocus: React.PropTypes.bool,
         disabled: React.PropTypes.bool,
         rows: React.PropTypes.number.isRequired,
         required: React.PropTypes.bool,
@@ -23,6 +24,10 @@ let InputTextAreaToggable = React.createClass({
     },
 
     componentDidMount() {
+        if (this.props.autoFocus) {
+            this.refs.textarea.focus();
+        }
+
         this.setState({
             value: this.props.defaultValue
         });
@@ -51,6 +56,7 @@ let InputTextAreaToggable = React.createClass({
             className = className + ' ascribe-textarea-editable';
             textarea = (
                 <TextareaAutosize
+                    ref='textarea'
                     className={className}
                     value={this.state.value}
                     rows={this.props.rows}

js/components/ascribe_forms/list_form_request_actions.js

@@ -10,7 +10,7 @@ let ListRequestActions = React.createClass({
             React.PropTypes.object,
             React.PropTypes.array
         ]).isRequired,
-        currentUser: React.PropTypes.object.isRequired,
+        currentUser: React.PropTypes.object,
         handleSuccess: React.PropTypes.func.isRequired,
         notifications: React.PropTypes.array.isRequired
     },
@@ -33,4 +33,4 @@ let ListRequestActions = React.createClass({
     }
 });
 
-export default ListRequestActions;
+export default ListRequestActions;

js/components/ascribe_forms/property.js

@@ -42,7 +42,8 @@ const Property = React.createClass({
         ]),
         style: object,
         expanded: bool,
-        checkboxLabel: string
+        checkboxLabel: string,
+        autoFocus: bool
     },
 
     getDefaultProps() {
@@ -75,16 +76,24 @@ const Property = React.createClass({
         };
     },
 
+    componentDidMount() {
+        if(this.props.autoFocus) {
+            this.handleFocus();
+        }
+    },
+
     componentWillReceiveProps(nextProps) {
         let childInput = this.refs.input;
 
-        // For expanded there are actually two use cases:
+        // For expanded there are actually three use cases:
         //
         // 1. Control its value from the outside completely (do not define `checkboxLabel`)
         // 2. Let it be controlled from the inside (default value can be set though via `expanded`)
+        // 3. Let it be controlled from a child by using `setExpanded` (`expanded` must not be
+        //    set from the outside as a prop then(!!!))
         //
-        // This handles case 1.
-        if(nextProps.expanded !== this.state.expanded && !this.props.checkboxLabel) {
+        // This handles case 1. and 3.
+        if(nextProps.expanded !== this.props.expanded && nextProps.expanded !== this.state.expanded && !this.props.checkboxLabel) {
             this.setState({ expanded: nextProps.expanded });
         }
 
@@ -226,6 +235,14 @@ const Property = React.createClass({
         }
     },
 
+    setExpanded(expanded) {
+        this.setState({ expanded });
+    },
+
+    handleCheckboxToggle() {
+        this.setExpanded(!this.state.expanded);
+    },
+
     renderChildren(style) {
         // Input's props should only be cloned and propagated down the tree,
         // if the component is actually being shown (!== 'expanded === false')
@@ -247,7 +264,8 @@ const Property = React.createClass({
                     onBlur: this.handleBlur,
                     disabled: !this.props.editable,
                     ref: 'input',
-                    name: this.props.name
+                    name: this.props.name,
+                    setExpanded: this.setExpanded
                 });
             });
         }
@@ -293,13 +311,14 @@ const Property = React.createClass({
 
     render() {
         let footer = null;
-        let style = this.props.style ? mergeOptions({}, this.props.style) : {};
+        let style = Object.assign({}, this.props.style);
 
         if(this.props.footer){
             footer = (
                 <div className="ascribe-property-footer">
                     {this.props.footer}
-                </div>);
+                </div>
+            );
         }
 
         style.paddingBottom = !this.state.expanded ? 0 : null;

js/components/ascribe_piece_list_bulk_modal/piece_list_bulk_modal.js

@@ -4,77 +4,24 @@ import React from 'react';
 
 import { mergeOptions } from '../../utils/general_utils';
 
-import EditionListStore from '../../stores/edition_list_store';
 import EditionListActions from '../../actions/edition_list_actions';
 
-import UserStore from '../../stores/user_store';
-import UserActions from '../../actions/user_actions';
-
-import PieceListStore from '../../stores/piece_list_store';
-import PieceListActions from '../../actions/piece_list_actions';
-
 import PieceListBulkModalSelectedEditionsWidget from './piece_list_bulk_modal_selected_editions_widget';
-import AclButtonList from '../ascribe_buttons/acl_button_list';
-import DeleteButton from '../ascribe_buttons/delete_button';
 
-import { getAvailableAcls } from '../../utils/acl_utils';
 import { getLangText } from '../../utils/lang_utils.js';
 
 let PieceListBulkModal = React.createClass({
     propTypes: {
-        className: React.PropTypes.string
-    },
-
-    getInitialState() {
-        return mergeOptions(
-            EditionListStore.getState(),
-            UserStore.getState(),
-            PieceListStore.getState()
-        );
-    },
-
-    
-
-    componentDidMount() {
-        EditionListStore.listen(this.onChange);
-        UserStore.listen(this.onChange);
-        PieceListStore.listen(this.onChange);
-
-        UserActions.fetchCurrentUser();
-        PieceListActions.fetchPieceList(this.state.page, this.state.pageSize, this.state.search,
-                                        this.state.orderBy, this.state.orderAsc, this.state.filterBy);
-    },
-
-    componentWillUnmount() {
-        EditionListStore.unlisten(this.onChange);
-        PieceListStore.unlisten(this.onChange);
-        UserStore.unlisten(this.onChange);
-    },
-
-    onChange(state) {
-        this.setState(state);
-    },
-
-    fetchSelectedPieceEditionList() {
-        let filteredPieceIdList = Object.keys(this.state.editionList)
-                                        .filter((pieceId) => {
-                                            return this.state.editionList[pieceId]
-                                                .filter((edition) => edition.selected).length > 0;
-                                        });
-        return filteredPieceIdList;
-    },
-
-    fetchSelectedEditionList() {
-        let selectedEditionList = [];
-
-        Object
-            .keys(this.state.editionList)
-            .forEach((pieceId) => {
-                let filteredEditionsForPiece = this.state.editionList[pieceId].filter((edition) => edition.selected);
-                selectedEditionList = selectedEditionList.concat(filteredEditionsForPiece);
-            });
-
-        return selectedEditionList;
+        availableAcls: React.PropTypes.object.isRequired,
+        className: React.PropTypes.string,
+        selectedEditions: React.PropTypes.oneOfType([
+            React.PropTypes.object,
+            React.PropTypes.array
+        ]),
+        children: React.PropTypes.oneOfType([
+            React.PropTypes.arrayOf(React.PropTypes.element),
+            React.PropTypes.element
+        ])
     },
 
     clearAllSelections() {
@@ -82,22 +29,8 @@ let PieceListBulkModal = React.createClass({
         EditionListActions.closeAllEditionLists();
     },
 
-    handleSuccess() {
-        PieceListActions.fetchPieceList(this.state.page, this.state.pageSize, this.state.search,
-                                        this.state.orderBy, this.state.orderAsc, this.state.filterBy);
-
-        this.fetchSelectedPieceEditionList()
-            .forEach((pieceId) => {
-                EditionListActions.refreshEditionList({pieceId, filterBy: {}});
-            });
-        EditionListActions.clearAllEditionSelections();
-    },
-
     render() {
-        let selectedEditions = this.fetchSelectedEditionList();
-        let availableAcls = getAvailableAcls(selectedEditions, (aclName) => aclName !== 'acl_view');
-
-        if(Object.keys(availableAcls).length > 0) {
+        if (Object.keys(this.props.availableAcls).length) {
             return (
                 <div className={this.props.className}>
                     <div className="row no-margin">
@@ -106,7 +39,7 @@ let PieceListBulkModal = React.createClass({
                             <div className="row">
                                 <div className="text-center">
                                     <PieceListBulkModalSelectedEditionsWidget
-                                        numberOfSelectedEditions={this.fetchSelectedEditionList().length} />
+                                        numberOfSelectedEditions={this.props.selectedEditions.length} />
                                         &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                                     <span
                                         className="piece-list-bulk-modal-clear-all"
@@ -115,15 +48,7 @@ let PieceListBulkModal = React.createClass({
                             </div>
                             <p></p>
                             <div className="row-fluid">
-                                <AclButtonList
-                                    availableAcls={availableAcls}
-                                    pieceOrEditions={selectedEditions}
-                                    handleSuccess={this.handleSuccess}
-                                    className="text-center ascribe-button-list collapse-group">
-                                    <DeleteButton
-                                        handleSuccess={this.handleSuccess}
-                                        editions={selectedEditions}/>
-                                </AclButtonList>
+                                {this.props.children}
                             </div>
                         </div>
                     </div>
@@ -132,7 +57,6 @@ let PieceListBulkModal = React.createClass({
         } else {
             return null;
         }
-        
     }
 });
 

js/components/ascribe_piece_list_toolbar/piece_list_toolbar_filter_widget.js

@@ -28,7 +28,7 @@ let PieceListToolbarFilterWidget = React.createClass({
     },
 
     generateFilterByStatement(param) {
-        let filterBy = this.props.filterBy;
+        const filterBy = Object.assign({}, this.props.filterBy);
 
         if(filterBy) {
             // we need hasOwnProperty since the values are all booleans
@@ -56,13 +56,13 @@ let PieceListToolbarFilterWidget = React.createClass({
      */
     filterBy(param) {
         return () => {
-            let filterBy = this.generateFilterByStatement(param);
+            const filterBy = this.generateFilterByStatement(param);
             this.props.applyFilterBy(filterBy);
         };
     },
 
     isFilterActive() {
-        let trueValuesOnly = Object.keys(this.props.filterBy).filter((acl) => acl);
+        const trueValuesOnly = Object.keys(this.props.filterBy).filter((acl) => acl);
 
         // We're hiding the star in that complicated matter so that,
         // the surrounding button is not resized up on appearance
@@ -74,7 +74,7 @@ let PieceListToolbarFilterWidget = React.createClass({
     },
 
     render() {
-        let filterIcon = (
+        const filterIcon = (
             <span>
                 <span className="ascribe-icon icon-ascribe-filter" aria-hidden="true"></span>
                 <span style={this.isFilterActive()}>*</span>
@@ -140,4 +140,4 @@ let PieceListToolbarFilterWidget = React.createClass({
     }
 });
 
-export default PieceListToolbarFilterWidget;
+export default PieceListToolbarFilterWidget;

js/components/ascribe_routes/proxy_routes/auth_proxy_handler.js

@@ -1,7 +1,7 @@
 'use strict';
 
 import React from 'react';
-import { History } from 'react-router';
+import { History, RouteContext } from 'react-router';
 
 import UserStore from '../../../stores/user_store';
 import UserActions from '../../../actions/user_actions';
@@ -37,7 +37,9 @@ export default function AuthProxyHandler({to, when}) {
                 location: object
             },
 
-            mixins: [History],
+            // We need insert `RouteContext` here in order to be able
+            // to use the `Lifecycle` widget in further down nested components
+            mixins: [History, RouteContext],
 
             getInitialState() {
                 return UserStore.getState();

js/components/ascribe_settings/settings_container.js

@@ -11,6 +11,7 @@ import WhitelabelActions from '../../actions/whitelabel_actions';
 import AccountSettings from './account_settings';
 import BitcoinWalletSettings from './bitcoin_wallet_settings';
 import APISettings from './api_settings';
+import WebhookSettings from './webhook_settings';
 
 import AclProxy from '../acl_proxy';
 
@@ -70,6 +71,7 @@ let SettingsContainer = React.createClass({
                         aclName="acl_view_settings_api">
                         <APISettings />
                     </AclProxy>
+                    <WebhookSettings />
                     <AclProxy
                         aclObject={this.state.whitelabel}
                         aclName="acl_view_settings_bitcoin">

js/components/ascribe_settings/webhook_settings.js

@@ -0,0 +1,165 @@
+'use strict';
+
+import React from 'react';
+
+import WebhookStore from '../../stores/webhook_store';
+import WebhookActions from '../../actions/webhook_actions';
+
+import GlobalNotificationModel from '../../models/global_notification_model';
+import GlobalNotificationActions from '../../actions/global_notification_actions';
+
+import Form from '../ascribe_forms/form';
+import Property from '../ascribe_forms/property';
+
+import AclProxy from '../acl_proxy';
+
+import ActionPanel from '../ascribe_panel/action_panel';
+import CollapsibleParagraph from '../ascribe_collapsible/collapsible_paragraph';
+
+import ApiUrls from '../../constants/api_urls';
+import AscribeSpinner from '../ascribe_spinner';
+
+import { getLangText } from '../../utils/lang_utils';
+
+
+let WebhookSettings = React.createClass({
+    propTypes: {
+        defaultExpanded: React.PropTypes.bool
+    },
+
+    getInitialState() {
+        return WebhookStore.getState();
+    },
+
+    componentDidMount() {
+        WebhookStore.listen(this.onChange);
+        WebhookActions.fetchWebhooks();
+        WebhookActions.fetchWebhookEvents();
+    },
+
+    componentWillUnmount() {
+        WebhookStore.unlisten(this.onChange);
+    },
+
+    onChange(state) {
+        this.setState(state);
+    },
+
+    onRemoveWebhook(webhookId) {
+        return (event) => {
+            WebhookActions.removeWebhook(webhookId);
+
+            let notification = new GlobalNotificationModel(getLangText('Webhook deleted'), 'success', 2000);
+            GlobalNotificationActions.appendGlobalNotification(notification);
+        };
+    },
+
+    handleCreateSuccess() {
+        this.refs.webhookCreateForm.reset();
+        WebhookActions.fetchWebhooks(true);
+        let notification = new GlobalNotificationModel(getLangText('Webhook successfully created'), 'success', 5000);
+        GlobalNotificationActions.appendGlobalNotification(notification);
+    },
+
+    getWebhooks(){
+        let content = <AscribeSpinner color='dark-blue' size='lg'/>;
+
+        if (this.state.webhooks) {
+            content = this.state.webhooks.map(function(webhook, i) {
+                const event = webhook.event.split('.')[0];
+                return (
+                    <ActionPanel
+                        name={webhook.event}
+                        key={i}
+                        content={
+                            <div>
+                                <div className='ascribe-panel-title'>
+                                    {event.toUpperCase()}
+                                </div>
+                                <div className="ascribe-panel-subtitle">
+                                    {webhook.target}
+                                </div>
+                            </div>
+                        }
+                        buttons={
+                            <div className="pull-right">
+                                <div className="pull-right">
+                                    <button
+                                        className="pull-right btn btn-tertiary btn-sm"
+                                        onClick={this.onRemoveWebhook(webhook.id)}>
+                                        {getLangText('DELETE')}
+                                    </button>
+                                </div>
+                            </div>
+                        }/>
+                    );
+            }, this);
+        }
+        return content;
+    },
+
+    getEvents() {
+        if (this.state.webhookEvents && this.state.webhookEvents.length) {
+            return (
+                <Property
+                    name='event'
+                    label={getLangText('Select the event to trigger a webhook', '...')}>
+                    <select name="events">
+                        {this.state.webhookEvents.map((event, i) => {
+                            return (
+                                <option
+                                    name={i}
+                                    key={i}
+                                    value={ event + '.webhook' }>
+                                    { event.toUpperCase() }
+                                </option>
+                            );
+                        })}
+                    </select>
+                </Property>);
+        }
+        return null;
+    },
+
+    
+    render() {
+        return (
+            <CollapsibleParagraph
+                title={getLangText('Webhooks')}
+                defaultExpanded={this.props.defaultExpanded}>
+                <div>
+                    <p>
+                        Webhooks allow external services to receive notifications from ascribe.
+                        Currently we support webhook notifications when someone transfers, consigns, loans or shares
+                        (by email) a work to you.
+                    </p>
+                    <p>
+                        To get started, simply choose the prefered action that you want to be notified upon and supply
+                        a target url.
+                    </p>
+                </div>
+                <AclProxy
+                    show={this.state.webhookEvents && this.state.webhookEvents.length}>
+                    <Form
+                        ref="webhookCreateForm"
+                        url={ApiUrls.webhooks}
+                        handleSuccess={this.handleCreateSuccess}>
+                        { this.getEvents() }
+                        <Property
+                            name='target'
+                            label={getLangText('Redirect Url')}>
+                            <input
+                                type="text"
+                                placeholder={getLangText('Enter the url to be triggered')}
+                                required/>
+                        </Property>
+                        <hr />
+                    </Form>
+                </AclProxy>
+                {this.getWebhooks()}
+            </CollapsibleParagraph>
+        );
+    }
+});
+
+export default WebhookSettings;

js/components/ascribe_slides_container/slides_container.js

@@ -1,7 +1,7 @@
 'use strict';
 
 import React from 'react/addons';
-import { History } from 'react-router';
+import { History, Lifecycle } from 'react-router';
 
 import SlidesContainerBreadcrumbs from './slides_container_breadcrumbs';
 
@@ -17,14 +17,16 @@ const SlidesContainer = React.createClass({
             pending: string,
             complete: string
         }),
-        location: object
+        location: object,
+        pageExitWarning: string
     },
 
-    mixins: [History],
+    mixins: [History, Lifecycle],
 
     getInitialState() {
         return {
-            containerWidth: 0
+            containerWidth: 0,
+            pageExitWarning: null
         };
     },
 
@@ -41,6 +43,10 @@ const SlidesContainer = React.createClass({
         window.removeEventListener('resize', this.handleContainerResize);
     },
 
+    routerWillLeave() {
+        return this.props.pageExitWarning;
+    },
+
     handleContainerResize() {
         this.setState({
             // +30 to get rid of the padding of the container which is 15px + 15px left and right

js/components/ascribe_social_share/facebook_share_button.js

@@ -8,7 +8,6 @@ import { InjectInHeadUtils } from '../../utils/inject_utils';
 
 let FacebookShareButton = React.createClass({
     propTypes: {
-        url: React.PropTypes.string,
         type: React.PropTypes.string
     },
 
@@ -28,12 +27,14 @@ let FacebookShareButton = React.createClass({
          * To circumvent this, we always have the sdk parse the entire DOM on the initial load
          * (see FacebookHandler) and then use FB.XFBML.parse() on the mounting component later.
          */
-        if (!InjectInHeadUtils.isPresent('script', AppConstants.facebook.sdkUrl)) {
-            InjectInHeadUtils.inject(AppConstants.facebook.sdkUrl);
-        } else {
-            // Parse() searches the children of the element we give it, not the element itself.
-            FB.XFBML.parse(this.refs.fbShareButton.getDOMNode().parentElement);
-        }
+
+        InjectInHeadUtils
+            .inject(AppConstants.facebook.sdkUrl)
+            .then(() => { FB.XFBML.parse(this.refs.fbShareButton.getDOMNode().parentElement) });
+    },
+
+    shouldComponentUpdate(nextProps) {
+        return this.props.type !== nextProps.type;
     },
 
     render() {
@@ -41,7 +42,6 @@ let FacebookShareButton = React.createClass({
             <span
                 ref="fbShareButton"
                 className="fb-share-button btn btn-ascribe-social"
-                data-href={this.props.url}
                 data-layout={this.props.type}>
             </span>
         );

js/components/ascribe_spinner.js

@@ -7,26 +7,26 @@ let AscribeSpinner = React.createClass({
     propTypes: {
         classNames: React.PropTypes.string,
         size: React.PropTypes.oneOf(['sm', 'md', 'lg']),
-        color: React.PropTypes.oneOf(['blue', 'dark-blue', 'light-blue', 'pink', 'black', 'loop'])
+        color: React.PropTypes.oneOf(['black', 'blue', 'dark-blue', 'light-blue', 'pink', 'white', 'loop'])
     },
 
     getDefaultProps() {
         return {
             inline: false,
-            size: 'md',
-            color: 'loop'
+            size: 'md'
         };
     },
 
     render() {
+        const { classNames: classes, color, size } = this.props;
+
         return (
             <div
-                className={
-                    classNames('spinner-wrapper-' + this.props.size,
-                    'spinner-wrapper-' + this.props.color,
-                    this.props.classNames)}>
-                    <div className={classNames('spinner-circle')}></div>
-                    <div className={classNames('spinner-inner')}>A</div>
+                className={classNames('spinner-wrapper-' + size,
+                                      color ? 'spinner-wrapper-' + color : null,
+                                      classes)}>
+                <div className='spinner-circle' />
+                <div className='spinner-inner'>A</div>
             </div>
         );
     }

js/components/ascribe_uploader/ascribe_file_drag_and_drop/file_drag_and_drop.js

@@ -15,7 +15,6 @@ let FileDragAndDrop = React.createClass({
         className: React.PropTypes.string,
         onDrop: React.PropTypes.func.isRequired,
         onDragOver: React.PropTypes.func,
-        onInactive: React.PropTypes.func,
         filesToUpload: React.PropTypes.array,
         handleDeleteFile: React.PropTypes.func,
         handleCancelFile: React.PropTypes.func,
@@ -60,28 +59,21 @@ let FileDragAndDrop = React.createClass({
     handleDrop(event) {
         event.preventDefault();
         event.stopPropagation();
-        let files;
 
-        if(this.props.dropzoneInactive) {
-            // if there is a handle function for doing stuff
-            // when the dropzone is inactive, then call it
-            if(this.props.onInactive) {
-                this.props.onInactive();
+        if (!this.props.dropzoneInactive) {
+            let files;
+
+            // handle Drag and Drop
+            if(event.dataTransfer && event.dataTransfer.files.length > 0) {
+                files = event.dataTransfer.files;
+            } else if(event.target.files) { // handle input type file
+                files = event.target.files;
             }
-            return;
-        }
 
-        // handle Drag and Drop
-        if(event.dataTransfer && event.dataTransfer.files.length > 0) {
-            files = event.dataTransfer.files;
-        } else if(event.target.files) { // handle input type file
-            files = event.target.files;
+            if(typeof this.props.onDrop === 'function' && files) {
+              this.props.onDrop(files);
+            }
         }
-
-        if(typeof this.props.onDrop === 'function' && files) {
-            this.props.onDrop(files);
-        }
-
     },
 
     handleDeleteFile(fileId) {
@@ -113,31 +105,25 @@ let FileDragAndDrop = React.createClass({
     },
 
     handleOnClick() {
-        let evt;
-        // when multiple is set to false and the user already uploaded a piece,
-        // do not propagate event
-        if(this.props.dropzoneInactive) {
-            // if there is a handle function for doing stuff
-            // when the dropzone is inactive, then call it
-            if(this.props.onInactive) {
-                this.props.onInactive();
+        // do not propagate event if the drop zone's inactive,
+        // for example when multiple is set to false and the user already uploaded a piece
+        if (!this.props.dropzoneInactive) {
+            let evt;
+
+            try {
+                evt = new MouseEvent('click', {
+                    view: window,
+                    bubbles: true,
+                    cancelable: true
+                });
+            } catch(e) {
+                // For browsers that do not support the new MouseEvent syntax
+                evt = document.createEvent('MouseEvents');
+                evt.initMouseEvent('click', true, true, window, 0, 0, 0, 80, 20, false, false, false, false, 0, null);
             }
-            return;
-        }
 
-        try {
-            evt = new MouseEvent('click', {
-                view: window,
-                bubbles: true,
-                cancelable: true
-            });
-        } catch(e) {
-            // For browsers that do not support the new MouseEvent syntax
-            evt = document.createEvent('MouseEvents');
-            evt.initMouseEvent('click', true, true, window, 0, 0, 0, 80, 20, false, false, false, false, 0, null);
+            this.refs.fileSelector.getDOMNode().dispatchEvent(evt);
         }
-
-        this.refs.fileSelector.getDOMNode().dispatchEvent(evt);
     },
 
     render: function () {

js/components/ascribe_uploader/react_s3_fine_uploader.js

@@ -112,7 +112,6 @@ const ReactS3FineUploader = React.createClass({
         areAssetsDownloadable: bool,
         areAssetsEditable: bool,
         defaultErrorMessage: string,
-        onInactive: func,
 
         // We encountered some cases where people had difficulties to upload their
         // works to ascribe due to a slow internet connection.
@@ -940,7 +939,6 @@ const ReactS3FineUploader = React.createClass({
              multiple,
              areAssetsDownloadable,
              areAssetsEditable,
-             onInactive,
              enableLocalHashing,
              fileClassToUpload,
              fileInputElement: FileInputElement,
@@ -950,7 +948,6 @@ const ReactS3FineUploader = React.createClass({
             multiple,
             areAssetsDownloadable,
             areAssetsEditable,
-            onInactive,
             enableLocalHashing,
             uploadMethod,
             fileClassToUpload,

js/components/contract_notification.js

@@ -1,36 +0,0 @@
-'use strict';
-
-import React from 'react';
-
-import NotificationStore from '../stores/notification_store';
-
-import { mergeOptions } from '../utils/general_utils';
-
-let ContractNotification = React.createClass({
-    getInitialState() {
-        return mergeOptions(
-            NotificationStore.getState()
-        );
-    },
-
-    componentDidMount() {
-        NotificationStore.listen(this.onChange);
-    },
-
-    componentWillUnmount() {
-        NotificationStore.unlisten(this.onChange);
-    },
-
-    onChange(state) {
-        this.setState(state);
-    },
-
-    render() {
-
-        return (
-            null
-        );
-    }
-});
-
-export default ContractNotification;

js/components/error_not_found_page.js

@@ -6,6 +6,16 @@ import { getLangText } from '../utils/lang_utils';
 
 
 let ErrorNotFoundPage = React.createClass({
+    propTypes: {
+        message: React.PropTypes.string
+    },
+
+    getDefaultProps() {
+        return {
+            message: getLangText("Oops, the page you are looking for doesn't exist.")
+        };
+    },
+
     render() {
         return (
             <div className="row">
@@ -13,7 +23,7 @@ let ErrorNotFoundPage = React.createClass({
                     <div className="error-wrapper">
                         <h1>404</h1>
                         <p>
-                            {getLangText('Ups, the page you are looking for does not exist.')}
+                            {this.props.message}
                         </p>
                     </div>
                 </div>

js/components/header.js

@@ -1,9 +1,10 @@
 'use strict';
 
 import React from 'react';
-
 import { Link } from 'react-router';
 
+import history from '../history';
+
 import Nav from 'react-bootstrap/lib/Nav';
 import Navbar from 'react-bootstrap/lib/Navbar';
 import CollapsibleNav from 'react-bootstrap/lib/CollapsibleNav';
@@ -58,11 +59,17 @@ let Header = React.createClass({
         UserStore.listen(this.onChange);
         WhitelabelActions.fetchWhitelabel();
         WhitelabelStore.listen(this.onChange);
+
+        // react-bootstrap 0.25.1 has a bug in which it doesn't
+        // close the mobile expanded navigation after a click by itself.
+        // To get rid of this, we set the state of the component ourselves.
+        history.listen(this.onRouteChange);
     },
 
     componentWillUnmount() {
         UserStore.unlisten(this.onChange);
         WhitelabelStore.unlisten(this.onChange);
+        history.unlisten(this.onRouteChange);
     },
 
     getLogo() {
@@ -135,6 +142,13 @@ let Header = React.createClass({
         this.refs.dropdownbutton.setDropdownState(false);
     },
 
+    // On route change, close expanded navbar again since react-bootstrap doesn't close
+    // the collapsibleNav by itself on click. setState() isn't available on a ref so
+    // doing this explicitly is the only way for now.
+    onRouteChange() {
+        this.refs.navbar.state.navExpanded = false;
+    },
+
     render() {
         let account;
         let signup;
@@ -201,8 +215,10 @@ let Header = React.createClass({
                 <Navbar
                     brand={this.getLogo()}
                     toggleNavKey={0}
-                    fixedTop={true}>
-                    <CollapsibleNav eventKey={0}>
+                    fixedTop={true}
+                    ref="navbar">
+                    <CollapsibleNav
+                        eventKey={0}>
                         <Nav navbar left>
                             {this.getPoweredBy()}
                         </Nav>

js/components/piece_list.js

@@ -13,6 +13,9 @@ import AccordionList from './ascribe_accordion_list/accordion_list';
 import AccordionListItemWallet from './ascribe_accordion_list/accordion_list_item_wallet';
 import AccordionListItemTableEditions from './ascribe_accordion_list/accordion_list_item_table_editions';
 
+import AclButtonList from './ascribe_buttons/acl_button_list.js';
+import DeleteButton from './ascribe_buttons/delete_button';
+
 import Pagination from './ascribe_pagination/pagination';
 
 import PieceListFilterDisplay from './piece_list_filter_display';
@@ -22,7 +25,8 @@ import PieceListToolbar from './ascribe_piece_list_toolbar/piece_list_toolbar';
 
 import AscribeSpinner from './ascribe_spinner';
 
-import { mergeOptions } from '../utils/general_utils';
+import { getAvailableAcls } from '../utils/acl_utils';
+import { mergeOptions, isShallowEqual } from '../utils/general_utils';
 import { getLangText } from '../utils/lang_utils';
 import { setDocumentTitle } from '../utils/dom_utils';
 
@@ -30,8 +34,11 @@ import { setDocumentTitle } from '../utils/dom_utils';
 let PieceList = React.createClass({
     propTypes: {
         accordionListItemType: React.PropTypes.func,
+        bulkModalButtonListType: React.PropTypes.func,
+        canLoadPieceList: React.PropTypes.bool,
         redirectTo: React.PropTypes.string,
         customSubmitButton: React.PropTypes.element,
+        customThumbnailPlaceholder: React.PropTypes.func,
         filterParams: React.PropTypes.array,
         orderParams: React.PropTypes.array,
         orderBy: React.PropTypes.string,
@@ -43,6 +50,8 @@ let PieceList = React.createClass({
     getDefaultProps() {
         return {
             accordionListItemType: AccordionListItemWallet,
+            bulkModalButtonListType: AclButtonList,
+            canLoadPieceList: true,
             orderParams: ['artist_name', 'title'],
             filterParams: [{
                 label: getLangText('Show works I can'),
@@ -54,23 +63,53 @@ let PieceList = React.createClass({
             }]
         };
     },
+
     getInitialState() {
-        return mergeOptions(
-            PieceListStore.getState(),
-            EditionListStore.getState()
+        const pieceListStore = PieceListStore.getState();
+        const stores = mergeOptions(
+            pieceListStore,
+            EditionListStore.getState(),
+            {
+                isFilterDirty: false
+            }
         );
+
+        // Use the default filters but use the pieceListStore's settings if they're available
+        stores.filterBy = Object.assign(this.getDefaultFilterBy(), pieceListStore.filterBy);
+
+        return stores;
     },
 
     componentDidMount() {
-        let page = this.props.location.query.page || 1;
-        
         PieceListStore.listen(this.onChange);
         EditionListStore.listen(this.onChange);
 
-        let orderBy = this.props.orderBy ? this.props.orderBy : this.state.orderBy;
-        if (this.state.pieceList.length === 0 || this.state.page !== page){
-            PieceListActions.fetchPieceList(page, this.state.pageSize, this.state.search,
-                                            orderBy, this.state.orderAsc, this.state.filterBy);
+        let page = this.props.location.query.page || 1;
+        if (this.props.canLoadPieceList && (this.state.pieceList.length === 0 || this.state.page !== page)) {
+            this.loadPieceList({ page });
+        }
+    },
+
+    componentWillReceiveProps(nextProps) {
+        let filterBy;
+        let page = this.props.location.query.page || 1;
+
+        // If the user hasn't changed the filter and the new default filter is different
+        // than the current filter, apply the new default filter
+        if (!this.state.isFilterDirty) {
+            const newDefaultFilterBy = this.getDefaultFilterBy(nextProps);
+
+            // Only need to check shallowly since the filterBy shouldn't be nested
+            if (!isShallowEqual(this.state.filterBy, newDefaultFilterBy)) {
+                filterBy = newDefaultFilterBy;
+                page = 1;
+            }
+        }
+
+        // Only load if we are applying a new filter or if it's the first time we can
+        // load the piece list
+        if (nextProps.canLoadPieceList && (filterBy || !this.props.canLoadPieceList)) {
+            this.loadPieceList({ page, filterBy });
         }
     },
 
@@ -90,14 +129,29 @@ let PieceList = React.createClass({
         this.setState(state);
     },
 
+    getDefaultFilterBy(props = this.props) {
+        const { filterParams } = props;
+        const defaultFilterBy = {};
+
+        if (filterParams && typeof filterParams.forEach === 'function') {
+            filterParams.forEach(({ items }) => {
+                items.forEach((item) => {
+                    if (typeof item === 'object' && item.defaultValue) {
+                        defaultFilterBy[item.key] = true;
+                    }
+                });
+            });
+        }
+
+        return defaultFilterBy;
+    },
+
     paginationGoToPage(page) {
         return () => {
             // if the users clicks a pager of the pagination,
             // the site should go to the top
             document.body.scrollTop = document.documentElement.scrollTop = 0;
-            PieceListActions.fetchPieceList(page, this.state.pageSize, this.state.search,
-                                            this.state.orderBy, this.state.orderAsc,
-                                            this.state.filterBy);
+            this.loadPieceList({ page });
         };
     },
 
@@ -116,29 +170,35 @@ let PieceList = React.createClass({
     },
 
     searchFor(searchTerm) {
-         PieceListActions.fetchPieceList(1, this.state.pageSize, searchTerm, this.state.orderBy,
-                                        this.state.orderAsc, this.state.filterBy);
-         this.history.pushState(null, this.props.location.pathname, {page: 1});
+        this.loadPieceList({
+            page: 1,
+            search: searchTerm
+        });
+        this.history.pushState(null, this.props.location.pathname, {page: 1});
     },
 
     applyFilterBy(filterBy){
-        // first we need to apply the filter on the piece list
-        PieceListActions.fetchPieceList(1, this.state.pageSize, this.state.search,
-                                        this.state.orderBy, this.state.orderAsc, filterBy)
-                        .then(() => {
-                            // but also, we need to filter all the open edition lists
-                            this.state.pieceList
-                                .forEach((piece) => {
-                                    // but only if they're actually open
-                                    if(this.state.isEditionListOpenForPieceId[piece.id].show) {
-                                        EditionListActions.refreshEditionList({
-                                            pieceId: piece.id,
-                                            filterBy
-                                        });
-                                    }
+        this.setState({
+            isFilterDirty: true
+        });
 
-                                });
-                        });
+        // first we need to apply the filter on the piece list
+        this
+            .loadPieceList({ page: 1, filterBy })
+            .then(() => {
+                // but also, we need to filter all the open edition lists
+                this.state.pieceList
+                    .forEach((piece) => {
+                        // but only if they're actually open
+                        if(this.state.isEditionListOpenForPieceId[piece.id].show) {
+                            EditionListActions.refreshEditionList({
+                                pieceId: piece.id,
+                                filterBy
+                            });
+                        }
+
+                    });
+            });
 
         // we have to redirect the user always to page one as it could be that there is no page two
         // for filtered pieces
@@ -150,35 +210,97 @@ let PieceList = React.createClass({
                                         orderBy, this.state.orderAsc, this.state.filterBy);
     },
 
+    loadPieceList({ page, filterBy = this.state.filterBy, search = this.state.search }) {
+        const orderBy = this.state.orderBy || this.props.orderBy;
+
+        return PieceListActions.fetchPieceList(page, this.state.pageSize, search,
+                                               orderBy, this.state.orderAsc, filterBy);
+    },
+
+    fetchSelectedPieceEditionList() {
+        let filteredPieceIdList = Object.keys(this.state.editionList)
+                                        .filter((pieceId) => {
+                                            return this.state.editionList[pieceId]
+                                                .filter((edition) => edition.selected).length > 0;
+                                        });
+        return filteredPieceIdList;
+    },
+
+    fetchSelectedEditionList() {
+        let selectedEditionList = [];
+
+        Object
+            .keys(this.state.editionList)
+            .forEach((pieceId) => {
+                let filteredEditionsForPiece = this.state.editionList[pieceId].filter((edition) => edition.selected);
+                selectedEditionList = selectedEditionList.concat(filteredEditionsForPiece);
+            });
+
+        return selectedEditionList;
+    },
+
+    handleAclSuccess() {
+        PieceListActions.fetchPieceList(this.state.page, this.state.pageSize, this.state.search,
+                                        this.state.orderBy, this.state.orderAsc, this.state.filterBy);
+
+        this.fetchSelectedPieceEditionList()
+            .forEach((pieceId) => {
+                EditionListActions.refreshEditionList({pieceId});
+            });
+        EditionListActions.clearAllEditionSelections();
+    },
+
     render() {
-        let loadingElement = <AscribeSpinner color='dark-blue' size='lg'/>;
-        let AccordionListItemType = this.props.accordionListItemType;
+        const {
+            accordionListItemType: AccordionListItemType,
+            bulkModalButtonListType: BulkModalButtonListType,
+            customSubmitButton,
+            customThumbnailPlaceholder,
+            filterParams,
+            orderParams } = this.props;
+
+        const loadingElement = <AscribeSpinner color='dark-blue' size='lg'/>;
+
+        const selectedEditions = this.fetchSelectedEditionList();
+        const availableAcls = getAvailableAcls(selectedEditions, (aclName) => aclName !== 'acl_view');
 
         setDocumentTitle(getLangText('Collection'));
-
         return (
             <div>
                 <PieceListToolbar
                     className="ascribe-piece-list-toolbar"
                     searchFor={this.searchFor}
                     searchQuery={this.state.search}
-                    filterParams={this.props.filterParams}
-                    orderParams={this.props.orderParams}
+                    filterParams={filterParams}
+                    orderParams={orderParams}
                     filterBy={this.state.filterBy}
                     orderBy={this.state.orderBy}
                     applyFilterBy={this.applyFilterBy}
                     applyOrderBy={this.applyOrderBy}>
-                    {this.props.customSubmitButton ?
-                        this.props.customSubmitButton :
+                    {customSubmitButton ?
+                        customSubmitButton :
                         <button className="btn btn-default btn-ascribe-add">
                             <span className="icon-ascribe icon-ascribe-add" />
                         </button>
                     }
                 </PieceListToolbar>
-                <PieceListBulkModal className="ascribe-piece-list-bulk-modal" />
+                <PieceListBulkModal
+                    availableAcls={availableAcls}
+                    selectedEditions={selectedEditions}
+                    className="ascribe-piece-list-bulk-modal">
+                    <BulkModalButtonListType
+                        availableAcls={availableAcls}
+                        pieceOrEditions={selectedEditions}
+                        handleSuccess={this.handleAclSuccess}
+                        className="text-center ascribe-button-list collapse-group">
+                        <DeleteButton
+                            handleSuccess={this.handleAclSuccess}
+                            editions={selectedEditions}/>
+                    </BulkModalButtonListType>
+                </PieceListBulkModal>
                 <PieceListFilterDisplay
                     filterBy={this.state.filterBy}
-                    filterParams={this.props.filterParams}/>
+                    filterParams={filterParams}/>
                 <AccordionList
                     className="ascribe-accordion-list"
                     changeOrder={this.accordionChangeOrder}
@@ -196,6 +318,7 @@ let PieceList = React.createClass({
                             <AccordionListItemType
                                 className="col-xs-12 col-sm-10 col-md-8 col-lg-8 col-sm-offset-1 col-md-offset-2 col-lg-offset-2 ascribe-accordion-list-item"
                                 content={piece}
+                                thumbnailPlaceholder={customThumbnailPlaceholder}
                                 key={i}>
                                     <AccordionListItemTableEditions
                                         className="ascribe-accordion-list-item-table col-xs-12 col-sm-10 col-md-8 col-lg-8 col-sm-offset-1 col-md-offset-2 col-lg-offset-2"

js/components/piece_list_filter_display.js

@@ -97,12 +97,12 @@ let PieceListFilterDisplay = React.createClass({
 
     render() {
         let { filterBy } = this.props;
-        let filtersWithLabel = this.transformFilterParamsItemsToBools();
 
         // do not show the FilterDisplay if there are no filters applied
         if(filterBy && Object.keys(filterBy).length === 0) {
             return null;
         } else {
+            const filtersWithLabel = this.transformFilterParamsItemsToBools();
             return (
                 <div className="row">
                     <div className="ascribe-piece-list-filter-display col-xs-12 col-sm-10 col-md-8 col-lg-8 col-sm-offset-1 col-md-offset-2 col-lg-offset-2">

js/components/register_piece.js

@@ -44,11 +44,8 @@ let RegisterPiece = React.createClass( {
         return mergeOptions(
             UserStore.getState(),
             WhitelabelStore.getState(),
-            PieceListStore.getState(),
-            {
-                selectedLicense: 0,
-                isFineUploaderActive: false
-            });
+            PieceListStore.getState()
+        );
     },
 
     componentDidMount() {
@@ -66,13 +63,6 @@ let RegisterPiece = React.createClass( {
 
     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
-            });
-        }
     },
 
     handleSuccess(response){
@@ -118,7 +108,7 @@ let RegisterPiece = React.createClass( {
                 <Col xs={12} sm={10} md={8} smOffset={1} mdOffset={2}>
                     <RegisterPieceForm
                         {...this.props}
-                        isFineUploaderActive={this.state.isFineUploaderActive}
+                        isFineUploaderActive={true}
                         handleSuccess={this.handleSuccess}
                         location={this.props.location}>
                         {this.props.children}

js/components/whitelabel/prize/simple_prize/components/ascribe_detail/prize_piece_container.js

@@ -292,8 +292,8 @@ let PrizePieceRatings = React.createClass({
                         url={ApiUrls.ownership_loans_pieces_request}
                         email={this.props.currentUser.email}
                         gallery={this.props.piece.prize.name}
-                        startdate={today}
-                        enddate={endDate}
+                        startDate={today}
+                        endDate={endDate}
                         showPersonalMessage={true}
                         showPassword={false}
                         handleSuccess={this.handleLoanSuccess} />

js/components/whitelabel/wallet/components/23vivi/23vivi_accordion_list/23vivi_accordion_list_item_thumbnail_placeholder.js

@@ -0,0 +1,15 @@
+'use strict'
+
+import React from 'react';
+
+let Vivi23AccordionListItemThumbnailPlaceholder = React.createClass({
+    render() {
+        return (
+            <span className="ascribe-thumbnail-placeholder">
+                23
+            </span>
+        );
+    }
+});
+
+export default Vivi23AccordionListItemThumbnailPlaceholder;

js/components/whitelabel/wallet/components/23vivi/23vivi_landing.js

@@ -0,0 +1,78 @@
+'use strict';
+
+import React from 'react';
+
+import Button from 'react-bootstrap/lib/Button';
+import LinkContainer from 'react-router-bootstrap/lib/LinkContainer';
+
+import WhitelabelActions from '../../../../../actions/whitelabel_actions';
+import WhitelabelStore from '../../../../../stores/whitelabel_store';
+
+import { mergeOptions } from '../../../../../utils/general_utils';
+import { getLangText } from '../../../../../utils/lang_utils';
+import { setDocumentTitle } from '../../../../../utils/dom_utils';
+
+let Vivi23Landing = React.createClass({
+    getInitialState() {
+        return WhitelabelStore.getState();
+    },
+
+    componentWillMount() {
+        setDocumentTitle('23vivi Marketplace');
+    },
+
+    componentDidMount() {
+        WhitelabelStore.listen(this.onChange);
+        WhitelabelActions.fetchWhitelabel();
+    },
+
+    componentWillUnmount() {
+        WhitelabelStore.unlisten(this.onChange);
+    },
+
+    onChange(state) {
+        this.setState(state);
+    },
+
+    render() {
+        return (
+            <div className="container ascribe-form-wrapper vivi23-landing">
+                <div className="row">
+                    <div className="col-xs-12">
+                        <div className="row vivi23-landing--header">
+                            <img className="vivi23-landing--header-logo" src={this.state.whitelabel.logo} />
+                            <div>
+                                {getLangText('Artwork from the 23vivi Marketplace is powered by') + ' '}
+                                <span className="icon-ascribe-logo" />
+                            </div>
+                        </div>
+                        <div className="row vivi23-landing--content">
+                            <div className="col-sm-6">
+                                <p>
+                                    {getLangText('Existing ascribe user?')}
+                                </p>
+                                <LinkContainer to="/login">
+                                    <Button>
+                                        {getLangText('Log in')}
+                                    </Button>
+                                </LinkContainer>
+                            </div>
+                            <div className="col-sm-6">
+                                <p>
+                                    {getLangText('Do you need an account?')}
+                                </p>
+                                <LinkContainer to="/signup">
+                                    <Button>
+                                        {getLangText('Sign up')}
+                                    </Button>
+                                </LinkContainer>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        );
+    }
+});
+
+export default Vivi23Landing;

js/components/whitelabel/wallet/components/23vivi/23vivi_piece_list.js

@@ -0,0 +1,24 @@
+'use strict'
+
+import React from 'react';
+
+import Vivi23AccordionListItemThumbnailPlaceholder from './23vivi_accordion_list/23vivi_accordion_list_item_thumbnail_placeholder';
+
+import MarketPieceList from '../market/market_piece_list';
+
+let Vivi23PieceList = React.createClass({
+    propTypes: {
+        location: React.PropTypes.object
+    },
+
+    render() {
+        return (
+            <MarketPieceList
+                customThumbnailPlaceholder={Vivi23AccordionListItemThumbnailPlaceholder}
+                location={this.props.location} />
+        );
+    }
+
+});
+
+export default Vivi23PieceList;

js/components/whitelabel/wallet/components/cyland/cyland_forms/cyland_additional_data_form.js

@@ -116,7 +116,7 @@ let CylandAdditionalDataForm = React.createClass({
                     <Property
                         name='artist_bio'
                         label={getLangText('Artist Biography')}
-                        expanded={!disabled && piece.extra_data.artist_bio}>
+                        expanded={!disabled || !!piece.extra_data.artist_bio}>
                         <InputTextAreaToggable
                             rows={1}
                             defaultValue={piece.extra_data.artist_bio}
@@ -125,7 +125,7 @@ let CylandAdditionalDataForm = React.createClass({
                     <Property
                         name='artist_contact_information'
                         label={getLangText('Artist Contact Information')}
-                        expanded={!disabled && piece.extra_data.artist_contact_information}>
+                        expanded={!disabled || !!piece.extra_data.artist_contact_information}>
                         <InputTextAreaToggable
                             rows={1}
                             defaultValue={piece.extra_data.artist_contact_information}
@@ -134,7 +134,7 @@ let CylandAdditionalDataForm = React.createClass({
                     <Property
                         name='conceptual_overview'
                         label={getLangText('Conceptual Overview')}
-                        expanded={!disabled && piece.extra_data.conceptual_overview}>
+                        expanded={!disabled || !!piece.extra_data.conceptual_overview}>
                         <InputTextAreaToggable
                             rows={1}
                             defaultValue={piece.extra_data.conceptual_overview}
@@ -143,7 +143,7 @@ let CylandAdditionalDataForm = React.createClass({
                     <Property
                         name='medium'
                         label={getLangText('Medium (technical specifications)')}
-                        expanded={!disabled && piece.extra_data.medium}>
+                        expanded={!disabled || !!piece.extra_data.medium}>
                         <InputTextAreaToggable
                             rows={1}
                             defaultValue={piece.extra_data.medium}
@@ -152,7 +152,7 @@ let CylandAdditionalDataForm = React.createClass({
                     <Property
                         name='size_duration'
                         label={getLangText('Size / Duration')}
-                        expanded={!disabled && piece.extra_data.size_duration}>
+                        expanded={!disabled || !!piece.extra_data.size_duration}>
                         <InputTextAreaToggable
                             rows={1}
                             defaultValue={piece.extra_data.size_duration}
@@ -161,7 +161,7 @@ let CylandAdditionalDataForm = React.createClass({
                     <Property
                         name='display_instructions'
                         label={getLangText('Display instructions')}
-                        expanded={!disabled && piece.extra_data.display_instructions}>
+                        expanded={!disabled || !!piece.extra_data.display_instructions}>
                         <InputTextAreaToggable
                             rows={1}
                             defaultValue={piece.extra_data.display_instructions}
@@ -170,7 +170,7 @@ let CylandAdditionalDataForm = React.createClass({
                     <Property
                         name='additional_details'
                         label={getLangText('Additional details')}
-                        expanded={!disabled && piece.extra_data.additional_details}>
+                        expanded={!disabled || !!piece.extra_data.additional_details}>
                         <InputTextAreaToggable
                             rows={1}
                             defaultValue={piece.extra_data.additional_details}
@@ -178,7 +178,7 @@ let CylandAdditionalDataForm = React.createClass({
                     </Property>
                     <FurtherDetailsFileuploader
                         label={getLangText('Additional files (e.g. still images, pdf)')}
-                        submitFile={this.submitFile}
+                        submitFile={function () {}}
                         setIsUploadReady={this.setIsUploadReady}
                         isReadyForFormSubmission={formSubmissionValidation.fileOptional}
                         pieceId={piece.id}

js/components/whitelabel/wallet/components/cyland/cyland_landing.js

@@ -57,9 +57,9 @@ let CylandLanding = React.createClass({
         setDocumentTitle('CYLAND MediaArtLab');
 
         return (
-            <div className="container ascribe-form-wrapper">
+            <div className="container ascribe-form-wrapper cyland-landing">
                 <div className="row">
-                    <div className="col-xs-12 wp-landing-wrapper">
+                    <div className="col-xs-12">
                         <div className="row" style={{border: '1px solid #CCC', padding: '2em'}}>
                             <img src={this.state.whitelabel.logo} width="400px"/>
                             <div style={{marginTop: '1em'}}>

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

@@ -53,8 +53,6 @@ let CylandRegisterPiece = React.createClass({
             PieceStore.getState(),
             WhitelabelStore.getState(),
             {
-                selectedLicense: 0,
-                isFineUploaderActive: false,
                 step: 0
             });
     },
@@ -90,13 +88,6 @@ let CylandRegisterPiece = React.createClass({
 
     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){
@@ -167,11 +158,6 @@ let CylandRegisterPiece = React.createClass({
         }
     },
 
-    // basically redirects to the second slide (index: 1), when the user is not logged in
-    onLoggedOut() {
-        this.history.pushState(null, '/login');
-    },
-
     render() {
 
         let today = new Moment();
@@ -197,9 +183,8 @@ let CylandRegisterPiece = React.createClass({
                                 enableLocalHashing={false}
                                 headerMessage={getLangText('Submit to Cyland Archive')}
                                 submitMessage={getLangText('Submit')}
-                                isFineUploaderActive={this.state.isFineUploaderActive}
+                                isFineUploaderActive={true}
                                 handleSuccess={this.handleRegisterSuccess}
-                                onLoggedOut={this.onLoggedOut}
                                 location={this.props.location}/>
                         </Col>
                     </Row>
@@ -229,8 +214,8 @@ let CylandRegisterPiece = React.createClass({
                                 url={ApiUrls.ownership_loans_pieces}
                                 email={this.state.whitelabel.user}
                                 gallery="Cyland Archive"
-                                startdate={today}
-                                enddate={datetimeWhenWeAllWillBeFlyingCoolHoverboardsAndDinosaursWillLiveAgain}
+                                startDate={today}
+                                endDate={datetimeWhenWeAllWillBeFlyingCoolHoverboardsAndDinosaursWillLiveAgain}
                                 showStartDate={false}
                                 showEndDate={false}
                                 showPersonalMessage={false}

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

@@ -104,7 +104,7 @@ let IkonotvArtistDetailsForm = React.createClass({
                     <Property
                         name='artist_website'
                         label={getLangText('Artist Website')}
-                        expanded={!this.props.disabled && this.props.piece.extra_data.artist_website}>
+                        expanded={!this.props.disabled || !!this.props.piece.extra_data.artist_website}>
                         <InputTextAreaToggable
                             rows={1}
                             defaultValue={this.props.piece.extra_data.artist_website}
@@ -113,7 +113,7 @@ let IkonotvArtistDetailsForm = React.createClass({
                     <Property
                         name='gallery_website'
                         label={getLangText('Website of related Gallery, Museum, etc.')}
-                        expanded={!this.props.disabled && this.props.piece.extra_data.gallery_website}>
+                        expanded={!this.props.disabled || !!this.props.piece.extra_data.gallery_website}>
                         <InputTextAreaToggable
                             rows={1}
                             defaultValue={this.props.piece.extra_data.gallery_website}
@@ -122,7 +122,7 @@ let IkonotvArtistDetailsForm = React.createClass({
                     <Property
                         name='additional_websites'
                         label={getLangText('Additional Websites/Publications/Museums/Galleries')}
-                        expanded={!this.props.disabled && this.props.piece.extra_data.additional_websites}>
+                        expanded={!this.props.disabled || !!this.props.piece.extra_data.additional_websites}>
                         <InputTextAreaToggable
                             rows={1}
                             defaultValue={this.props.piece.extra_data.additional_websites}
@@ -131,7 +131,7 @@ let IkonotvArtistDetailsForm = React.createClass({
                     <Property
                         name='conceptual_overview'
                         label={getLangText('Short text about the Artist')}
-                        expanded={!this.props.disabled && this.props.piece.extra_data.conceptual_overview}>
+                        expanded={!this.props.disabled || !!this.props.piece.extra_data.conceptual_overview}>
                         <InputTextAreaToggable
                             rows={1}
                             defaultValue={this.props.piece.extra_data.conceptual_overview}

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

@@ -103,7 +103,7 @@ let IkonotvArtworkDetailsForm = React.createClass({
                     <Property
                         name='medium'
                         label={getLangText('Medium')}
-                        expanded={!this.props.disabled && this.props.piece.extra_data.medium}>
+                        expanded={!this.props.disabled || !!this.props.piece.extra_data.medium}>
                         <InputTextAreaToggable
                             rows={1}
                             defaultValue={this.props.piece.extra_data.medium}
@@ -112,7 +112,7 @@ let IkonotvArtworkDetailsForm = React.createClass({
                     <Property
                         name='size_duration'
                         label={getLangText('Size/Duration')}
-                        expanded={!this.props.disabled && this.props.piece.extra_data.size_duration}>
+                        expanded={!this.props.disabled || !!this.props.piece.extra_data.size_duration}>
                         <InputTextAreaToggable
                             rows={1}
                             defaultValue={this.props.piece.extra_data.size_duration}
@@ -121,7 +121,7 @@ let IkonotvArtworkDetailsForm = React.createClass({
                     <Property
                         name='copyright'
                         label={getLangText('Copyright')}
-                        expanded={!this.props.disabled && this.props.piece.extra_data.copyright}>
+                        expanded={!this.props.disabled || !!this.props.piece.extra_data.copyright}>
                         <InputTextAreaToggable
                             rows={1}
                             defaultValue={this.props.piece.extra_data.copyright}
@@ -130,7 +130,7 @@ let IkonotvArtworkDetailsForm = React.createClass({
                     <Property
                         name='courtesy_of'
                         label={getLangText('Courtesy of')}
-                        expanded={!this.props.disabled && this.props.piece.extra_data.courtesy_of}>
+                        expanded={!this.props.disabled || !!this.props.piece.extra_data.courtesy_of}>
                         <InputTextAreaToggable
                             rows={1}
                             defaultValue={this.props.piece.extra_data.courtesy_of}
@@ -139,7 +139,7 @@ let IkonotvArtworkDetailsForm = React.createClass({
                     <Property
                         name='copyright_of_photography'
                         label={getLangText('Copyright of Photography')}
-                        expanded={!this.props.disabled && this.props.piece.extra_data.copyright_of_photography}>
+                        expanded={!this.props.disabled || !!this.props.piece.extra_data.copyright_of_photography}>
                         <InputTextAreaToggable
                             rows={1}
                             defaultValue={this.props.piece.extra_data.copyright_of_photography}
@@ -148,7 +148,7 @@ let IkonotvArtworkDetailsForm = React.createClass({
                     <Property
                         name='additional_details'
                         label={getLangText('Additional Details about the artwork')}
-                        expanded={!this.props.disabled && this.props.piece.extra_data.additional_details}>
+                        expanded={!this.props.disabled || !!this.props.piece.extra_data.additional_details}>
                         <InputTextAreaToggable
                             rows={1}
                             defaultValue={this.props.piece.extra_data.additional_details}

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

@@ -16,6 +16,9 @@ import UserActions from '../../../../../actions/user_actions';
 import PieceStore from '../../../../../stores/piece_store';
 import PieceActions from '../../../../../actions/piece_actions';
 
+import WhitelabelActions from '../../../../../actions/whitelabel_actions';
+import WhitelabelStore from '../../../../../stores/whitelabel_store';
+
 import GlobalNotificationModel from '../../../../../models/global_notification_model';
 import GlobalNotificationActions from '../../../../../actions/global_notification_actions';
 
@@ -32,6 +35,7 @@ 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,
@@ -46,8 +50,10 @@ let IkonotvRegisterPiece = React.createClass({
             UserStore.getState(),
             PieceListStore.getState(),
             PieceStore.getState(),
+            WhitelabelStore.getState(),
             {
-                step: 0
+                step: 0,
+                pageExitWarning: getLangText("If you leave this form now, your work will not be loaned to Ikono TV.")
             });
     },
 
@@ -55,7 +61,9 @@ let IkonotvRegisterPiece = React.createClass({
         PieceListStore.listen(this.onChange);
         UserStore.listen(this.onChange);
         PieceStore.listen(this.onChange);
+        WhitelabelStore.listen(this.onChange);
         UserActions.fetchCurrentUser();
+        WhitelabelActions.fetchWhitelabel();
 
         // Before we load the new piece, we reset the piece store to delete old data that we do
         // not want to display to the user.
@@ -79,22 +87,15 @@ let IkonotvRegisterPiece = React.createClass({
         PieceListStore.unlisten(this.onChange);
         UserStore.unlisten(this.onChange);
         PieceStore.unlisten(this.onChange);
+        WhitelabelStore.listen(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
@@ -108,7 +109,6 @@ let IkonotvRegisterPiece = React.createClass({
             this.incrementStep();
             this.refs.slidesContainer.nextSlide();
         }
-
     },
 
     handleAdditionalDataSuccess() {
@@ -126,6 +126,8 @@ let IkonotvRegisterPiece = React.createClass({
     },
 
     handleLoanSuccess(response) {
+        this.setState({ pageExitWarning: null });
+
         let notification = new GlobalNotificationModel(response.notification, 'success', 10000);
         GlobalNotificationActions.appendGlobalNotification(notification);
 
@@ -155,22 +157,10 @@ let IkonotvRegisterPiece = React.createClass({
         );
     },
 
-    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.history.pushState(null, '/login');
-    },
-
     canSubmit() {
         let currentUser = this.state.currentUser;
-        return currentUser && currentUser.acl && currentUser.acl.acl_wallet_submit;
+        let whitelabel = this.state.whitelabel;
+        return currentUser && currentUser.acl && currentUser.acl.acl_wallet_submit && whitelabel && whitelabel.user;
     },
 
     getSlideArtistDetails() {
@@ -209,20 +199,22 @@ let IkonotvRegisterPiece = React.createClass({
 
     getSlideLoan() {
         if (this.canSubmit()) {
+            const { piece, whitelabel } = this.state;
             let today = new Moment();
-            let enddate = new Moment();
-            enddate.add(2, 'years');
+            let endDate = new Moment();
+            endDate.add(2, '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}}
+                                id={{piece_id: piece.id}}
                                 url={ApiUrls.ownership_loans_pieces}
-                                email="submissions@ikono.org"
-                                startdate={today}
-                                enddate={enddate}
+                                email={whitelabel.user}
+                                startDate={today}
+                                endDate={endDate}
                                 showStartDate={false}
                                 showEndDate={false}
                                 gallery="IkonoTV archive"
@@ -238,6 +230,8 @@ let IkonotvRegisterPiece = React.createClass({
     },
 
     render() {
+        const { pageExitWarning } = this.state;
+
         return (
             <SlidesContainer
                 ref="slidesContainer"
@@ -246,7 +240,8 @@ let IkonotvRegisterPiece = React.createClass({
                     pending: 'glyphicon glyphicon-chevron-right',
                     completed: 'glyphicon glyphicon-lock'
                 }}
-                location={this.props.location}>
+                location={this.props.location}
+                pageExitWarning={pageExitWarning}>
                 <div data-slide-title={getLangText('Register work')}>
                     <Row className="no-margin">
                         <Col xs={12} sm={10} md={8} smOffset={1} mdOffset={2}>
@@ -255,9 +250,8 @@ let IkonotvRegisterPiece = React.createClass({
                                 enableLocalHashing={false}
                                 headerMessage={getLangText('Register work')}
                                 submitMessage={getLangText('Register')}
-                                isFineUploaderActive={this.state.isFineUploaderActive}
+                                isFineUploaderActive={true}
                                 handleSuccess={this.handleRegisterSuccess}
-                                onLoggedOut={this.onLoggedOut}
                                 location={this.props.location}/>
                         </Col>
                     </Row>

js/components/whitelabel/wallet/components/lumenus/lumenus_landing.js

@@ -0,0 +1,84 @@
+'use strict';
+
+import React from 'react';
+
+import Button from 'react-bootstrap/lib/Button';
+import LinkContainer from 'react-router-bootstrap/lib/LinkContainer';
+
+import WhitelabelActions from '../../../../../actions/whitelabel_actions';
+import WhitelabelStore from '../../../../../stores/whitelabel_store';
+
+import { mergeOptions } from '../../../../../utils/general_utils';
+import { getLangText } from '../../../../../utils/lang_utils';
+import { setDocumentTitle } from '../../../../../utils/dom_utils';
+
+
+let LumenusLanding = React.createClass({
+
+    getInitialState() {
+        return mergeOptions(
+            WhitelabelStore.getState()
+        );
+    },
+
+    componentWillMount() {
+        setDocumentTitle('Lumenus Marketplace');
+    },
+
+    componentDidMount() {
+        WhitelabelStore.listen(this.onChange);
+        WhitelabelActions.fetchWhitelabel();
+    },
+
+    componentWillUnmount() {
+        WhitelabelStore.unlisten(this.onChange);
+    },
+
+    onChange(state) {
+        this.setState(state);
+    },
+
+    render() {
+        return (
+            <div className="container ascribe-form-wrapper">
+                <div className="row">
+                    <div className="col-xs-12 wp-landing-wrapper">
+                        <div className="row" style={{border: '1px solid #CCC', padding: '2em'}}>
+                            <img src={this.state.whitelabel.logo} width="150px"/>
+                            <div style={{marginTop: '1em'}}>
+                                {getLangText('Artwork from the Lumenus Marketplace is powered by') + ' '}
+                                <span>
+                                    <span className="icon-ascribe-logo"></span>
+                                </span>
+                            </div>
+                        </div>
+                        <div className="row" style={{border: '1px solid #CCC', borderTop: 'none', padding: '2em'}}>
+                            <div className="col-sm-6">
+                                <p>
+                                    {getLangText('Existing ascribe user?')}
+                                </p>
+                                <LinkContainer to="/login">
+                                    <Button>
+                                        {getLangText('Log in')}
+                                    </Button>
+                                </LinkContainer>
+                            </div>
+                            <div className="col-sm-6">
+                                <p>
+                                    {getLangText('Do you need an account?')}
+                                </p>
+                                <LinkContainer to="/signup">
+                                    <Button>
+                                        {getLangText('Sign up')}
+                                    </Button>
+                                </LinkContainer>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        );
+    }
+});
+
+export default LumenusLanding;

js/components/whitelabel/wallet/components/market/market_buttons/market_acl_button_list.js

@@ -0,0 +1,74 @@
+'use strict';
+
+import React from 'react';
+
+import MarketSubmitButton from './market_submit_button';
+
+import DeleteButton from '../../../../../ascribe_buttons/delete_button';
+import EmailButton from '../../../../../ascribe_buttons/acls/email_button';
+import TransferButton from '../../../../../ascribe_buttons/acls/transfer_button';
+import UnconsignButton from '../../../../../ascribe_buttons/acls/unconsign_button';
+
+import UserActions from '../../../../../../actions/user_actions';
+import UserStore from '../../../../../../stores/user_store';
+
+let MarketAclButtonList = React.createClass({
+    propTypes: {
+        availableAcls: React.PropTypes.object.isRequired,
+        className: React.PropTypes.string,
+        pieceOrEditions: React.PropTypes.array,
+        handleSuccess: React.PropTypes.func,
+        children: React.PropTypes.oneOfType([
+            React.PropTypes.arrayOf(React.PropTypes.element),
+            React.PropTypes.element
+        ])
+    },
+
+    getInitialState() {
+        return UserStore.getState();
+    },
+
+    componentDidMount() {
+        UserStore.listen(this.onChange);
+        UserActions.fetchCurrentUser();
+    },
+
+    componentWillUnmount() {
+        UserStore.unlisten(this.onChange);
+    },
+
+    onChange(state) {
+        this.setState(state);
+    },
+
+    render() {
+        let { availableAcls, className, pieceOrEditions, handleSuccess } = this.props;
+        return (
+            <div className={className}>
+                <MarketSubmitButton
+                    availableAcls={availableAcls}
+                    currentUser={this.state.currentUser}
+                    editions={pieceOrEditions}
+                    handleSuccess={handleSuccess} />
+                <EmailButton
+                    availableAcls={availableAcls}
+                    currentUser={this.state.currentUser}
+                    pieceOrEditions={pieceOrEditions}
+                    handleSuccess={handleSuccess} />
+                <TransferButton
+                    availableAcls={availableAcls}
+                    currentUser={this.state.currentUser}
+                    pieceOrEditions={pieceOrEditions}
+                    handleSuccess={handleSuccess} />
+                <UnconsignButton
+                    availableAcls={availableAcls}
+                    currentUser={this.state.currentUser}
+                    pieceOrEditions={pieceOrEditions}
+                    handleSuccess={handleSuccess} />
+                {this.props.children}
+            </div>
+        );
+    }
+});
+
+export default MarketAclButtonList;

js/components/whitelabel/wallet/components/market/market_buttons/market_submit_button.js

@@ -0,0 +1,160 @@
+'use strict';
+
+import React from 'react';
+import classNames from 'classnames';
+
+import MarketAdditionalDataForm from '../market_forms/market_additional_data_form';
+
+import AclFormFactory from '../../../../../ascribe_forms/acl_form_factory';
+import ConsignForm from '../../../../../ascribe_forms/form_consign';
+
+import ModalWrapper from '../../../../../ascribe_modal/modal_wrapper';
+
+import AclProxy from '../../../../../acl_proxy';
+
+import PieceActions from '../../../../../../actions/piece_actions';
+import WhitelabelActions from '../../../../../../actions/whitelabel_actions';
+import WhitelabelStore from '../../../../../../stores/whitelabel_store';
+
+import ApiUrls from '../../../../../../constants/api_urls';
+
+import { getAclFormMessage, getAclFormDataId } from '../../../../../../utils/form_utils';
+import { getLangText } from '../../../../../../utils/lang_utils';
+
+let MarketSubmitButton = React.createClass({
+    propTypes: {
+        availableAcls: React.PropTypes.object.isRequired,
+        currentUser: React.PropTypes.object,
+        editions: React.PropTypes.array.isRequired,
+        handleSuccess: React.PropTypes.func.isRequired,
+        className: React.PropTypes.string,
+    },
+
+    getInitialState() {
+        return WhitelabelStore.getState();
+    },
+
+    componentDidMount() {
+        WhitelabelStore.listen(this.onChange);
+
+        WhitelabelActions.fetchWhitelabel();
+    },
+
+    componentWillUnmount() {
+        WhitelabelStore.unlisten(this.onChange);
+    },
+
+    onChange(state) {
+        this.setState(state);
+    },
+
+    canEditionBeSubmitted(edition) {
+        if (edition && edition.extra_data && edition.other_data) {
+            const { extra_data, other_data } = edition;
+
+            if (extra_data.artist_bio && extra_data.work_description &&
+                extra_data.technology_details && extra_data.display_instructions &&
+                other_data.length > 0) {
+                return true;
+            }
+        }
+
+        return false;
+    },
+
+    getFormDataId() {
+        return getAclFormDataId(false, this.props.editions);
+    },
+
+    getAggregateEditionDetails() {
+        const { editions } = this.props;
+
+        // Currently, we only care if all the given editions are from the same parent piece
+        // and if they can be submitted
+        return editions.reduce((details, curEdition) => {
+            return {
+                solePieceId: details.solePieceId === curEdition.parent ? details.solePieceId : null,
+                canSubmit: details.canSubmit && this.canEditionBeSubmitted(curEdition)
+            };
+        }, {
+            solePieceId: editions.length > 0 ? editions[0].parent : null,
+            canSubmit: this.canEditionBeSubmitted(editions[0])
+        });
+    },
+
+    handleAdditionalDataSuccess(pieceId) {
+        // Fetch newly updated piece to update the views
+        PieceActions.fetchOne(pieceId);
+
+        this.refs.consignModal.show();
+    },
+
+    render() {
+        const { availableAcls, currentUser, className, editions, handleSuccess } = this.props;
+        const { whitelabel: { name: whitelabelName = 'Market', user: whitelabelAdminEmail } } = this.state;
+        const { solePieceId, canSubmit } = this.getAggregateEditionDetails();
+        const message = getAclFormMessage({
+            aclName: 'acl_consign',
+            entities: editions,
+            isPiece: false,
+            additionalMessage: getLangText('Suggested price:'),
+            senderName: currentUser.username
+        });
+
+        const triggerButton = (
+            <button className={classNames('btn', 'btn-default', 'btn-sm', className)}>
+                {getLangText('CONSIGN TO %s', whitelabelName.toUpperCase())}
+            </button>
+        );
+        const consignForm = (
+            <AclFormFactory
+                action='acl_consign'
+                autoFocusProperty='message'
+                email={whitelabelAdminEmail}
+                message={message}
+                labels={{
+                    'message': getLangText('Message (also suggest a sales price if necessary)')
+                }}
+                pieceOrEditions={editions}
+                showNotification />
+        );
+
+        if (solePieceId && !canSubmit) {
+            return (
+                <AclProxy
+                    aclObject={availableAcls}
+                    aclName='acl_consign'>
+                    <ModalWrapper
+                        trigger={triggerButton}
+                        handleSuccess={this.handleAdditionalDataSuccess.bind(this, solePieceId)}
+                        title={getLangText('Add additional information')}>
+                        <MarketAdditionalDataForm
+                            pieceId={solePieceId}
+                            submitLabel={getLangText('Continue to consignment')} />
+                    </ModalWrapper>
+
+                    <ModalWrapper
+                        ref="consignModal"
+                        handleSuccess={handleSuccess}
+                        title={getLangText('Consign artwork')}>
+                        {consignForm}
+                    </ModalWrapper>
+                </AclProxy>
+            );
+        } else {
+            return (
+                <AclProxy
+                    show={availableAcls.acl_consign && canSubmit}>
+                    <ModalWrapper
+                        trigger={triggerButton}
+                        handleSuccess={handleSuccess}
+                        title={getLangText('Consign artwork to %s', whitelabelName)}>
+                        {consignForm}
+                    </ModalWrapper>
+                </AclProxy>
+            );
+        }
+    }
+});
+
+export default MarketSubmitButton;

js/components/whitelabel/wallet/components/market/market_detail/market_edition_container.js

@@ -0,0 +1,24 @@
+'use strict';
+
+import React from 'react';
+
+import MarketFurtherDetails from './market_further_details';
+
+import MarketAclButtonList from '../market_buttons/market_acl_button_list';
+
+import EditionContainer from '../../../../../ascribe_detail/edition_container';
+
+let MarketEditionContainer = React.createClass({
+    propTypes: EditionContainer.propTypes,
+
+    render() {
+        return (
+            <EditionContainer
+                {...this.props}
+                actionPanelButtonListType={MarketAclButtonList}
+                furtherDetailsType={MarketFurtherDetails} />
+        );
+    }
+});
+
+export default MarketEditionContainer;

js/components/whitelabel/wallet/components/market/market_detail/market_further_details.js

@@ -0,0 +1,23 @@
+'use strict';
+
+import React from 'react';
+
+import MarketAdditionalDataForm from '../market_forms/market_additional_data_form'
+
+let MarketFurtherDetails = React.createClass({
+    propTypes: {
+        pieceId: React.PropTypes.number,
+        handleSuccess: React.PropTypes.func,
+    },
+
+    render() {
+        return (
+            <MarketAdditionalDataForm
+                {...this.props}
+                isInline
+                showNotification />
+        );
+    }
+});
+
+export default MarketFurtherDetails;

js/components/whitelabel/wallet/components/market/market_detail/market_piece_container.js

@@ -0,0 +1,21 @@
+'use strict';
+
+import React from 'react';
+
+import MarketFurtherDetails from './market_further_details';
+
+import PieceContainer from '../../../../../ascribe_detail/piece_container';
+
+let MarketPieceContainer = React.createClass({
+    propTypes: PieceContainer.propTypes,
+
+    render() {
+        return (
+            <PieceContainer
+                {...this.props}
+                furtherDetailsType={MarketFurtherDetails} />
+        );
+    }
+});
+
+export default MarketPieceContainer;

js/components/whitelabel/wallet/components/market/market_forms/market_additional_data_form.js

@@ -0,0 +1,242 @@
+'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 AscribeSpinner from '../../../../../ascribe_spinner';
+
+import GlobalNotificationModel from '../../../../../../models/global_notification_model';
+import GlobalNotificationActions from '../../../../../../actions/global_notification_actions';
+
+import { formSubmissionValidation } from '../../../../../ascribe_uploader/react_s3_fine_uploader_utils';
+
+import PieceActions from '../../../../../../actions/piece_actions';
+import PieceStore from '../../../../../../stores/piece_store';
+
+import ApiUrls from '../../../../../../constants/api_urls';
+import AppConstants from '../../../../../../constants/application_constants';
+
+import requests from '../../../../../../utils/requests';
+import { mergeOptions } from '../../../../../../utils/general_utils';
+import { getLangText } from '../../../../../../utils/lang_utils';
+
+
+let MarketAdditionalDataForm = React.createClass({
+    propTypes: {
+        pieceId: React.PropTypes.oneOfType([
+            React.PropTypes.number,
+            React.PropTypes.string
+        ]),
+        editable: React.PropTypes.bool,
+        isInline: React.PropTypes.bool,
+        showHeading: React.PropTypes.bool,
+        showNotification: React.PropTypes.bool,
+        submitLabel: React.PropTypes.string,
+        handleSuccess: React.PropTypes.func
+    },
+
+    getDefaultProps() {
+        return {
+            editable: true,
+            submitLabel: getLangText('Register work')
+        };
+    },
+
+    getInitialState() {
+        const pieceStore = PieceStore.getState();
+
+        return mergeOptions(
+            pieceStore,
+            {
+                // Allow the form to be submitted if there's already an additional image uploaded
+                isUploadReady: this.isUploadReadyOnChange(pieceStore.piece),
+                forceUpdateKey: 0
+            });
+    },
+
+    componentDidMount() {
+        PieceStore.listen(this.onChange);
+
+        if (this.props.pieceId) {
+            PieceActions.fetchOne(this.props.pieceId);
+        }
+    },
+
+    componentWillUnmount() {
+        PieceStore.unlisten(this.onChange);
+    },
+
+    onChange(state) {
+        Object.assign({}, state, {
+            // Allow the form to be submitted if the updated piece already has an additional image uploaded
+            isUploadReady: this.isUploadReadyOnChange(state.piece),
+
+            /**
+             * Increment the forceUpdateKey to force the form to rerender on each change
+             *
+             * THIS IS A HACK TO MAKE SURE THE FORM ALWAYS DISPLAYS THE MOST RECENT STATE
+             * BECAUSE SOME OF OUR FORM ELEMENTS DON'T UPDATE FROM PROP CHANGES (ie.
+             * InputTextAreaToggable).
+             */
+            forceUpdateKey: this.state.forceUpdateKey + 1
+        });
+
+        this.setState(state);
+    },
+
+    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.state.piece.id
+        };
+    },
+
+    isUploadReadyOnChange(piece) {
+        return piece && piece.other_data && piece.other_data.length > 0;
+    },
+
+    handleSuccessWithNotification() {
+        if (typeof this.props.handleSuccess === 'function') {
+            this.props.handleSuccess();
+        }
+
+        let notification = new GlobalNotificationModel(getLangText('Further details successfully updated'), 'success', 10000);
+        GlobalNotificationActions.appendGlobalNotification(notification);
+    },
+
+    uploadStarted() {
+        this.setState({
+            isUploadReady: false
+        });
+    },
+
+    setIsUploadReady(isReady) {
+        this.setState({
+            isUploadReady: isReady
+        });
+    },
+
+    render() {
+        const { editable, isInline, handleSuccess, showHeading, showNotification, submitLabel } = this.props;
+        const { piece } = this.state;
+        let buttons, heading;
+
+        let spinner = <AscribeSpinner color='dark-blue' size='lg' />;
+
+        if (!isInline) {
+            buttons = (
+                <button
+                    type="submit"
+                    className="btn btn-default btn-wide"
+                    disabled={!this.state.isUploadReady}>
+                    {submitLabel}
+                </button>
+            );
+
+            spinner = (
+                <div className="modal-footer">
+                    <p className="pull-right">
+                        {spinner}
+                    </p>
+                </div>
+            );
+
+            heading = showHeading ? (
+                <div className="ascribe-form-header">
+                    <h3>
+                        {getLangText('Provide additional details')}
+                    </h3>
+                </div>
+            ) : null;
+        }
+
+        if (piece && piece.id) {
+            return (
+                <Form
+                    className="ascribe-form-bordered"
+                    ref='form'
+                    key={this.state.forceUpdateKey}
+                    url={requests.prepareUrl(ApiUrls.piece_extradata, {piece_id: piece.id})}
+                    handleSuccess={showNotification ? this.handleSuccessWithNotification : handleSuccess}
+                    getFormData={this.getFormData}
+                    buttons={buttons}
+                    spinner={spinner}
+                    disabled={!this.props.editable || !piece.acl.acl_edit}>
+                    {heading}
+                    <FurtherDetailsFileuploader
+                        label={getLangText('Marketplace Thumbnail Image')}
+                        uploadStarted={this.uploadStarted}
+                        submitFile={function () {}}
+                        setIsUploadReady={this.setIsUploadReady}
+                        isReadyForFormSubmission={formSubmissionValidation.atLeastOneUploadedFile}
+                        pieceId={piece.id}
+                        otherData={piece.other_data}
+                        editable={editable} />
+                    <Property
+                        name='artist_bio'
+                        label={getLangText('Artist Bio')}
+                        expanded={editable || !!piece.extra_data.artist_bio}>
+                        <InputTextAreaToggable
+                            rows={1}
+                            defaultValue={piece.extra_data.artist_bio}
+                            placeholder={getLangText('Enter a biography of the artist...')}
+                            required />
+                    </Property>
+                    <Property
+                        name='work_description'
+                        label={getLangText('Work Description')}
+                        expanded={editable || !!piece.extra_data.work_description}>
+                        <InputTextAreaToggable
+                            rows={1}
+                            defaultValue={piece.extra_data.work_description}
+                            placeholder={getLangText('Enter a description of the work...')}
+                            required />
+                    </Property>
+                    <Property
+                        name='technology_details'
+                        label={getLangText('Technology Details')}
+                        expanded={editable || !!piece.extra_data.technology_details}>
+                        <InputTextAreaToggable
+                            rows={1}
+                            defaultValue={piece.extra_data.technology_details}
+                            placeholder={getLangText('Enter technological details about the work...')}
+                            required />
+                    </Property>
+                    <Property
+                        name='display_instructions'
+                        label={getLangText('Display Instructions')}
+                        expanded={editable || !!piece.extra_data.display_instructions}>
+                        <InputTextAreaToggable
+                            rows={1}
+                            defaultValue={piece.extra_data.display_instructions}
+                            placeholder={getLangText('Enter instructions on how to best display the work...')}
+                            required />
+                    </Property>
+                </Form>
+            );
+        } else {
+            return (
+                <div className="ascribe-loading-position">
+                    {spinner}
+                </div>
+            );
+        }
+    }
+});
+
+export default MarketAdditionalDataForm;

js/components/whitelabel/wallet/components/market/market_piece_list.js

@@ -0,0 +1,90 @@
+'use strict';
+
+import React from 'react';
+
+import MarketAclButtonList from './market_buttons/market_acl_button_list';
+
+import PieceList from '../../../../piece_list';
+
+import UserActions from '../../../../../actions/user_actions';
+import UserStore from '../../../../../stores/user_store';
+import WhitelabelActions from '../../../../../actions/whitelabel_actions';
+import WhitelabelStore from '../../../../../stores/whitelabel_store';
+
+import { setDocumentTitle } from '../../../../../utils/dom_utils';
+import { mergeOptions } from '../../../../../utils/general_utils';
+import { getLangText } from '../../../../../utils/lang_utils';
+
+let MarketPieceList = React.createClass({
+    propTypes: {
+        customThumbnailPlaceholder: React.PropTypes.func,
+        location: React.PropTypes.object
+    },
+
+    getInitialState() {
+        return mergeOptions(
+            UserStore.getState(),
+            WhitelabelStore.getState()
+        );
+    },
+
+    componentWillMount() {
+        setDocumentTitle(getLangText('Collection'));
+    },
+
+    componentDidMount() {
+        UserStore.listen(this.onChange);
+        WhitelabelStore.listen(this.onChange);
+
+        UserActions.fetchCurrentUser();
+        WhitelabelActions.fetchWhitelabel();
+    },
+
+    componentWillUnmount() {
+        UserStore.unlisten(this.onChange);
+        WhitelabelStore.unlisten(this.onChange);
+    },
+
+    onChange(state) {
+        this.setState(state);
+    },
+
+    render() {
+        const { customThumbnailPlaceholder, location } = this.props;
+        const {
+            currentUser: { email: userEmail },
+            whitelabel: {
+                name: whitelabelName = 'Market',
+                user: whitelabelAdminEmail
+            } } = this.state;
+
+        let filterParams = null;
+        let canLoadPieceList = false;
+
+        if (userEmail && whitelabelAdminEmail) {
+            canLoadPieceList = true;
+            const isUserAdmin = userEmail === whitelabelAdminEmail;
+
+            filterParams = [{
+                label: getLangText('Show works I can'),
+                items: [{
+                    key: isUserAdmin ? 'acl_transfer' : 'acl_consign',
+                    label: getLangText(isUserAdmin ? 'transfer' : 'consign to %s', whitelabelName),
+                    defaultValue: true
+                }]
+            }];
+        }
+
+        return (
+            <PieceList
+                canLoadPieceList={canLoadPieceList}
+                redirectTo="/register_piece?slide_num=0"
+                bulkModalButtonListType={MarketAclButtonList}
+                customThumbnailPlaceholder={customThumbnailPlaceholder}
+                filterParams={filterParams}
+                location={location} />
+        );
+    }
+});
+
+export default MarketPieceList;

js/components/whitelabel/wallet/components/market/market_register_piece.js

@@ -0,0 +1,174 @@
+'use strict';
+
+import React from 'react';
+import { History } from 'react-router';
+
+import Col from 'react-bootstrap/lib/Col';
+import Row from 'react-bootstrap/lib/Row';
+
+import MarketAdditionalDataForm from './market_forms/market_additional_data_form';
+
+import Property from '../../../../ascribe_forms/property';
+import RegisterPieceForm from '../../../../ascribe_forms/form_register_piece';
+
+import PieceActions from '../../../../../actions/piece_actions';
+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 WhitelabelActions from '../../../../../actions/whitelabel_actions';
+import WhitelabelStore from '../../../../../stores/whitelabel_store';
+
+import SlidesContainer from '../../../../ascribe_slides_container/slides_container';
+
+import { getLangText } from '../../../../../utils/lang_utils';
+import { setDocumentTitle } from '../../../../../utils/dom_utils';
+import { mergeOptions } from '../../../../../utils/general_utils';
+
+let MarketRegisterPiece = React.createClass({
+    propTypes: {
+        location: React.PropTypes.object
+    },
+
+    mixins: [History],
+
+    getInitialState(){
+        return mergeOptions(
+            PieceListStore.getState(),
+            UserStore.getState(),
+            WhitelabelStore.getState(),
+            {
+                step: 0
+            });
+    },
+
+    componentDidMount() {
+        PieceListStore.listen(this.onChange);
+        UserStore.listen(this.onChange);
+        WhitelabelStore.listen(this.onChange);
+
+        UserActions.fetchCurrentUser();
+        WhitelabelActions.fetchWhitelabel();
+
+        // Reset the piece store to make sure that we don't display old data
+        // if the user repeatedly registers works
+        PieceActions.updatePiece({});
+    },
+
+    componentWillUnmount() {
+        PieceListStore.unlisten(this.onChange);
+        UserStore.unlisten(this.onChange);
+        WhitelabelStore.unlisten(this.onChange);
+    },
+
+    onChange(state) {
+        this.setState(state);
+    },
+
+    handleRegisterSuccess(response) {
+        this.refreshPieceList();
+
+        // Use the response's piece for the next step if available
+        let pieceId = null;
+        if (response && response.piece) {
+            pieceId = response.piece.id;
+            PieceActions.updatePiece(response.piece);
+        }
+
+        this.incrementStep();
+        this.refs.slidesContainer.nextSlide({ piece_id: pieceId });
+    },
+
+    handleAdditionalDataSuccess() {
+        this.refreshPieceList();
+
+        this.history.pushState(null, '/collection');
+    },
+
+    // We need to increase the step to lock the forms that are already filled out
+    incrementStep() {
+        this.setState({
+            step: this.state.step + 1
+        });
+    },
+
+    getPieceFromQueryParam() {
+        const queryParams = this.props.location.query;
+
+        // 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.
+        return queryParams && queryParams.piece_id;
+    },
+
+    refreshPieceList() {
+        PieceListActions.fetchPieceList(
+            this.state.page,
+            this.state.pageSize,
+            this.state.searchTerm,
+            this.state.orderBy,
+            this.state.orderAsc,
+            this.state.filterBy
+        );
+    },
+
+    render() {
+        const {
+            isFineUploaderActive,
+            step,
+            whitelabel: {
+                name: whitelabelName = 'Market'
+            } } = this.state;
+
+        setDocumentTitle(getLangText('Register a new piece'));
+
+        return (
+            <SlidesContainer
+                ref="slidesContainer"
+                forwardProcess={true}
+                glyphiconClassNames={{
+                    pending: 'glyphicon glyphicon-chevron-right',
+                    completed: 'glyphicon glyphicon-lock'
+                }}
+                location={this.props.location}>
+                <div data-slide-title={getLangText('Register work')}>
+                    <Row className="no-margin">
+                        <Col xs={12} sm={10} md={8} smOffset={1} mdOffset={2}>
+                            <RegisterPieceForm
+                                disabled={step > 0}
+                                enableLocalHashing={false}
+                                headerMessage={getLangText('Consign to %s', whitelabelName)}
+                                submitMessage={getLangText('Proceed to additional details')}
+                                isFineUploaderActive={true}
+                                handleSuccess={this.handleRegisterSuccess}
+                                location={this.props.location}>
+                                <Property
+                                    name="num_editions"
+                                    label={getLangText('Specify editions')}>
+                                    <input
+                                        type="number"
+                                        placeholder="(e.g. 32)"
+                                        min={0}
+                                        required />
+                                </Property>
+                            </RegisterPieceForm>
+                        </Col>
+                    </Row>
+                </div>
+                <div data-slide-title={getLangText('Additional details')}>
+                    <Row className="no-margin">
+                        <Col xs={12} sm={10} md={8} smOffset={1} mdOffset={2}>
+                            <MarketAdditionalDataForm
+                                handleSuccess={this.handleAdditionalDataSuccess}
+                                pieceId={this.getPieceFromQueryParam()}
+                                showHeading />
+                        </Col>
+                    </Row>
+                </div>
+            </SlidesContainer>
+        );
+    }
+});
+
+export default MarketRegisterPiece;

js/components/whitelabel/wallet/constants/wallet_api_urls.js

@@ -4,22 +4,30 @@ import walletConstants from './wallet_application_constants';
 
 // gets subdomain as a parameter
 function getWalletApiUrls(subdomain) {
-    if (subdomain === 'cyland'){
+    if (subdomain === 'cyland') {
         return {
             'pieces_list': walletConstants.walletApiEndpoint + subdomain + '/pieces/',
             'piece': walletConstants.walletApiEndpoint + subdomain + '/pieces/${piece_id}/',
             'piece_extradata': walletConstants.walletApiEndpoint + subdomain + '/pieces/${piece_id}/extradata/',
             'user': walletConstants.walletApiEndpoint + subdomain + '/users/'
         };
-    }
-    else if (subdomain === 'ikonotv'){
+    } else if (subdomain === 'ikonotv') {
         return {
             'pieces_list': walletConstants.walletApiEndpoint + subdomain + '/pieces/',
             'piece': walletConstants.walletApiEndpoint + subdomain + '/pieces/${piece_id}/',
             'user': walletConstants.walletApiEndpoint + subdomain + '/users/'
         };
+    } else if (subdomain === 'lumenus' || subdomain === '23vivi') {
+        return {
+            'editions_list': walletConstants.walletApiEndpoint + 'markets/' + subdomain + '/pieces/${piece_id}/editions/',
+            'edition': walletConstants.walletApiEndpoint + 'markets/' + subdomain + '/editions/${bitcoin_id}/',
+            'pieces_list': walletConstants.walletApiEndpoint + 'markets/' + subdomain + '/pieces/',
+            'piece': walletConstants.walletApiEndpoint + 'markets/' + subdomain + '/pieces/${piece_id}/',
+            'piece_extradata': walletConstants.walletApiEndpoint + 'markets/' + subdomain + '/pieces/${piece_id}/extradata/',
+            'user': walletConstants.walletApiEndpoint + 'markets/' + subdomain + '/users/'
+        };
     }
     return {};
 }
 
-export default getWalletApiUrls;
+export default getWalletApiUrls;

js/components/whitelabel/wallet/wallet_app.js

@@ -32,7 +32,7 @@ let WalletApp = React.createClass({
 
         // if the path of the current activeRoute is not defined, then this is the IndexRoute
         if ((!path || history.isActive('/login') || history.isActive('/signup') || history.isActive('/contract_notifications'))
-            && (['ikonotv']).indexOf(subdomain) > -1) {
+            && (['cyland', 'ikonotv', 'lumenus', '23vivi']).indexOf(subdomain) > -1) {
             header = (<div className="hero"/>);
         } else {
             header = <Header showAddWork={true} routes={routes} />;

js/components/whitelabel/wallet/wallet_routes.js

@@ -16,6 +16,8 @@ import SettingsContainer from '../../../components/ascribe_settings/settings_con
 import ContractSettings from '../../../components/ascribe_settings/contract_settings';
 import ErrorNotFoundPage from '../../../components/error_not_found_page';
 
+import CCRegisterPiece from './components/cc/cc_register_piece';
+
 import CylandLanding from './components/cyland/cyland_landing';
 import CylandPieceContainer from './components/cyland/cyland_detail/cyland_piece_container';
 import CylandRegisterPiece from './components/cyland/cyland_register_piece';
@@ -23,12 +25,20 @@ import CylandPieceList from './components/cyland/cyland_piece_list';
 
 import IkonotvLanding from './components/ikonotv/ikonotv_landing';
 import IkonotvPieceList from './components/ikonotv/ikonotv_piece_list';
-import ContractAgreementForm from '../../../components/ascribe_forms/form_contract_agreement';
+import SendContractAgreementForm from '../../../components/ascribe_forms/form_send_contract_agreement';
 import IkonotvRegisterPiece from './components/ikonotv/ikonotv_register_piece';
 import IkonotvPieceContainer from './components/ikonotv/ikonotv_detail/ikonotv_piece_container';
 import IkonotvContractNotifications from './components/ikonotv/ikonotv_contract_notifications';
 
-import CCRegisterPiece from './components/cc/cc_register_piece';
+import MarketPieceList from './components/market/market_piece_list';
+import MarketRegisterPiece from './components/market/market_register_piece';
+import MarketPieceContainer from './components/market/market_detail/market_piece_container';
+import MarketEditionContainer from './components/market/market_detail/market_edition_container';
+
+import LumenusLanding from './components/lumenus/lumenus_landing';
+
+import Vivi23Landing from './components/23vivi/23vivi_landing';
+import Vivi23PieceList from './components/23vivi/23vivi_piece_list';
 
 import AuthProxyHandler from '../../../components/ascribe_routes/proxy_routes/auth_proxy_handler';
 
@@ -128,7 +138,7 @@ let ROUTES = {
                 component={AuthProxyHandler({to: '/login', when: 'loggedOut'})(ContractSettings)}/>
             <Route
                 path='request_loan'
-                component={AuthProxyHandler({to: '/login', when: 'loggedOut'})(ContractAgreementForm)}
+                component={AuthProxyHandler({to: '/login', when: 'loggedOut'})(SendContractAgreementForm)}
                 headerTitle='SEND NEW CONTRACT'
                 aclName='acl_create_contractagreement'/>
             <Route
@@ -148,10 +158,80 @@ let ROUTES = {
             <Route path='verify' component={CoaVerifyContainer} />
             <Route path='*' component={ErrorNotFoundPage} />
         </Route>
+    ),
+    'lumenus': (
+        <Route path='/' component={WalletApp}>
+            <IndexRoute component={AuthProxyHandler({to: '/collection', when: 'loggedIn'})(LumenusLanding)} />
+            <Route
+                path='login'
+                component={AuthProxyHandler({to: '/collection', when: 'loggedIn'})(LoginContainer)} />
+            <Route
+                path='logout'
+                component={AuthProxyHandler({to: '/', when: 'loggedOut'})(LogoutContainer)}/>
+            <Route
+                path='signup'
+                component={AuthProxyHandler({to: '/collection', when: 'loggedIn'})(SignupContainer)} />
+            <Route
+                path='password_reset'
+                component={AuthProxyHandler({to: '/collection', when: 'loggedIn'})(PasswordResetContainer)} />
+            <Route
+                path='settings'
+                component={AuthProxyHandler({to: '/login', when: 'loggedOut'})(SettingsContainer)}/>
+            <Route
+                path='contract_settings'
+                component={AuthProxyHandler({to: '/login', when: 'loggedOut'})(ContractSettings)}/>
+            <Route
+                path='register_piece'
+                component={AuthProxyHandler({to: '/login', when: 'loggedOut'})(MarketRegisterPiece)}
+                headerTitle='+ NEW WORK'/>
+            <Route
+                path='collection'
+                component={AuthProxyHandler({to: '/login', when: 'loggedOut'})(MarketPieceList)}
+                headerTitle='COLLECTION'/>
+            <Route path='pieces/:pieceId' component={MarketPieceContainer} />
+            <Route path='editions/:editionId' component={MarketEditionContainer} />
+            <Route path='verify' component={CoaVerifyContainer} />
+            <Route path='*' component={ErrorNotFoundPage} />
+        </Route>
+    ),
+    '23vivi': (
+        <Route path='/' component={WalletApp}>
+            <IndexRoute component={AuthProxyHandler({to: '/collection', when: 'loggedIn'})(Vivi23Landing)} />
+            <Route
+                path='login'
+                component={AuthProxyHandler({to: '/collection', when: 'loggedIn'})(LoginContainer)} />
+            <Route
+                path='logout'
+                component={AuthProxyHandler({to: '/', when: 'loggedOut'})(LogoutContainer)}/>
+            <Route
+                path='signup'
+                component={AuthProxyHandler({to: '/collection', when: 'loggedIn'})(SignupContainer)} />
+            <Route
+                path='password_reset'
+                component={AuthProxyHandler({to: '/collection', when: 'loggedIn'})(PasswordResetContainer)} />
+            <Route
+                path='settings'
+                component={AuthProxyHandler({to: '/login', when: 'loggedOut'})(SettingsContainer)}/>
+            <Route
+                path='contract_settings'
+                component={AuthProxyHandler({to: '/login', when: 'loggedOut'})(ContractSettings)}/>
+            <Route
+                path='register_piece'
+                component={AuthProxyHandler({to: '/login', when: 'loggedOut'})(MarketRegisterPiece)}
+                headerTitle='+ NEW WORK'
+                aclName='acl_wallet_submit'/>
+            <Route
+                path='collection'
+                component={AuthProxyHandler({to: '/login', when: 'loggedOut'})(Vivi23PieceList)}
+                headerTitle='COLLECTION'/>
+            <Route path='pieces/:pieceId' component={MarketPieceContainer} />
+            <Route path='editions/:editionId' component={MarketEditionContainer} />
+            <Route path='verify' component={CoaVerifyContainer} />
+            <Route path='*' component={ErrorNotFoundPage} />
+        </Route>
     )
 };
 
-
 function getRoutes(commonRoutes, subdomain) {
     if(subdomain in ROUTES) {
         return ROUTES[subdomain];
@@ -160,5 +240,4 @@ function getRoutes(commonRoutes, subdomain) {
     }
 }
 
-
 export default getRoutes;

js/constants/api_urls.js

@@ -72,6 +72,9 @@ let ApiUrls = {
     'users_username': AppConstants.apiEndpoint + 'users/username/',
     'users_profile': AppConstants.apiEndpoint + 'users/profile/',
     'wallet_settings': AppConstants.apiEndpoint + 'users/wallet_settings/',
+    'webhook': AppConstants.apiEndpoint + 'webhooks/${webhook_id}/',
+    'webhooks': AppConstants.apiEndpoint + 'webhooks/',
+    'webhooks_events': AppConstants.apiEndpoint + 'webhooks/events/',
     'whitelabel_settings': AppConstants.apiEndpoint + 'whitelabel/settings/${subdomain}/',
     'delete_s3_file': AppConstants.serverUrl + 's3/delete/',
     'prize_list': AppConstants.apiEndpoint + 'prize/'

js/constants/application_constants.js

@@ -51,6 +51,20 @@ const constants = {
             'permissions': ['register', 'edit', 'share', 'del_from_collection'],
             'type': 'wallet'
         },
+        {
+            'subdomain': 'lumenus',
+            'name': 'Lumenus',
+            'logo': 'https://s3-us-west-2.amazonaws.com/ascribe0/whitelabel/lumenus/lumenus-logo.png',
+            'permissions': ['register', 'edit', 'share', 'del_from_collection'],
+            'type': 'wallet'
+        },
+        {
+            'subdomain': '23vivi',
+            'name': '23vivi',
+            'logo': 'https://s3-us-west-2.amazonaws.com/ascribe0/whitelabel/23vivi/23vivi-logo.png',
+            'permissions': ['register', 'edit', 'share', 'del_from_collection'],
+            'type': 'wallet'
+        },
         {
             'subdomain': 'portfolioreview',
             'name': 'Portfolio Review',
@@ -124,7 +138,12 @@ const constants = {
     },
     'twitter': {
         'sdkUrl': 'https://platform.twitter.com/widgets.js'
-    }
+    },
+
+    'errorMessagesToIgnore': [
+        'Authentication credentials were not provided.',
+        'Informations d\'authentification non fournies.'
+    ]
 };
 
 export default constants;

js/mixins/react_error.js

@@ -0,0 +1,16 @@
+'use strict';
+
+import invariant from 'invariant';
+
+const ReactError = {
+    throws(err) {
+        if(!err.handler) {
+            invariant(err.handler, 'Error thrown to ReactError did not have a `handler` function');
+            console.logGlobal('Error thrown to ReactError did not have a `handler` function');
+        } else {
+            err.handler(this, err);
+        }
+    }
+};
+
+export default ReactError;

js/models/errors.js

@@ -0,0 +1,31 @@
+'use strict';
+
+import React from 'react';
+
+import ErrorNotFoundPage from '../components/error_not_found_page';
+
+
+export class ResourceNotFoundError extends Error {
+    constructor(message) {
+        super(message);
+        this.name = this.constructor.name;
+        this.message = message;
+
+        // `captureStackTrace` might not be available in IE:
+        // - http://stackoverflow.com/a/8460753/1263876
+        if(Error.captureStackTrace) {
+            Error.captureStackTrace(this, this.constructor.name);
+        }
+    }
+
+    handler(component, err) {
+        const monkeyPatchedKey = `_${this.name}MonkeyPatched`;
+
+        if(!component.state[monkeyPatchedKey]) {
+            component.render = () => <ErrorNotFoundPage message={err.message} />;
+            component.setState({
+                [monkeyPatchedKey]: true
+            });
+        }
+    }
+}

js/sources/webhook_source.js

@@ -0,0 +1,46 @@
+'use strict';
+
+import requests from '../utils/requests';
+
+import WebhookActions from '../actions/webhook_actions';
+
+
+const WebhookSource = {
+    lookupWebhooks: {
+        remote() {
+            return requests.get('webhooks');
+        },
+        local(state) {
+            return state.webhooks && !Object.keys(state.webhooks).length ? state : {};
+        },
+        success: WebhookActions.successFetchWebhooks,
+        error: WebhookActions.errorWebhooks,
+        shouldFetch(state) {
+            return state.webhookMeta.invalidateCache || state.webhooks && !Object.keys(state.webhooks).length;
+        }
+    },
+
+    lookupWebhookEvents: {
+        remote() {
+            return requests.get('webhooks_events');
+        },
+        local(state) {
+            return state.webhookEvents && !Object.keys(state.webhookEvents).length ? state : {};
+        },
+        success: WebhookActions.successFetchWebhookEvents,
+        error: WebhookActions.errorWebhookEvents,
+        shouldFetch(state) {
+            return state.webhookEventsMeta.invalidateCache || state.webhookEvents && !Object.keys(state.webhookEvents).length;
+        }
+    },
+
+    performRemoveWebhook: {
+        remote(state) {
+            return requests.delete('webhook', {'webhook_id': state.webhookMeta.idToDelete });
+        },
+        success: WebhookActions.successRemoveWebhook,
+        error: WebhookActions.errorWebhooks
+    }
+};
+
+export default WebhookSource;

js/stores/edition_list_store.js

@@ -60,7 +60,7 @@ class EditionListStore {
      * We often just have to refresh the edition list for a certain pieceId,
      * this method provides exactly that functionality without any side effects
      */
-    onRefreshEditionList({pieceId, filterBy}) {
+    onRefreshEditionList({pieceId, filterBy = {}}) {
         // It may happen that the user enters the site logged in already
         // through /editions
         // If he then tries to delete a piece/edition and this method is called,

js/stores/edition_store.js

@@ -7,11 +7,17 @@ import EditionActions from '../actions/edition_actions';
 class EditionStore {
     constructor() {
         this.edition = {};
+        this.editionError = null;
         this.bindActions(EditionActions);
     }
 
     onUpdateEdition(edition) {
         this.edition = edition;
+        this.editionError = null;
+    }
+
+    onEditionFailed(error) {
+        this.editionError = error;
     }
 }
 

js/stores/piece_store.js

@@ -7,11 +7,13 @@ import PieceActions from '../actions/piece_actions';
 class PieceStore {
     constructor() {
         this.piece = {};
+        this.pieceError = null;
         this.bindActions(PieceActions);
     }
 
     onUpdatePiece(piece) {
         this.piece = piece;
+        this.pieceError = null;
     }
 
     onUpdateProperty({key, value}) {
@@ -21,6 +23,10 @@ class PieceStore {
             throw new Error('There is no piece defined in PieceStore or the piece object does not have the property you\'re looking for.');
         }
     }
+
+    onPieceFailed(err) {
+        this.pieceError = err;
+    }
 }
 
 export default alt.createStore(PieceStore, 'PieceStore');

js/stores/webhook_store.js

@@ -0,0 +1,88 @@
+'use strict';
+
+import { alt } from '../alt';
+import WebhookActions from '../actions/webhook_actions';
+
+import WebhookSource from '../sources/webhook_source';
+
+class WebhookStore {
+    constructor() {
+        this.webhooks = [];
+        this.webhookEvents = [];
+        this.webhookMeta = {
+            invalidateCache: false,
+            err: null,
+            idToDelete: null
+        };
+        this.webhookEventsMeta = {
+            invalidateCache: false,
+            err: null
+        };
+
+        this.bindActions(WebhookActions);
+        this.registerAsync(WebhookSource);
+    }
+
+    onFetchWebhooks(invalidateCache) {
+        this.webhookMeta.invalidateCache = invalidateCache;
+        this.getInstance().lookupWebhooks();
+    }
+
+    onSuccessFetchWebhooks({ webhooks }) {
+        this.webhookMeta.invalidateCache = false;
+        this.webhookMeta.err = null;
+        this.webhooks = webhooks;
+
+        this.webhookEventsMeta.invalidateCache = true;
+        this.getInstance().lookupWebhookEvents();
+    }
+
+    onFetchWebhookEvents(invalidateCache) {
+        this.webhookEventsMeta.invalidateCache = invalidateCache;
+        this.getInstance().lookupWebhookEvents();
+    }
+
+    onSuccessFetchWebhookEvents({ events }) {
+        this.webhookEventsMeta.invalidateCache = false;
+        this.webhookEventsMeta.err = null;
+
+        // remove all events that have already been used.
+        const usedEvents = this.webhooks
+                                .reduce((tempUsedEvents, webhook) => {
+                                    tempUsedEvents.push(webhook.event.split('.')[0]);
+                                    return tempUsedEvents;
+                                }, []);
+
+        this.webhookEvents = events.filter((event) => {
+            return usedEvents.indexOf(event) === -1;
+        });
+    }
+
+    onRemoveWebhook(id) {
+        this.webhookMeta.invalidateCache = true;
+        this.webhookMeta.idToDelete = id;
+
+        if(!this.getInstance().isLoading()) {
+            this.getInstance().performRemoveWebhook();
+        }
+    }
+
+    onSuccessRemoveWebhook() {
+        this.webhookMeta.idToDelete = null;
+        if(!this.getInstance().isLoading()) {
+            this.getInstance().lookupWebhooks();
+        }
+    }
+
+    onErrorWebhooks(err) {
+        console.logGlobal(err);
+        this.webhookMeta.err = err;
+    }
+
+    onErrorWebhookEvents(err) {
+        console.logGlobal(err);
+        this.webhookEventsMeta.err = err;
+    }
+}
+
+export default alt.createStore(WebhookStore, 'WebhookStore');

js/utils/acl_utils.js

@@ -4,7 +4,7 @@ import { sanitize, intersectLists } from './general_utils';
 
 export function getAvailableAcls(editions, filterFn) {
     let availableAcls = [];
-    if (!editions || editions.constructor !== Array){
+    if (!editions || editions.constructor !== Array) {
         return [];
     }
     // if you copy a javascript array of objects using slice, then
@@ -33,23 +33,23 @@ export function getAvailableAcls(editions, filterFn) {
     });
 
     // If no edition has been selected, availableActions is empty
-    // If only one edition has been selected, their actions are available
-    // If more than one editions have been selected, their acl properties are intersected
-    if(editionsCopy.length >= 1) {
+    // If only one edition has been selected, its actions are available
+    // If more than one editions have been selected, intersect all their acl properties
+    if (editionsCopy.length >= 1) {
         availableAcls = editionsCopy[0].acl;
-    }
-    if(editionsCopy.length >= 2) {
-        for(let i = 1; i < editionsCopy.length; i++) {
-            availableAcls = intersectLists(availableAcls, editionsCopy[i].acl);
+
+        if (editionsCopy.length >= 2) {
+            for (let i = 1; i < editionsCopy.length; i++) {
+                availableAcls = intersectLists(availableAcls, editionsCopy[i].acl);
+            }
         }
     }
 
     // convert acls back to key-value object
     let availableAclsObj = {};
-    for(let i = 0; i < availableAcls.length; i++) {
+    for (let i = 0; i < availableAcls.length; i++) {
         availableAclsObj[availableAcls[i]] = true;
     }
 
-
     return availableAclsObj;
-}
+}

js/utils/error_utils.js

@@ -13,8 +13,8 @@ import AppConstants from '../constants/application_constants';
  * @param  {boolean} ignoreSentry Defines whether or not the error should be submitted to Sentry
  * @param  {string} comment  Will also be submitted to Sentry, but will not be logged
  */
-function logGlobal(error, ignoreSentry, comment) {
-
+function logGlobal(error, ignoreSentry = AppConstants.errorMessagesToIgnore.indexOf(error.message) > -1,
+                   comment) {
     console.error(error);
 
     if(!ignoreSentry) {

js/utils/form_utils.js

@@ -2,6 +2,8 @@
 
 import { getLangText } from './lang_utils';
 
+import AppConstants from '../constants/application_constants';
+
 /**
  * Get the data ids of the given piece or editions.
  * @param  {boolean} isPiece                   Is the given entities parameter a piece? (False: array of editions)
@@ -70,6 +72,10 @@ export function getAclFormMessage(options) {
         throw new Error('Your specified aclName did not match a an acl class.');
     }
 
+    if (options.additionalMessage) {
+        message += '\n\n' + options.additionalMessage;
+    }
+
     if (options.senderName) {
         message += '\n\n';
         message += getLangText('Truly yours,');

js/utils/general_utils.js

@@ -1,5 +1,11 @@
 'use strict';
 
+/**
+ * Checks shallow equality
+ * Re-export of shallow from shallow-equals
+ */
+export { default as isShallowEqual } from 'shallow-equals';
+
 /**
  * Takes an object and returns a shallow copy without any keys
  * that fail the passed in filter function.
@@ -109,7 +115,7 @@ function _doesObjectListHaveDuplicates(l) {
 export function mergeOptions(...l) {
     // If the objects submitted in the list have duplicates,in their key names,
     // abort the merge and tell the function's user to check his objects.
-    if(_doesObjectListHaveDuplicates(l)) {
+    if (_doesObjectListHaveDuplicates(l)) {
         throw new Error('The objects you submitted for merging have duplicates. Merge aborted.');
     }
 

js/utils/inject_utils.js

@@ -12,16 +12,16 @@ let mapTag = {
     css: 'link'
 };
 
+let tags = {};
+
 function injectTag(tag, src) {
-    return Q.Promise((resolve, reject) => {
-        if (isPresent(tag, src)) {
-            resolve();
-        } else {
+    if(!tags[src]) {
+        tags[src] = Q.Promise((resolve, reject) => {
             let attr = mapAttr[tag];
             let element = document.createElement(tag);
             if (tag === 'script') {
-                element.onload = () => resolve();
-                element.onerror = () => reject();
+                element.onload = resolve;
+                element.onerror = reject;
             } else {
                 resolve();
             }
@@ -30,14 +30,10 @@ function injectTag(tag, src) {
             if (tag === 'link') {
                 element.rel = 'stylesheet';
             }
-        }
-    });
-}
+        });
+    }
 
-function isPresent(tag, src) {
-    let attr = mapAttr[tag];
-    let query = `head > ${tag}[${attr}="${src}"]`;
-    return document.querySelector(query);
+    return tags[src];
 }
 
 function injectStylesheet(src) {
@@ -65,7 +61,6 @@ export const InjectInHeadUtils = {
      * you don't want to embed everything inside the build file.
      */
 
-    isPresent,
     injectStylesheet,
     injectScript,
     inject

js/utils/regex_utils.js

@@ -0,0 +1,7 @@
+'use strict'
+
+export function isEmail(string) {
+    // This is a bit of a weak test for an email, but you really can't win them all
+    // http://stackoverflow.com/questions/201323/using-a-regular-expression-to-validate-an-email-address
+    return !!string && string.match(/.*@.*\..*/);
+}

js/utils/requests.js

@@ -30,6 +30,15 @@ class Requests {
                             reject(error);
                         } else if(body && body.detail) {
                             reject(new Error(body.detail));
+                        } else if(!body.success) {
+                            let error = new Error('Client Request Error');
+                            error.json = {
+                                status: response.status,
+                                statusText: response.statusText,
+                                type: response.type,
+                                url: response.url
+                            };
+                            reject(error);
                         } else {
                             resolve(body);
                         }
@@ -100,8 +109,7 @@ class Requests {
         return newUrl;
     }
 
-    request(verb, url, options) {
-        options = options || {};
+    request(verb, url, options = {}) {
         let merged = Object.assign({}, this.httpOptions, options);
         let csrftoken = getCookie(AppConstants.csrftoken);
         if (csrftoken) {
@@ -129,13 +137,10 @@ class Requests {
     }
 
     _putOrPost(url, paramsAndBody, method) {
-        let paramsCopy = Object.assign({}, paramsAndBody);
         let params = omitFromObject(paramsAndBody, ['body']);
         let newUrl = this.prepareUrl(url, params);
-        let body = null;
-        if (paramsCopy && paramsCopy.body) {
-            body = JSON.stringify(paramsCopy.body);
-        }
+        let body = paramsAndBody && paramsAndBody.body ? JSON.stringify(paramsAndBody.body)
+                                                       : null;
         return this.request(method, newUrl, { body });
     }
 

package.json

@@ -66,7 +66,7 @@
     "gulp-uglify": "^1.2.0",
     "gulp-util": "^3.0.4",
     "harmonize": "^1.4.2",
-    "history": "^1.11.1",
+    "history": "^1.13.1",
     "invariant": "^2.1.1",
     "isomorphic-fetch": "^2.0.2",
     "jest-cli": "^0.4.0",
@@ -80,11 +80,12 @@
     "react": "0.13.2",
     "react-bootstrap": "0.25.1",
     "react-datepicker": "^0.12.0",
-    "react-router": "^1.0.0-rc3",
+    "react-router": "1.0.0",
     "react-router-bootstrap": "^0.19.0",
     "react-star-rating": "~1.3.2",
     "react-textarea-autosize": "^2.5.2",
     "reactify": "^1.1.0",
+    "shallow-equals": "0.0.0",
     "shmui": "^0.1.0",
     "spark-md5": "~1.0.0",
     "uglifyjs": "^2.4.10",

sass/ascribe-fonts/ascribe-fonts.scss

@@ -89,26 +89,4 @@
 .btn-glyph-ascribe {
     font-size: 18px;
     padding: 4px 12px 0 10px
-}
-
-.ascribe-logo-circle {
-    border: 6px solid #F6F6F6;
-    border-radius: 10em;
-    position: relative;
-    top: 10%;
-    left: 10%;
-
-    display: block;
-    width: 80%;
-    height: 80%;
-
-    > span {
-        color: #F6F6F6;
-        position: absolute;
-        top: -.29em;
-        left: .16em;
-
-        font-size: 5em;
-        font-weight: normal;
-    }
 }

sass/ascribe_accordion_list.scss

@@ -60,6 +60,34 @@ $ascribe-accordion-list-item-height: 100px;
                 background-size: cover;
             }
 
+            .ascribe-logo-circle {
+                border: 6px solid #F6F6F6;
+                border-radius: 10em;
+                position: relative;
+                top: 10%;
+                left: 10%;
+
+                display: block;
+                width: 80%;
+                height: 80%;
+
+                > span {
+                    color: #F6F6F6;
+                    position: absolute;
+                    top: -.29em;
+                    left: .16em;
+
+                    font-size: 5em;
+                    font-weight: normal;
+                }
+            }
+
+            .ascribe-thumbnail-placeholder {
+                color: #F6F6F6;
+                font-size: 5em;
+                font-weight: normal;
+            }
+
             //&::before {
             //    content: ' ';
             //    display: inline-block;
@@ -211,10 +239,6 @@ $ascribe-accordion-list-item-height: 100px;
     -ms-user-select: none;
     -webkit-user-select: none;
 
-    &:hover {
-        color: $ascribe-dark-blue;
-    }
-
     .glyphicon {
         font-size: .8em;
         top: 1px !important;

sass/ascribe_acl_information.scss

@@ -22,4 +22,4 @@
     .example {
         color: #616161;
     }
-}
+}

sass/ascribe_custom_style.scss

@@ -68,10 +68,15 @@ hr {
     .dropdown-menu {
         background-color: $ascribe--nav-bg-color;
     }
+    .navbar-nav > li > .dropdown-menu {
+        padding: 0;
+    }
 
     .dropdown-menu > li > a {
         color:  $ascribe--nav-fg-prim-color;
         font-weight: $ascribe--font-weight-light;
+        padding-bottom: 9px;
+        padding-top: 9px;
     }
 
     .dropdown-menu > li > a:hover,
@@ -79,6 +84,10 @@ hr {
         background-color: rgba($ascribe--button-default-color, .05);
     }
 
+    .dropdown-menu > .divider {
+        margin: 0;
+    }
+
     .notification-menu {
         .dropdown-menu {
             background-color: white;

sass/ascribe_notification_list.scss

@@ -2,8 +2,9 @@ $break-small: 764px;
 $break-medium: 991px;
 $break-medium: 1200px;
 
-.notification-header,.notification-wrapper {
-    width: 350px;
+.notification-header, .notification-wrapper {
+    min-width: 350px;
+    width: 100%;
 }
 
 .notification-header {
@@ -81,4 +82,4 @@ $break-medium: 1200px;
     border: 1px solid #cccccc;
     background-color: white;
     margin-top: 1px;
-}
+}

sass/ascribe_notification_page.scss

@@ -31,16 +31,11 @@
         margin-top: .5em;
         margin-bottom: 1em;
 
-        .loan-form {
-            margin-top: .5em;
+        &.embed-form {
             height: 45vh;
         }
     }
 
-    .loan-form {
-        height: 40vh;
-    }
-
     .notification-contract-pdf-download {
         text-align: left;
         margin-left: 1em;
@@ -69,4 +64,8 @@
         padding-left: 0;
         width: 100%;
     }
+}
+
+.ascribe-property.contract-appendix-form {
+    padding-left: 0;
 }

sass/ascribe_panel.scss

@@ -31,7 +31,7 @@
         vertical-align: middle;
 
         &:first-child {
-            word-break: break-all;
+            word-break: break-word;
             font-size: .9em;
         }
     }

sass/ascribe_piece_list_toolbar.scss

@@ -81,4 +81,8 @@
             top: 2px;
         }
     }
+
+    .dropdown-menu {
+        min-width: 170px;
+    }
 }

sass/ascribe_spinner.scss

@@ -52,6 +52,13 @@ $ascribe--spinner-size-sm: 15px;
     }
 }
 
+.spinner-wrapper-white {
+    color: $ascribe-white;
+    .spinner-circle {
+        border-color: $ascribe-white;
+    }
+}
+
 .spinner-wrapper-lg {
     width: $ascribe--spinner-size-lg;
     height: $ascribe--spinner-size-lg;
@@ -146,4 +153,4 @@ $ascribe--spinner-size-sm: 15px;
     40% { color: $ascribe-blue; }
     60% { color: $ascribe-light-blue; }
     80% { color: $ascribe-pink; }
-}
+}

sass/main.scss

@@ -350,7 +350,7 @@ hr {
 
     > span {
         font-size: 1.1em;
-        font-weight: 600;
+        font-weight: normal;
         color: #616161;
 
         padding-left: .3em;

sass/whitelabel/wallet/23vivi/23vivi_custom_style.scss

@@ -0,0 +1,363 @@
+/** Sass cannot use a number as the first character of a variable, so we'll have to settle with vivi23 **/
+$vivi23--fg-color: black;
+$vivi23--bg-color: white;
+$vivi23--nav-fg-prim-color: $vivi23--fg-color;
+$vivi23--nav-fg-sec-color: #3a3a3a;
+$vivi23--nav-bg-color: $vivi23--bg-color;
+$vivi23--nav-highlight-color: #f8f8f8;
+$vivi23--button-default-color: $vivi23--fg-color;
+$vivi23--highlight-color: #de2600;
+
+
+.client--23vivi {
+    /** Landing page **/
+    .route--landing {
+        display: table;
+
+        > .container {
+            display: table-cell;
+            padding-bottom: 100px;
+            vertical-align: middle;
+        }
+
+        .vivi23-landing {
+            font-weight: normal;
+            text-align: center;
+        }
+
+        .vivi23-landing--header {
+            background-color: $vivi23--fg-color;
+            border: 1px solid $vivi23--fg-color;
+            color: $vivi23--bg-color;
+            padding: 2em;
+
+            .vivi23-landing--header-logo {
+                margin-top: 1em;
+                margin-bottom: 2em;
+                height: 75px;
+            }
+        }
+
+        .vivi23-landing--content {
+            border: 1px solid darken($vivi23--bg-color, 20%);
+            border-top: none;
+            padding: 2em;
+        }
+    }
+
+    /** Navbar **/
+    .navbar-default {
+        background-color: $vivi23--nav-fg-prim-color;
+
+        .navbar-brand .icon-ascribe-logo {
+            color: $vivi23--bg-color;
+            &:hover {
+                color: darken($vivi23--bg-color, 20%);
+            }
+        }
+
+    }
+
+    .navbar-nav > li > a,
+    .navbar-nav > li > a:focus,
+    .navbar-nav > li > .active a,
+    .navbar-nav > li > .active a:focus {
+        color: $vivi23--nav-bg-color;
+    }
+
+    .navbar-nav > li > a:hover {
+        color: darken($vivi23--nav-bg-color, 20%);
+    }
+
+    .navbar-nav > .active a,
+    .navbar-nav > .active a:hover,
+    .navbar-nav > .active a:focus {
+        background-color: $vivi23--nav-fg-prim-color;
+        border-bottom-color: $vivi23--nav-bg-color;
+        color: $vivi23--nav-bg-color;
+    }
+
+    .navbar-nav > .open > a,
+    .dropdown-menu > .active > a,
+    .dropdown-menu > li > a {
+        color: $vivi23--nav-fg-prim-color;
+        background-color: $vivi23--nav-bg-color;
+    }
+
+    .navbar-nav > .open > a:hover,
+    .navbar-nav > .open > a:focus,
+    .dropdown-menu > .active > a:hover,
+    .dropdown-menu > .active > a:focus,
+    .dropdown-menu > li > a:hover,
+    .dropdown-menu > li > a:focus {
+        color: lighten($vivi23--nav-fg-prim-color, 20%);
+        background-color: $vivi23--nav-highlight-color;
+    }
+
+    .navbar-collapse.collapsing,
+    .navbar-collapse.collapse.in {
+        background-color: $vivi23--nav-bg-color;
+
+        .navbar-nav > .open > a,
+        .navbar-nav > .active > a {
+            background-color: $vivi23--nav-highlight-color;
+        }
+    }
+
+    .navbar-collapse.collapsing li a,
+    .navbar-collapse.collapse.in li a {
+        color: $vivi23--nav-fg-prim-color;
+    }
+    .navbar-collapse.collapse.in li a:not(.ascribe-powered-by):hover {
+        color: lighten($vivi23--nav-fg-prim-color, 20%);
+        background-color: $vivi23--nav-highlight-color;
+    }
+
+    .navbar-toggle {
+        border-color: $vivi23--highlight-color;
+
+        .icon-bar {
+            background-color: $vivi23--highlight-color;
+        }
+    }
+
+    .navbar-toggle:hover,
+    .navbar-toggle:focus {
+        border-color: lighten($vivi23--highlight-color, 10%);
+        background-color: $vivi23--nav-fg-prim-color;
+
+        .icon-bar {
+            background-color: lighten($vivi23--highlight-color, 10%);
+        }
+    }
+
+    .notification-menu {
+        .dropdown-menu {
+            background-color: $vivi23--nav-bg-color;
+        }
+
+        .notification-header {
+            background-color: $vivi23--nav-fg-sec-color;
+            border-top-width: 0;
+            color: $vivi23--nav-bg-color;
+        }
+
+        .notification-action {
+            color: $vivi23--highlight-color;
+        }
+    }
+
+    /** Buttons **/
+    // reset disabled button styling for btn-default
+    .btn-default.disabled,
+    .btn-default.disabled:hover,
+    .btn-default.disabled:focus,
+    .btn-default.disabled.focus,
+    .btn-default.disabled:active,
+    .btn-default.disabled.active,
+    .btn-default[disabled],
+    .btn-default[disabled]:hover,
+    .btn-default[disabled]:focus,
+    .btn-default[disabled].focus,
+    .btn-default[disabled]:active,
+    .btn-default[disabled].active,
+    fieldset[disabled] .btn-default,
+    fieldset[disabled] .btn-default:hover,
+    fieldset[disabled] .btn-default:focus,
+    fieldset[disabled] .btn-default.focus,
+    fieldset[disabled] .btn-default:active,
+    fieldset[disabled] .btn-default.active {
+        background-color: lighten($vivi23--button-default-color, 30%);
+        border-color: lighten($vivi23--button-default-color, 30%);
+    }
+
+    .btn-default {
+        background-color: $vivi23--button-default-color;
+        border-color: $vivi23--button-default-color;
+
+        &:hover,
+        &:active,
+        &:focus,
+        &:active:hover,
+        &:active:focus,
+        &:active.focus,
+        &.active:hover,
+        &.active:focus,
+        &.active.focus {
+            background-color: lighten($vivi23--button-default-color, 30%);
+            border-color: lighten($vivi23--button-default-color, 30%);
+        }
+    }
+
+    // disabled buttons
+    .btn-secondary.disabled,
+    .btn-secondary.disabled:hover,
+    .btn-secondary.disabled:focus,
+    .btn-secondary.disabled.focus,
+    .btn-secondary.disabled:active,
+    .btn-secondary.disabled.active,
+    .btn-secondary[disabled],
+    .btn-secondary[disabled]:hover,
+    .btn-secondary[disabled]:focus,
+    .btn-secondary[disabled].focus,
+    .btn-secondary[disabled]:active,
+    .btn-secondary[disabled].active,
+    fieldset[disabled] .btn-secondary,
+    fieldset[disabled] .btn-secondary:hover,
+    fieldset[disabled] .btn-secondary:focus,
+    fieldset[disabled] .btn-secondary.focus,
+    fieldset[disabled] .btn-secondary:active,
+    fieldset[disabled] .btn-secondary.active {
+        background-color: darken($vivi23--bg-color, 20%);
+        border-color: $vivi23--button-default-color;
+    }
+
+    .btn-secondary {
+        border-color: $vivi23--button-default-color;
+
+        &:hover,
+        &:active,
+        &:focus,
+        &:active:hover,
+        &:active:focus,
+        &:active.focus,
+        &.active:hover,
+        &.active:focus,
+        &.active.focus {
+            background-color: $vivi23--button-default-color;
+            border-color: $vivi23--button-default-color;
+        }
+    }
+
+    .btn-tertiary {
+        &:hover,
+        &:active,
+        &ctive:hover,
+        &.active:hover{
+            background-color: $vivi23--highlight-color;
+            border-color: $vivi23--highlight-color;
+            color: $vivi23--highlight-color;
+        }
+    }
+
+    /** Other components **/
+    .ascribe-piece-list-toolbar .btn-ascribe-add {
+        display: none;
+    }
+
+    .ascribe-footer {
+        display: none;
+    }
+
+    .ascribe-accordion-list-table-toggle:hover {
+        color: $vivi23--fg-color;
+    }
+
+    .request-action-badge {
+        color: $vivi23--fg-color;
+    }
+
+    .acl-information-dropdown-list .title {
+        color: $vivi23--fg-color;
+    }
+
+    // filter widget
+    .ascribe-piece-list-toolbar-filter-widget button {
+        background-color: transparent !important;
+        border-color: transparent !important;
+        color: $vivi23--button-default-color !important;
+
+        &:hover,
+        &:active {
+            background-color: $vivi23--button-default-color !important;
+            border-color: $vivi23--button-default-color !important;
+            color: $vivi23--bg-color !important;
+        }
+    }
+
+    .icon-ascribe-search {
+        color: $vivi23--fg-color;
+    }
+
+    // forms
+    .ascribe-property-wrapper:hover {
+        border-left-color: rgba($vivi23--fg-color, 0.5);
+    }
+
+    .ascribe-property textarea,
+    .ascribe-property input,
+    .search-bar > .form-group > .input-group input {
+        &::-webkit-input-placeholder {
+            color: rgba($vivi23--fg-color, 0.5);
+        }
+        &::-moz-placeholder {
+            color: rgba($vivi23--fg-color, 0.5);
+        }
+        &:-ms-input-placeholder {
+            color: rgba($vivi23--fg-color, 0.5);
+        }
+        &:-moz-placeholder {
+            color: rgba($vivi23--fg-color, 0.5);
+        }
+    }
+
+    .ascribe-property {
+        > div,
+        > input,
+        > pre,
+        > select,
+        > span:not(.glyphicon),
+        > p,
+        > p > span,
+        > textarea {
+            color: $vivi23--fg-color;
+        }
+    }
+
+    // global notification
+    .ascribe-global-notification-success {
+        background-color: lighten($vivi23--fg-color, 20%);
+    }
+
+    // uploader progress
+    .ascribe-progress-bar > .progress-bar {
+        background-color: lighten($vivi23--fg-color, 20%);
+    }
+
+    // spinner
+    .spinner-circle {
+        border-color: $vivi23--fg-color;
+    }
+    .spinner-inner {
+        display: none;
+    }
+    .btn-secondary .spinner-circle {
+        border-color: $vivi23--bg-color;
+    }
+
+    // video player
+    .ascribe-media-player .vjs-default-skin {
+        .vjs-play-progress,
+        .vjs-volume-level {
+            background-color: $vivi23--highlight-color;
+        }
+    }
+
+    // pager
+    .pager li > a,
+    .pager li > span {
+        background-color: $vivi23--fg-color;
+        border-color: $vivi23--fg-color;
+    }
+    .pager .disabled > a,
+    .pager .disabled > span {
+        background-color: $vivi23--fg-color !important;
+        border-color: $vivi23--fg-color;
+    }
+
+    // intercom
+    #intercom-container .intercom-launcher-button {
+        background-color: $vivi23--button-default-color !important;
+        border-color: $vivi23--button-default-color !important;
+    }
+}

sass/whitelabel/wallet/cyland/cyland_custom_style.scss

@@ -59,8 +59,12 @@ $cyland--button-color: $cyland--nav-fg-prim-color;
     display: none;
 }
 
+<<<<<<< HEAD
 
 .client--cyland .icon-ascribe-search {
+=======
+.client--cyland .icon-ascribe-search{
+>>>>>>> master
     color: $cyland--button-color;
 }
 
@@ -143,6 +147,7 @@ $cyland--button-color: $cyland--nav-fg-prim-color;
     }
 }
 
+<<<<<<< HEAD
 // disabled buttons
 .client--cyland {
     .btn-default.disabled,
@@ -165,6 +170,23 @@ $cyland--button-color: $cyland--nav-fg-prim-color;
     fieldset[disabled] .btn-default.active {
         background-color: darken($cyland--button-color, 20%);
         border-color: darken($cyland--button-color, 20%);
+=======
+// landing page
+.client--cyland {
+    .route--landing {
+        display: table;
+
+        > .container {
+            display: table-cell;
+            padding-bottom: 100px;
+            vertical-align: middle;
+        }
+
+        .cyland-landing {
+            font-weight: normal;
+            text-align: center;
+        }
+>>>>>>> master
     }
 }
 
@@ -203,6 +225,7 @@ $cyland--button-color: $cyland--nav-fg-prim-color;
 .client--cyland .acl-information-dropdown-list .title {
     color: $cyland--button-color;
 }
+<<<<<<< HEAD
 
 .client--cyland .action-file.icon-ascribe-ok,
 .client--cyland .action-file.icon-ascribe-ok:hover {
@@ -218,4 +241,6 @@ $cyland--button-color: $cyland--nav-fg-prim-color;
 
 .client--cyland  .upload-button-wrapper > span {
     color: $cyland--button-color;
-}
+}
+=======
+>>>>>>> master