Merge with master

README.md

@@ -31,6 +31,7 @@ Additionally, to work on the white labeling functionality, you need to edit your
 127.0.0.1   sluice.localhost.com
 127.0.0.1   lumenus.localhost.com
 127.0.0.1   portfolioreview.localhost.com
+127.0.0.1   23vivi.localhost.com
 ```
 
 

fonts/ascribe-font.svg

@@ -3,7 +3,7 @@
 <svg xmlns="http://www.w3.org/2000/svg">
 <metadata>Generated by IcoMoon</metadata>
 <defs>
-<font id="icomoon" horiz-adv-x="1024">
+<font id="ascribe-font" horiz-adv-x="1024">
 <font-face units-per-em="1024" ascent="960" descent="-64" />
 <missing-glyph horiz-adv-x="1024" />
 <glyph unicode="&#x20;" horiz-adv-x="512" d="" />
@@ -12,9 +12,10 @@
 <glyph unicode="&#xe802;" glyph-name="search" d="M1021.1-36.711l-305.914 305.583c67.615 73.406 108.95 171.391 108.95 279.060 0 227.579-184.49 412.068-412.068 412.068s-412.068-184.489-412.068-412.068c0-227.578 184.489-412.068 412.068-412.068 107.625 0 205.576 41.3 278.972 108.866l305.927-305.597 24.133 24.156zM412.068 169.997c-208.394 0-377.935 169.541-377.935 377.935s169.541 377.935 377.935 377.935 377.935-169.54 377.935-377.935c0-208.394-169.541-377.935-377.935-377.935z" />
 <glyph unicode="&#xe803;" glyph-name="filter" d="M0 960l384.89-534.756 8.722-489.244 184.119 174.521 0.324 314.724 445.947 534.756h-1024zM551.839 447.106c-5.109-6.126-7.91-13.849-7.919-21.826l-0.308-300.068-117.253-111.141-7.341 411.782c-0.124 6.948-2.365 13.692-6.424 19.331l-345.97 480.683h884.467l-399.251-478.761z" />
 <glyph unicode="&#xe804;" glyph-name="add-white" d="M510.103 923.822c263.415 0 477.719-214.304 477.719-477.719s-214.303-477.718-477.719-477.718c-263.415 0-477.718 214.304-477.718 477.718s214.303 477.719 477.718 477.719zM510.103 957.955c-282.688 0-511.851-229.164-511.851-511.852s229.163-511.851 511.851-511.851 511.852 229.164 511.852 511.851-229.164 511.852-511.852 511.852v0zM796.444 459.378h-273.067v273.067h-34.133v-273.067h-261.689v-34.133h261.689v-261.689h34.133v261.689h273.067z" />
-<glyph unicode="&#xe805;" glyph-name="uniE805" d="M512.148 959.852c-282.688 0-511.851-229.164-511.851-511.852s229.164-511.851 511.851-511.851 511.852 229.163 511.852 511.851-229.164 511.852-511.852 511.852z" />
+<glyph unicode="&#xe805;" glyph-name="add-blue" d="M512.148 959.852c-282.688 0-511.851-229.164-511.851-511.852s229.164-511.851 511.851-511.851 511.852 229.163 511.852 511.851-229.164 511.852-511.852 511.852z" />
-<glyph unicode="&#xe806;" glyph-name="uniE806" d="M796.444 459.378h-273.067v273.067h-34.133v-273.067h-261.689v-34.133h261.689v-261.689h34.133v261.689h273.067z" />
+<glyph unicode="&#xe806;" glyph-name="add-blue2" d="M796.444 459.378h-273.067v273.067h-34.133v-273.067h-261.689v-34.133h261.689v-261.689h34.133v261.689h273.067z" />
 <glyph unicode="&#xe807;" glyph-name="icon" d="M550.306 782.458h-75.373l-249.184-613.64h90.453l62.951 159.627h262.477l62.974-159.627h95.755l-250.053 613.64zM403.098 400.255l107.305 274.897 107.28-274.897h-214.586zM1024 448c0 286.204-225.796 512-511.999 512s-512.001-225.796-512.001-512c0-286.204 225.797-512 512.001-512s511.999 225.797 511.999 512v0zM962.165 448c0-245.94-204.249-450.164-450.164-450.164-245.941 0-450.161 204.224-450.161 450.164s204.221 450.164 450.161 450.164c245.915 0 450.164-204.224 450.164-450.164v0z" />
 <glyph unicode="&#xe808;" glyph-name="logo" horiz-adv-x="4195" d="M499.718 326.19c0 109.528-24.641 157.448-61.607 198.517-38.336 41.077-95.832 71.191-191.673 71.191-95.832 0-171.135-36.957-212.212-64.34l27.382-52.031c13.695 10.954 88.998 54.764 187.571 54.764 99.943 0 177.978-57.505 177.978-173.876v-34.225l-173.876-6.843c-171.135-6.852-253.281-82.146-253.281-191.673s88.989-191.674 212.212-191.674c123.214 0 191.674 75.294 214.944 102.676v-88.989h72.562v376.503zM427.156 113.978c-30.114-47.92-98.573-116.371-201.258-116.371-102.676 0-154.707 61.607-154.707 130.066 0 68.45 42.448 125.955 175.246 132.798l180.719 10.955v-157.448zM1063.784 123.562c0 120.482-119.12 161.551-198.525 188.933-78.035 27.382-146.494 56.134-146.494 121.853s50.661 101.314 121.853 101.314c71.191 0 115.001-24.641 158.819-72.561l43.809 43.809c-49.291 56.134-106.795 88.989-199.887 88.989-93.1 0-193.044-54.764-193.044-169.765s119.112-156.078 173.876-175.246c54.764-19.168 168.394-47.92 168.394-130.066s-69.821-120.482-149.226-120.482c-79.413 0-142.391 39.707-183.46 99.952l-50.661-41.077c39.707-65.718 113.639-123.215 231.38-123.215s223.166 68.451 223.166 187.562v0zM1679.873 93.44c0 0-68.451-93.1-212.212-93.1-143.753 0-242.326 113.639-242.326 271.087s112.268 260.132 239.594 260.132c125.955 0 180.719-61.616 208.101-93.1l45.18 47.912c-13.687 17.798-82.146 109.528-250.548 109.528-167.024 0-317.628-132.798-317.628-328.583 0-194.406 139.65-331.315 310.785-331.315s236.853 82.146 260.133 109.528l-41.077 47.912zM2142.607 586.323c0 0-27.382 9.576-68.45 9.576-68.459 0-138.28-43.81-161.551-130.058v119.112h-71.2v-635.266h71.2v342.278c0 109.528 34.225 162.921 45.18 177.978 10.946 15.066 47.912 57.505 109.528 57.505 34.225 0 53.394-5.473 68.451-10.955l6.843 69.83zM2353.432 810.851c0 32.855-26.012 58.875-58.867 58.875-32.863 0-58.875-26.020-58.875-58.875s26.011-58.875 58.875-58.875c32.855 0 58.867 26.020 58.867 58.875v0zM2330.161 584.953h-71.191v-635.266h71.191v635.266zM3144.767 267.315c0 188.941-123.223 328.583-312.155 328.583-91.73 0-177.987-36.957-239.594-132.798v431.267h-71.191v-944.68h71.191v120.482c53.394-93.1 141.012-134.169 236.853-134.169 191.673 0 314.896 143.753 314.896 331.315v0zM3069.464 267.315c0-146.494-86.257-266.976-239.594-266.976-154.707 0-239.594 120.482-239.594 266.976 0 147.864 84.887 266.976 239.594 266.976 153.337 0 239.594-119.112 239.594-266.976v0zM3836.158 298.808c0 171.135-120.482 297.090-287.514 297.090-168.402 0-308.044-132.798-308.044-328.583 0-194.406 119.112-331.315 303.933-331.315 184.83 0 264.244 95.833 264.244 95.833l-34.234 50.661c0 0-79.405-82.154-223.158-82.154-143.761 0-228.64 99.952-235.491 250.548h516.154c0 0 4.111 27.382 4.111 47.92v0zM3318.633 312.495c4.111 88.998 68.459 221.796 225.899 221.796 157.449 0 219.065-139.65 219.065-221.796h-444.963zM4027.755 897.194h-26.663l-88.15-217.077h31.998l22.269 56.468h92.852l22.277-56.468h33.874l-88.457 217.077zM3975.68 761.989l37.96 97.245 37.951-97.245h-75.91zM4195.326 778.878c0 101.246-79.876 181.122-181.121 181.122s-181.122-79.876-181.122-181.122c0-101.245 79.876-181.122 181.122-181.122s181.121 79.876 181.121 181.122v0zM4173.452 778.878c0-87.002-72.254-159.247-159.247-159.247-87.002 0-159.246 72.245-159.246 159.247s72.244 159.247 159.246 159.247c86.993 0 159.247-72.245 159.247-159.247v0z" />
 <glyph unicode="&#xe809;" glyph-name="ok" horiz-adv-x="1348" d="M436.706-64l-406.588 399.059 112.941 105.412 293.647-293.647 768 760.471 105.412-105.412z" />
+<glyph unicode="&#xe810;" glyph-name="thin-cross" d="M1018.389 944.57l5.611 5.611-9.819 9.819-502.181-502.181-502.181 502.181-9.819-9.819 502.181-502.181-502.181-502.181 9.819-9.819 502.181 502.181 502.181-502.181 9.819 9.819-502.181 502.181z" />
 </font></defs></svg>

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
+                                    // found and createPublicContractAgreement is set to true, we create a
-                                    // new contract agreement
+                                    // new public contract agreement
-                                    if(createContractAgreement) {
+                                    this.actions.createContractAgreementFromPublicContract(issuer);
-                                        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) => {
+            }).catch(console.logGlobal);
-                console.logGlobal(err);
-            });
     }
 
     createContractAgreement(issuer, contract){
         return Q.Promise((resolve, reject) => {
-            OwnershipFetcher.createContractAgreement(issuer, contract).then(
+            OwnershipFetcher
-                (contractAgreement) => {
+                .createContractAgreement(issuer, contract).then(resolve)
-                    resolve(contractAgreement);
+                .catch((err) => {
-                }
+                    console.logGlobal(err);
-            ).catch((err) => {
+                    reject(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/global_notification_actions.js

@@ -2,13 +2,15 @@
 
 import { alt } from '../alt';
 
-
 class GlobalNotificationActions {
     constructor() {
         this.generateActions(
             'appendGlobalNotification',
+            'showNextGlobalNotification',
             'shiftGlobalNotification',
-            'emulateEmptyStore'
+            'cooldownGlobalNotifications',
+            'pauseGlobalNotifications',
+            'resumeGlobalNotifications'
         );
     }
 }

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/)) {
+        if (url.match(/https:\/\/.*\/media\/thumbnails\/ascribe_spiral.png/)) {
-            thumbnail = (
+            thumbnail = (<ThumbnailPlaceholder />);
-                <span className="ascribe-logo-circle">
-                    <span>A</span>
-                </span>
-            );
         } 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}
+                className={className}
-                piece={this.props.content}
+                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>}
+                    </div>
-                    badge={this.getGlyphicon()}>
+                }
+                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,
+        loadEdition: React.PropTypes.func
-        location: React.PropTypes.object
     },
 
     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}
+                            handleSuccess={this.props.loadEdition} />
-                            location={this.props.location}/>
                     </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"
+                                            type="text"
-                                             value={edition.bitcoin_id} />
+                                            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"
+                                            type="text"
-                                             value={edition.bitcoin_id} />
+                                            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,
+        actionPanelButtonListType: React.PropTypes.func,
-        location: React.PropTypes.object
+        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
+        // Every time we're entering the edition detail page,
-        // store as it will otherwise display wrong/old data once the user loads
+        // 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}
+                    loadEdition={this.loadEdition} />
-                    location={this.props.location}/>
             );
         } 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,
+        handleSuccess: React.PropTypes.func
-        location: React.PropTypes.object
     },
 
     getInitialState() {
@@ -86,8 +85,7 @@ let FurtherDetails = React.createClass({
                             overrideForm={true}
                             pieceId={this.props.pieceId}
                             otherData={this.props.otherData}
-                            multiple={true}
+                            multiple={true} />
-                            location={this.props.location}/>
                     </Form>
                 </Col>
             </Row>

js/components/ascribe_detail/further_details_fileuploader.js

@@ -10,12 +10,15 @@ 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';
+
 
 
 const { func, bool, number, object, arrayOf } = React.PropTypes;
 
 let FurtherDetailsFileuploader = React.createClass({
     propTypes: {
+        label: string,
         pieceId: number,
         otherData: arrayOf(object),
         editable: bool,
@@ -31,6 +34,7 @@ let FurtherDetailsFileuploader = React.createClass({
 
     getDefaultProps() {
         return {
+            label: getLangText('Additional files'),
             multiple: false
         };
     },
@@ -60,7 +64,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,
+        furtherDetailsType: React.PropTypes.func,
-        location: React.PropTypes.object
+        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}
+                            handleSuccess={this.loadPiece} />
-                            location={this.props.location}/>
                     </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) {
+        for (let refName in this.refs) {
-            data[this.refs[ref].props.name] = this.refs[ref].state.value;
+            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 && 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')}
+                    label={labels.message || getLangText('Personal Message')}
-                    editable={true}
+                    editable
-                    overrideForm={true}>
+                    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 InputDate from './input_date';
-import ContractAgreementListActions from '../../actions/contract_agreement_list_actions';
+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,
+        startDate: React.PropTypes.object,
-        enddate: 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,
+            showPassword: true
-            createPublicContractAgreement: true
         };
     },
 
     getInitialState() {
-        return ContractAgreementListStore.getState();
+        return {
-    },
+            email: this.props.email || ''
-
+        };
-    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);
     },
 
     onChange(state) {
         this.setState(state);
     },
 
-    getContractAgreementsOrCreatePublic(email){
+    handleEmailOnChange(event) {
-        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) {
         // event.target.value is the submitted email of the loanee
-        if(event && event.target && event.target.value && event.target.value.match(/.*@.*\..*/)) {
+        this.setState({
-            this.getContractAgreementsOrCreatePublic(event.target.value);
+            email: event && event.target && event.target.value || ''
-        } else {
+        });
-            ContractAgreementListActions.flushContractAgreementList();
-        }
     },
 
-    getContractAgreementId() {
+    handleReset() {
-        if (this.state.contractAgreementList && this.state.contractAgreementList.length > 0) {
+        this.handleEmailOnChange();
-            return {'contract_agreement_id': this.state.contractAgreementList[0].id};
-        }
-        return {};
     },
 
-    getContractCheckbox() {
+    getFormData() {
-        if(this.state.contractAgreementList && this.state.contractAgreementList.length > 0) {
+        return this.props.id;
-            // 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;
     },
 
     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}
+                onReset={this.handleReset}
-                handleSuccess={this.props.handleSuccess}
+                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})}>
+                <div className={classnames({'ascribe-form-header': true, 'hidden': !loanHeading})}>
-                    <h3>{this.props.loanHeading}</h3>
+                    <h3>{loanHeading}</h3>
                 </div>
                 <AclInformation aim={'form'} verbs={['acl_loan']}/>
                 <Property
                     name='loanee'
                     label={getLangText('Loanee Email')}
-                    editable={!this.props.email}
+                    editable={!defaultEmail}
-                    onChange={this.handleOnChange}
+                    onChange={this.handleEmailOnChange}
-                    overrideForm={!!this.props.email}>
+                    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}
+                    editable={!gallery}
-                    overrideForm={!!this.props.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}
+                    editable={!startDate}
-                    overrideForm={!!this.props.startdate}
+                    overrideForm={!!startDate}
-                    expanded={this.props.showStartDate}>
+                    expanded={showStartDate}>
                     <InputDate
-                        defaultValue={this.props.startdate}
+                        defaultValue={startDate}
                         placeholderText={getLangText('Loan start date')} />
                 </Property>
                 <Property
                     name='enddate'
-                    editable={!this.props.enddate}
+                    editable={!endDate}
-                    overrideForm={!!this.props.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}
+                    startDate={startDate}
-                    enddate={endDate}
+                    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

@@ -31,7 +31,7 @@ let RegisterPieceForm = React.createClass({
         isFineUploaderActive: React.PropTypes.bool,
         isFineUploaderEditable: React.PropTypes.bool,
         enableLocalHashing: React.PropTypes.bool,
-        onLoggedOut: React.PropTypes.func,
+        enableSeparateThumbnail: React.PropTypes.bool,
 
         // For this form to work with SlideContainer, we sometimes have to disable it
         disabled: React.PropTypes.bool,
@@ -46,7 +46,8 @@ let RegisterPieceForm = React.createClass({
         return {
             headerMessage: getLangText('Register your work'),
             submitMessage: getLangText('Register work'),
-            enableLocalHashing: true
+            enableLocalHashing: true,
+            enableSeparateThumbnail: true
         };
     },
 
@@ -89,6 +90,11 @@ let RegisterPieceForm = React.createClass({
         if (digitalWorkFile &&
             (digitalWorkFile.status === FileStatus.DELETED || digitalWorkFile.status === FileStatus.CANCELED)) {
             this.refs.form.refs.thumbnail_file.reset();
+
+            // Manually we need to set the ready state for `thumbnailKeyReady` back
+            // to `true` as `ReactS3Fineuploader`'s `reset` method triggers
+            // `setIsUploadReady` with `false`
+            this.refs.submitButton.setReadyStateForKey('thumbnailKeyReady', true);
             this.setState({ digitalWorkFile: null });
         } else {
             this.setState({ digitalWorkFile });
@@ -99,13 +105,18 @@ let RegisterPieceForm = React.createClass({
         const { digitalWorkFile } = this.state;
         const { fineuploader } = this.refs.digitalWorkFineUploader.refs;
 
-        fineuploader.setThumbnailForFileId(digitalWorkFile.id, thumbnailFile.url);
+        fineuploader.setThumbnailForFileId(
+            digitalWorkFile.id,
+            // if thumbnail was deleted, we delete it from the display as well
+            thumbnailFile.status !== FileStatus.DELETED ? thumbnailFile.url : null
+        );
     },
 
     isThumbnailDialogExpanded() {
+        const { enableSeparateThumbnail } = this.props;
         const { digitalWorkFile } = this.state;
 
-        if(digitalWorkFile) {
+        if(digitalWorkFile && enableSeparateThumbnail) {
             const { type: mimeType } = digitalWorkFile;
             const mimeSubType = mimeType && mimeType.split('/').length ? mimeType.split('/')[1]
                                                                        : 'unknown';
@@ -121,7 +132,6 @@ let RegisterPieceForm = React.createClass({
                 submitMessage,
                 headerMessage,
                 isFineUploaderActive,
-                onLoggedOut,
                 isFineUploaderEditable,
                 location,
                 children,
@@ -172,7 +182,6 @@ let RegisterPieceForm = React.createClass({
                         setIsUploadReady={this.setIsUploadReady('digitalWorkKeyReady')}
                         isReadyForFormSubmission={formSubmissionValidation.atLeastOneUploadedFile}
                         isFineUploaderActive={isFineUploaderActive}
-                        onLoggedOut={onLoggedOut}
                         disabled={!isFineUploaderEditable}
                         enableLocalHashing={hashLocally}
                         uploadMethod={location.query.method}
@@ -189,7 +198,7 @@ let RegisterPieceForm = React.createClass({
                             url: ApiUrls.blob_thumbnails
                         }}
                         handleChangedFile={this.handleChangedThumbnail}
-                        isReadyForFormSubmission={formSubmissionValidation.atLeastOneUploadedFile}
+                        isReadyForFormSubmission={formSubmissionValidation.fileOptional}
                         keyRoutine={{
                             url: AppConstants.serverUrl + 's3/key/',
                             fileClass: 'thumbnail'
@@ -203,7 +212,9 @@ let RegisterPieceForm = React.createClass({
                         fileClassToUpload={{
                             singular: getLangText('Select representative image'),
                             plural: getLangText('Select representative images')
-                        }} />
+                        }}
+                        isFineUploaderActive={isFineUploaderActive}
+                        disabled={!isFineUploaderEditable} />
                 </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

@@ -18,10 +18,10 @@ 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,
 
         // provided by Property
         disabled: bool,
+        onChange: func,
 
         // Props for ReactS3FineUploader
         areAssetsDownloadable: bool,
@@ -110,22 +110,22 @@ const InputFineUploader = React.createClass({
     },
 
     render() {
-        const { fileInputElement,
+        const {
-                keyRoutine,
+            areAssetsDownloadable,
-                createBlobRoutine,
+            createBlobRoutine,
-                validation,
+            enableLocalHashing,
-                setIsUploadReady,
+            disabled,
-                isReadyForFormSubmission,
+            fileClassToUpload,
-                isFineUploaderActive,
+            fileInputElement,
-                areAssetsDownloadable,
+            handleChangedFile,
-                onLoggedOut,
+            isFineUploaderActive,
-                enableLocalHashing,
+            isReadyForFormSubmission,
-                fileClassToUpload,
+            keyRoutine,
-                uploadMethod,
+            setIsUploadReady,
-                handleChangedFile,
+            setWarning,
-                setWarning,
+            showErrorPrompt,
-                showErrorPrompt,
+            uploadMethod,
-                disabled } = this.props;
+            validation } = this.props;
         let editable = isFineUploaderActive;
 
         // if disabled is actually set by property, we want to override
@@ -162,7 +162,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() {
@@ -76,16 +77,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.
+        // This handles case 1. and 3.
-        if(nextProps.expanded !== this.state.expanded && !this.props.checkboxLabel) {
+        if(nextProps.expanded !== this.props.expanded && nextProps.expanded !== this.state.expanded && !this.props.checkboxLabel) {
             this.setState({ expanded: nextProps.expanded });
         }
 
@@ -230,12 +239,19 @@ 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')
         if((this.state.expanded && this.props.checkboxLabel) || !this.props.checkboxLabel) {
             return ReactAddons.Children.map(this.props.children, (child) => {
-
                 // Since refs will be overriden 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-
@@ -252,7 +268,8 @@ const Property = React.createClass({
                     setWarning: this.setWarning,
                     disabled: !this.props.editable,
                     ref: 'input',
-                    name: this.props.name
+                    name: this.props.name,
+                    setExpanded: this.setExpanded
                 });
             });
         }
@@ -271,10 +288,6 @@ const Property = React.createClass({
         }
     },
 
-    handleCheckboxToggle() {
-        this.setState({expanded: !this.state.expanded});
-    },
-
     getCheckbox() {
         const { checkboxLabel } = this.props;
 
@@ -298,23 +311,20 @@ const Property = React.createClass({
 
     render() {
         let footer = null;
-        let style = this.props.style ? mergeOptions({}, 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;
-        style.cursor = !this.props.editable ? 'not-allowed' : null;
-
         return (
             <div
                 className={'ascribe-property-wrapper ' + this.getClassName()}
                 onClick={this.handleFocus}
-                style={style}>
+                style={this.props.style}>
                 {this.getCheckbox()}
                 <Panel
                     collapsible
@@ -322,7 +332,7 @@ const Property = React.createClass({
                     className="bs-custom-panel">
                     <div className={'ascribe-property ' + this.props.className}>
                         {this.getLabelAndErrors()}
-                        {this.renderChildren(style)}
+                        {this.renderChildren(this.props.style)}
                         {footer}
                     </div>
                 </Panel>

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
+        availableAcls: React.PropTypes.object.isRequired,
-    },
+        className: React.PropTypes.string,
-
+        selectedEditions: React.PropTypes.oneOfType([
-    getInitialState() {
+            React.PropTypes.object,
-        return mergeOptions(
+            React.PropTypes.array
-            EditionListStore.getState(),
+        ]),
-            UserStore.getState(),
+        children: React.PropTypes.oneOfType([
-            PieceListStore.getState()
+            React.PropTypes.arrayOf(React.PropTypes.element),
-        );
+            React.PropTypes.element
-    },
+        ])
-
-    
-
-    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;
     },
 
     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();
+        if (Object.keys(this.props.availableAcls).length) {
-        let availableAcls = getAvailableAcls(selectedEditions, (aclName) => aclName !== 'acl_view');
-
-        if(Object.keys(availableAcls).length > 0) {
             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
+                                {this.props.children}
-                                    availableAcls={availableAcls}
-                                    pieceOrEditions={selectedEditions}
-                                    handleSuccess={this.handleSuccess}
-                                    className="text-center ascribe-button-list collapse-group">
-                                    <DeleteButton
-                                        handleSuccess={this.handleSuccess}
-                                        editions={selectedEditions}/>
-                                </AclButtonList>
                             </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);
+        InjectInHeadUtils
-        } else {
+            .inject(AppConstants.facebook.sdkUrl)
-            // Parse() searches the children of the element we give it, not the element itself.
+            .then(() => { FB.XFBML.parse(this.refs.fbShareButton.getDOMNode().parentElement) });
-            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',
+            size: 'md'
-            color: 'loop'
         };
     },
 
     render() {
+        const { classNames: classes, color, size } = this.props;
+
         return (
             <div
-                className={
+                className={classNames('spinner-wrapper-' + size,
-                    classNames('spinner-wrapper-' + this.props.size,
+                                      color ? 'spinner-wrapper-' + color : null,
-                    'spinner-wrapper-' + this.props.color,
+                                      classes)}>
-                    this.props.classNames)}>
+                <div className='spinner-circle' />
-                    <div className={classNames('spinner-circle')}></div>
+                <div className='spinner-inner'>A</div>
-                    <div className={classNames('spinner-inner')}>A</div>
             </div>
         );
     }

js/components/ascribe_uploader/ascribe_file_drag_and_drop/file_drag_and_drop.js

@@ -23,7 +23,6 @@ let FileDragAndDrop = React.createClass({
 
         onDrop: React.PropTypes.func.isRequired,
         onDragOver: React.PropTypes.func,
-        onInactive: React.PropTypes.func,
         handleDeleteFile: React.PropTypes.func,
         handleCancelFile: React.PropTypes.func,
         handlePauseFile: React.PropTypes.func,
@@ -70,28 +69,21 @@ let FileDragAndDrop = React.createClass({
     handleDrop(event) {
         event.preventDefault();
         event.stopPropagation();
-        let files;
 
-        if(this.props.dropzoneInactive) {
+        if (!this.props.dropzoneInactive) {
-            // if there is a handle function for doing stuff
+            let files;
-            // when the dropzone is inactive, then call it
+
-            if(this.props.onInactive) {
+            // handle Drag and Drop
-                this.props.onInactive();
+            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(typeof this.props.onDrop === 'function' && files) {
-        if(event.dataTransfer && event.dataTransfer.files.length > 0) {
+              this.props.onDrop(files);
-            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);
-        }
-
     },
 
     handleDeleteFile(fileId) {
@@ -123,31 +115,25 @@ let FileDragAndDrop = React.createClass({
     },
 
     handleOnClick() {
-        let evt;
+        // do not propagate event if the drop zone's inactive,
-        // when multiple is set to false and the user already uploaded a piece,
+        // for example when multiple is set to false and the user already uploaded a piece
-        // do not propagate event
+        if (!this.props.dropzoneInactive) {
-        if(this.props.dropzoneInactive) {
+            let evt;
-            // if there is a handle function for doing stuff
+
-            // when the dropzone is inactive, then call it
+            try {
-            if(this.props.onInactive) {
+                evt = new MouseEvent('click', {
-                this.props.onInactive();
+                    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 {
+            this.refs.fileSelector.getDOMNode().dispatchEvent(evt);
-            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);
     },
 
     getErrorDialog(failedFiles) {

js/components/ascribe_uploader/ascribe_upload_button/upload_button.js

@@ -32,6 +32,20 @@ export default function UploadButton({ className = 'btn btn-default btn-sm' } =
             handleDeleteFile: func
         },
 
+        getInitialState() {
+            return {
+                disabled: this.getUploadingFiles().length !== 0
+            };
+        },
+
+        componentWillReceiveProps(nextProps) {
+            if(this.props.filesToUpload !== nextProps.filesToUpload) {
+                this.setState({
+                    disabled: this.getUploadingFiles(nextProps.filesToUpload).length !== 0
+                });
+            }
+        },
+
         handleDrop(event) {
             event.preventDefault();
             event.stopPropagation();
@@ -42,43 +56,62 @@ export default function UploadButton({ className = 'btn btn-default btn-sm' } =
             }
         },
 
-        getUploadingFiles() {
+        getUploadingFiles(filesToUpload = this.props.filesToUpload) {
-            return this.props.filesToUpload.filter((file) => file.status === FileStatus.UPLOADING);
+            return filesToUpload.filter((file) => file.status === FileStatus.UPLOADING);
         },
 
         getUploadedFile() {
             return this.props.filesToUpload.filter((file) => file.status === FileStatus.UPLOAD_SUCESSFUL)[0];
         },
 
+        clearSelection() {
+            this.refs.fileSelector.getDOMNode().value = '';
+        },
+
         handleOnClick() {
-            const uploadingFiles = this.getUploadingFiles();
+            if(!this.state.disabled) {
-            const uploadedFile = this.getUploadedFile();
+                let evt;
+                const uploadingFiles = this.getUploadingFiles();
+                const uploadedFile = this.getUploadedFile();
 
-            if(uploadedFile) {
+                this.clearSelection();
-                this.props.handleCancelFile(uploadedFile.id);
+                if(uploadingFiles.length) {
-            }
+                    this.props.handleCancelFile(uploadingFiles[0].id);
-            if(uploadingFiles.length === 0) {
+                } else if(uploadedFile && !uploadedFile.s3UrlSafe) {
-                // We only want the button to be clickable if there are no files currently uploading
+                    this.props.handleCancelFile(uploadedFile.id);
-
+                } else if(uploadedFile && uploadedFile.s3UrlSafe) {
-                // Firefox only recognizes the simulated mouse click if bubbles is set to true,
+                    this.props.handleDeleteFile(uploadedFile.id);
-                // but since Google Chrome propagates the event much further than needed, we
+                }
-                // need to stop propagation as soon as the event is created
-                var evt = new MouseEvent('click', {
-                    view: window,
-                    bubbles: true,
-                    cancelable: true
-                });
 
+                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);
+                }
                 evt.stopPropagation();
-                this.refs.fileinput.getDOMNode().dispatchEvent(evt);
+                this.refs.fileSelector.getDOMNode().dispatchEvent(evt);
             }
         },
 
+        onClickCancel() {
+            this.clearSelection();
+            const uploadingFile = this.getUploadingFiles()[0];
+            this.props.handleCancelFile(uploadingFile.id);
+        },
+
         onClickRemove() {
+            this.clearSelection();
             const uploadedFile = this.getUploadedFile();
             this.props.handleDeleteFile(uploadedFile.id);
         },
 
+
         getButtonLabel() {
             let { filesToUpload, fileClassToUpload } = this.props;
 
@@ -94,8 +127,16 @@ export default function UploadButton({ className = 'btn btn-default btn-sm' } =
 
         getUploadedFileLabel() {
             const uploadedFile = this.getUploadedFile();
+            const uploadingFiles = this.getUploadingFiles();
 
-            if(uploadedFile) {
+            if(uploadingFiles.length) {
+                return (
+                    <span>
+                        {' ' + truncateTextAtCharIndex(uploadingFiles[0].name, 40) + ' '}
+                        [<a onClick={this.onClickCancel}>{getLangText('cancel upload')}</a>]
+                    </span>
+                );
+            } else if(uploadedFile) {
                 return (
                     <span>
                         <span className='ascribe-icon icon-ascribe-ok'/>
@@ -111,8 +152,11 @@ export default function UploadButton({ className = 'btn btn-default btn-sm' } =
         },
 
         render() {
-            let { multiple,
+            const {
-                 allowedExtensions } = this.props;
+                multiple,
+                allowedExtensions } = this.props;
+            const { disabled } = this.state;
+
 
             /*
              * We do not want a button that submits here.
@@ -122,14 +166,19 @@ export default function UploadButton({ className = 'btn btn-default btn-sm' } =
              */
             return (
                 <div className="upload-button-wrapper">
-                    <a
+                    {/*
+                        The button needs to be of `type="button"` as it would
+                        otherwise submit the form its in.
+                    */}
+                    <button
+                        type="button"
                         onClick={this.handleOnClick}
                         className={className}
-                        disabled={this.getUploadingFiles().length !== 0}>
+                        disabled={disabled}>
                         {this.getButtonLabel()}
                         <input
                             multiple={multiple}
-                            ref="fileinput"
+                            ref="fileSelector"
                             type="file"
                             style={{
                                 display: 'none',
@@ -138,7 +187,7 @@ export default function UploadButton({ className = 'btn btn-default btn-sm' } =
                             }}
                             onChange={this.handleDrop}
                             accept={allowedExtensions}/>
-                   </a>
+                   </button>
                    {this.getUploadedFileLabel()}
                 </div>
             );

js/components/ascribe_uploader/react_s3_fine_uploader.js

@@ -47,7 +47,6 @@ const ReactS3FineUploader = React.createClass({
 
         handleChangedFile: func, // for when a file is dropped or selected, TODO: rename to onChangedFile
         submitFile: func, // for when a file has been successfully uploaded, TODO: rename to onSubmitFile
-        onInactive: func, // for when the user does something while the uploader's inactive
 
         // Handle form validation
         setIsUploadReady: func,     //TODO: rename to setIsUploaderValidated
@@ -317,7 +316,7 @@ const ReactS3FineUploader = React.createClass({
 
     // Cancel uploads and clear previously selected files on the input element
     cancelUploads(id) {
-        !!id ? this.state.uploader.cancel(id) : this.state.uploader.cancelAll();
+        typeof id !== 'undefined' ? this.state.uploader.cancel(id) : this.state.uploader.cancelAll();
 
         // Reset the file input element to clear the previously selected files so that
         // the user can reselect them again.
@@ -425,11 +424,13 @@ const ReactS3FineUploader = React.createClass({
 
         if(fileId < filesToUpload.length) {
             const changeSet = { $set: url };
-            const newFilesToUpload = React.addons.update(filesToUpload, { [fileId]: { thumbnailUrl: changeSet } });
+            const newFilesToUpload = React.addons.update(filesToUpload, {
+                [fileId]: { thumbnailUrl: changeSet }
+            });
 
             this.setState({ filesToUpload: newFilesToUpload });
         } else {
-            throw new Error("You're accessing an index out of range of filesToUpload");
+            throw new Error('Accessing an index out of range of filesToUpload');
         }
     },
 
@@ -1052,13 +1053,12 @@ const ReactS3FineUploader = React.createClass({
     render() {
         const { errorState: { errorClass }, filesToUpload, uploadInProgress } = this.state;
         const {
-            multiple,
             areAssetsDownloadable,
             areAssetsEditable,
-            onInactive,
             enableLocalHashing,
             fileClassToUpload,
             fileInputElement: FileInputElement,
+            multiple,
             showErrorPrompt,
             uploadMethod } = this.props;
 
@@ -1069,7 +1069,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/footer.js

@@ -11,6 +11,7 @@ let Footer = React.createClass({
                 <p className="ascribe-sub-sub-statement">
                   <br />
                   <a href="http://docs.ascribe.apiary.io/" target="_blank">api</a> |
+                  <a href="https://www.ascribe.io/faq/" target="_blank"> {getLangText('faq')}</a> |
                   <a href="https://www.ascribe.io/imprint/" target="_blank"> {getLangText('imprint')}</a> |
                   <a href="https://www.ascribe.io/terms/" target="_blank"> {getLangText('terms of service')}</a> |
                   <a href="https://www.ascribe.io/privacy/" target="_blank"> {getLangText('privacy')}</a>

js/components/global_notification.js

@@ -1,7 +1,9 @@
 'use strict';
 
 import React from 'react';
+import classNames from 'classnames';
 
+import GlobalNotificationActions from '../actions/global_notification_actions';
 import GlobalNotificationStore from '../stores/global_notification_store';
 
 import Row from 'react-bootstrap/lib/Row';
@@ -9,14 +11,18 @@ import Col from 'react-bootstrap/lib/Col';
 
 import { mergeOptions } from '../utils/general_utils';
 
+const MAX_NOTIFICATION_BUBBLE_CONTAINER_WIDTH = 768;
+
 let GlobalNotification = React.createClass({
 
     getInitialState() {
+        const notificationStore = GlobalNotificationStore.getState();
+
         return mergeOptions(
             {
                 containerWidth: 0
             },
-            this.extractFirstElem(GlobalNotificationStore.getState().notificationQue)
+            notificationStore
         );
     },
 
@@ -36,35 +42,8 @@ let GlobalNotification = React.createClass({
         window.removeEventListener('resize', this.handleContainerResize);
     },
 
-    extractFirstElem(l) {
-        if(l.length > 0) {
-            return {
-                show: true,
-                message: l[0]
-            };
-        } else {
-            return {
-                show: false,
-                message: ''
-            };
-        }
-    },
-
     onChange(state) {
-        let notification = this.extractFirstElem(state.notificationQue);
+        this.setState(state);
-
-        // error handling for notifications
-        if(notification.message && notification.type === 'danger') {
-            console.logGlobal(new Error(notification.message.message));
-        }
-
-        if(notification.show) {
-            this.setState(notification);
-        } else {
-            this.setState({
-                show: false
-            });
-        }
     },
 
     handleContainerResize() {
@@ -73,32 +52,31 @@ let GlobalNotification = React.createClass({
         });
     },
 
-    render() {
+    renderNotification() {
-        let notificationClass = 'ascribe-global-notification';
+        const {
-        let textClass;
+            notificationQueue: [notification],
+            notificationStatus,
+            notificationsPaused,
+            containerWidth } = this.state;
 
-        if(this.state.containerWidth > 768) {
+        const notificationClasses = [];
-            notificationClass = 'ascribe-global-notification-bubble';
-
-            if(this.state.show) {
-                notificationClass += ' ascribe-global-notification-bubble-on';
-            } else {
-                notificationClass += ' ascribe-global-notification-bubble-off';
-            }
 
+        if (this.state.containerWidth > 768) {
+            notificationClasses.push('ascribe-global-notification-bubble');
+            notificationClasses.push(notificationStatus === 'show' ? 'ascribe-global-notification-bubble-on'
+                                                                   : 'ascribe-global-notification-bubble-off');
         } else {
-            notificationClass = 'ascribe-global-notification';
+            notificationClasses.push('ascribe-global-notification');
-
+            notificationClasses.push(notificationStatus === 'show' ? 'ascribe-global-notification-on'
-            if(this.state.show) {
+                                                                   : 'ascribe-global-notification-off');
-                notificationClass += ' ascribe-global-notification-on';
-            } else {
-                notificationClass += ' ascribe-global-notification-off';
-            }
-
         }
 
-        if(this.state.message) {
+        let textClass;
-            switch(this.state.message.type) {
+        let message;
+        if (notification && !notificationsPaused) {
+            message = notification.message;
+
+            switch(notification.type) {
                 case 'success':
                     textClass = 'ascribe-global-notification-success';
                     break;
@@ -106,18 +84,23 @@ let GlobalNotification = React.createClass({
                     textClass = 'ascribe-global-notification-danger';
                     break;
                 default:
-                    console.warn('Could not find a matching type in global_notification.js');
+                    console.warn('Could not find a matching notification type in global_notification.js');
             }
         }
-        
 
+        return (
+            <div className={classNames(...notificationClasses)}>
+                <div className={textClass}>{message}</div>
+            </div>
+        );
+    },
+
+    render() {
         return (
             <div ref="notificationWrapper">
                 <Row>
                     <Col>
-                        <div className={notificationClass}>
+                        {this.renderNotification()}
-                            <div className={textClass}>{this.state.message.message}</div>
-                        </div>
                     </Col>
                 </Row>
             </div>
@@ -125,4 +108,4 @@ let GlobalNotification = React.createClass({
     }
 });
 
-export default GlobalNotification;
+export default GlobalNotification;

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}>
+                    fixedTop={true}
-                    <CollapsibleNav eventKey={0}>
+                    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(
+        const pieceListStore = PieceListStore.getState();
-            PieceListStore.getState(),
+        const stores = mergeOptions(
-            EditionListStore.getState()
+            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;
+        let page = this.props.location.query.page || 1;
-        if (this.state.pieceList.length === 0 || this.state.page !== page){
+        if (this.props.canLoadPieceList && (this.state.pieceList.length === 0 || this.state.page !== page)) {
-            PieceListActions.fetchPieceList(page, this.state.pageSize, this.state.search,
+            this.loadPieceList({ page });
-                                            orderBy, this.state.orderAsc, this.state.filterBy);
+        }
+    },
+
+    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.loadPieceList({ page });
-                                            this.state.orderBy, this.state.orderAsc,
-                                            this.state.filterBy);
         };
     },
 
@@ -116,29 +170,35 @@ let PieceList = React.createClass({
     },
 
     searchFor(searchTerm) {
-         PieceListActions.fetchPieceList(1, this.state.pageSize, searchTerm, this.state.orderBy,
+        this.loadPieceList({
-                                        this.state.orderAsc, this.state.filterBy);
+            page: 1,
-         this.history.pushState(null, this.props.location.pathname, {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
+        this.setState({
-        PieceListActions.fetchPieceList(1, this.state.pageSize, this.state.search,
+            isFilterDirty: true
-                                        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
-                                        });
-                                    }
 
-                                });
+        // 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'/>;
+        const {
-        let AccordionListItemType = this.props.accordionListItemType;
+            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}
+                    filterParams={filterParams}
-                    orderParams={this.props.orderParams}
+                    orderParams={orderParams}
                     filterBy={this.state.filterBy}
                     orderBy={this.state.orderBy}
                     applyFilterBy={this.applyFilterBy}
                     applyOrderBy={this.applyOrderBy}>
-                    {this.props.customSubmitButton ?
+                    {customSubmitButton ?
-                        this.props.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(),
+            PieceListStore.getState()
-            {
+        );
-                selectedLicense: 0,
-                isFineUploaderActive: false
-            });
     },
 
     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/portfolioreview/components/pr_register_piece.js

@@ -63,6 +63,11 @@ const PRRegisterPiece = React.createClass({
                     <div className="register-piece--info">
                         <h1>Portfolio Review</h1>
                         <h2>{getLangText('Submission closing on %s', ' 22 Dec 2015')}</h2>
+                        <p>For more information, visit:&nbsp;
+                            <a href="http://www.portfolio-review.de/submission/" target="_blank">
+                                portfolio-review.de
+                            </a>
+                        </p>
                         <p style={{marginTop: '1em'}}>
                             {getLangText("You're submitting as %s. ", currentUser.email)}
                             <Link to="/logout">{getLangText('Change account?')}</Link>

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

@@ -51,8 +51,7 @@ import { setDocumentTitle } from '../../../../../../utils/dom_utils';
  */
 let PieceContainer = React.createClass({
     propTypes: {
-        params: React.PropTypes.object,
+        params: React.PropTypes.object
-        location: React.PropTypes.object
     },
 
     getInitialState() {
@@ -111,7 +110,7 @@ let PieceContainer = React.createClass({
     },
 
     render() {
-        if(this.state.piece && this.state.piece.title) {
+        if(this.state.piece && this.state.piece.id) {
             /*
             
                 This really needs a refactor!
@@ -162,7 +161,7 @@ let PieceContainer = React.createClass({
                             piece={this.state.piece}
                             currentUser={this.state.currentUser}/>
                     }>
-                    <PrizePieceDetails piece={this.state.piece} location={this.props.location}/>
+                    <PrizePieceDetails piece={this.state.piece} />
                 </Piece>
             );
         } else {
@@ -292,8 +291,8 @@ let PrizePieceRatings = React.createClass({
                         url={ApiUrls.ownership_loans_pieces_request}
                         email={this.props.currentUser.email}
                         gallery={this.props.piece.prize.name}
-                        startdate={today}
+                        startDate={today}
-                        enddate={endDate}
+                        endDate={endDate}
                         showPersonalMessage={true}
                         showPassword={false}
                         handleSuccess={this.handleLoanSuccess} />
@@ -426,8 +425,7 @@ let PrizePieceRatings = React.createClass({
 
 let PrizePieceDetails = React.createClass({
     propTypes: {
-        piece: React.PropTypes.object,
+        piece: React.PropTypes.object
-        location: React.PropTypes.object
     },
 
     render() {
@@ -464,8 +462,7 @@ let PrizePieceDetails = React.createClass({
                             overrideForm={true}
                             pieceId={this.props.piece.id}
                             otherData={this.props.piece.other_data}
-                            multiple={true}
+                            multiple={true} />
-                            location={location}/>
                     </Form>
                 </CollapsibleParagraph>
             );

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/ascribe_detail/wallet_piece_container.js

@@ -30,7 +30,7 @@ let WalletPieceContainer = React.createClass({
 
     
     render() {
-        if(this.props.piece && this.props.piece.title) {
+        if(this.props.piece && this.props.piece.id) {
             return (
                 <Piece
                     piece={this.props.piece}

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

@@ -89,7 +89,7 @@ let CylandPieceContainer = React.createClass({
     },
 
     render() {
-        if(this.state.piece && this.state.piece.title) {
+        if(this.state.piece && this.state.piece.id) {
             setDocumentTitle([this.state.piece.artist_name, this.state.piece.title].join(', '));
 
             return (

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}
+                                startDate={today}
-                                enddate={datetimeWhenWeAllWillBeFlyingCoolHoverboardsAndDinosaursWillLiveAgain}
+                                endDate={datetimeWhenWeAllWillBeFlyingCoolHoverboardsAndDinosaursWillLiveAgain}
                                 showStartDate={false}
                                 showEndDate={false}
                                 showPersonalMessage={false}

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

@@ -123,7 +123,7 @@ let IkonotvPieceContainer = React.createClass({
             );
         }
 
-        if(this.state.piece && this.state.piece.title) {
+        if(this.state.piece && this.state.piece.id) {
             setDocumentTitle([this.state.piece.artist_name, this.state.piece.title].join(', '));
             return (
                 <WalletPieceContainer

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();
+            let endDate = new Moment();
-            enddate.add(2, 'years');
+            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"
+                                email={whitelabel.user}
-                                startdate={today}
+                                startDate={today}
-                                enddate={enddate}
+                                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,235 @@
+'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);
+    },
+
+    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')}
+                        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 {
+            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}
+                                enableSeparateThumbnail={false}
+                                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/global_notification_store.js

@@ -4,36 +4,63 @@ import { alt } from '../alt';
 
 import GlobalNotificationActions from '../actions/global_notification_actions';
 
+const GLOBAL_NOTIFICATION_COOLDOWN = 400;
+
 class GlobalNotificationStore {
     constructor() {
-        this.notificationQue = [];
+        this.notificationQueue = [];
+        this.notificationStatus = 'ready';
+        this.notificationsPaused = false;
 
         this.bindActions(GlobalNotificationActions);
     }
 
     onAppendGlobalNotification(newNotification) {
-        let notificationDelay = 0;
+        this.notificationQueue.push(newNotification);
-        for(let i = 0; i < this.notificationQue.length; i++) {
-            notificationDelay += this.notificationQue[i].dismissAfter;
-        }
 
-        this.notificationQue.push(newNotification);
+        if (!this.notificationsPaused && this.notificationStatus === 'ready') {
-        setTimeout(GlobalNotificationActions.emulateEmptyStore, notificationDelay + newNotification.dismissAfter);
+            this.showNextNotification();
+        }
     }
 
-    onEmulateEmptyStore() {
+    showNextNotification() {
-        let actualNotificitionQue = this.notificationQue.slice();
+        this.notificationStatus = 'show';
 
-        this.notificationQue = [];
+        setTimeout(GlobalNotificationActions.cooldownGlobalNotifications, this.notificationQueue[0].dismissAfter);
+    }
 
-        setTimeout(() => {
+    onCooldownGlobalNotifications() {
-            this.notificationQue = actualNotificitionQue.slice();
+        // When still paused on cooldown, don't shift the queue so we can repeat the current notification.
-            GlobalNotificationActions.shiftGlobalNotification();
+        if (!this.notificationsPaused) {
-        }, 400);
+            this.notificationStatus = 'cooldown';
+
+            // Leave some time between consecutive notifications
+            setTimeout(GlobalNotificationActions.shiftGlobalNotification, GLOBAL_NOTIFICATION_COOLDOWN);
+        } else {
+            this.notificationStatus = 'ready';
+        }
     }
 
     onShiftGlobalNotification() {
-        this.notificationQue.shift();
+        this.notificationQueue.shift();
+
+        if (!this.notificationsPaused && this.notificationQueue.length > 0) {
+            this.showNextNotification();
+        } else {
+            this.notificationStatus = 'ready';
+        }
+    }
+
+    onPauseGlobalNotifications() {
+        this.notificationsPaused = true;
+    }
+
+    onResumeGlobalNotifications() {
+        this.notificationsPaused = false;
+
+        if (this.notificationStatus === 'ready' && this.notificationQueue.length > 0) {
+            this.showNextNotification();
+        }
     }
 }
 

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 only one edition has been selected, its actions are available
-    // If more than one editions have been selected, their acl properties are intersected
+    // If more than one editions have been selected, intersect all their acl properties
-    if(editionsCopy.length >= 1) {
+    if (editionsCopy.length >= 1) {
         availableAcls = editionsCopy[0].acl;
-    }
+
-    if(editionsCopy.length >= 2) {
+        if (editionsCopy.length >= 2) {
-        for(let i = 1; i < editionsCopy.length; i++) {
+            for (let i = 1; i < editionsCopy.length; i++) {
-            availableAcls = intersectLists(availableAcls, editionsCopy[i].acl);
+                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

@@ -12,7 +12,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/file_utils.js

@@ -89,11 +89,16 @@ export function computeHashOfFile(file) {
 /**
  * Extracts a file extension from a string, by splitting by dot and taking
  * the last substring
+ *
+ * If a file without an extension is submitted (file), then
+ * this method just returns an empty string.
  * @param  {string} s file's name + extension
  * @return {string}   file extension
  *
  * Via: http://stackoverflow.com/a/190878/1263876
  */
 export function extractFileExtensionFromString(s) {
-    return s.split('.').pop();
+    const explodedFileName = s.split('.');
+    return explodedFileName.length > 1 ? explodedFileName.pop()
+                                       : '';
 }