Merge pull request #2 from ascribe/AD-1149-implement-lumenus-the-lumen-mark

Implement marketplace wallets

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,7 +34,7 @@ class ContractAgreementListActions {
         );
     }
 
-    fetchAvailableContractAgreementList(issuer, createContractAgreement) {
+    fetchAvailableContractAgreementList(issuer, createPublicContractAgreement) {
         return Q.Promise((resolve, reject) => {
             OwnershipFetcher.fetchContractAgreementList(issuer, true, null)
                 .then((acceptedContractAgreementList) => {
@@ -52,14 +51,12 @@ class ContractAgreementListActions {
                             .then((pendingContractAgreementList) => {
                                 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);
                                 }
-                                }
                             })
                             .catch((err) => {
                                 console.logGlobal(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,18 +87,14 @@ 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) => {
-                }
-            ).catch((err) => {
                     console.logGlobal(err);
                     reject(err);
                 });

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 {

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,7 +42,15 @@ 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;
 
@@ -42,11 +58,7 @@ let AccordionListItemPiece = React.createClass({
         // for not use the annoying ascribe_spiral.png, we're matching the url against
         // this name and replace it with a CSS version of the new logo.
         if (url.match(/https:\/\/.*\/media\/thumbnails\/ascribe_spiral.png/)) {
-            thumbnail = (
+            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/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_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,12 +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
     },
 
     mixins: [History],
 
+    getDefaultProps() {
+        return {
+            furtherDetailsType: FurtherDetails
+        };
+    },
+
     getInitialState() {
         return UserStore.getState();
     },
@@ -74,6 +82,8 @@ let Edition = React.createClass({
     },
 
     render() {
+        let FurtherDetailsType = this.props.furtherDetailsType;
+
         return (
             <Row>
                 <Col md={6}>
@@ -89,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}/>
@@ -150,7 +161,7 @@ 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}
@@ -171,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
@@ -183,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 = (
@@ -195,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
@@ -214,6 +226,7 @@ let EditionSummary = React.createClass({
                     <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]}
@@ -119,10 +129,11 @@ let EditionActionPanel = React.createClass({
                                     isInline={true}>
                                     <Property
                                         name="bitcoin_id"
-                                        hidden={true}>
+                                        expanded={false}>
                                         <input
                                             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')}
@@ -139,10 +150,11 @@ let EditionActionPanel = React.createClass({
                                     isInline={true}>
                                     <Property
                                         name="bitcoin_id"
-                                        hidden={true}>
+                                        expanded={false}>
                                         <input
                                             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

@@ -17,6 +17,8 @@ import { setDocumentTitle } from '../../utils/dom_utils';
  */
 let EditionContainer = React.createClass({
     propTypes: {
+        actionPanelButtonListType: React.PropTypes.func,
+        furtherDetailsType: React.PropTypes.func,
         params: React.PropTypes.object
     },
 
@@ -71,6 +73,8 @@ let EditionContainer = React.createClass({
 
             return (
                 <Edition
+                    actionPanelButtonListType={this.props.actionPanelButtonListType}
+                    furtherDetailsType={this.props.furtherDetailsType}
                     edition={this.state.edition}
                     loadEdition={this.loadEdition} />
             );

js/components/ascribe_detail/further_details_fileuploader.js

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

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

@@ -50,11 +50,18 @@ import { setDocumentTitle } from '../../utils/dom_utils';
  */
 let PieceContainer = React.createClass({
     propTypes: {
+        furtherDetailsType: React.PropTypes.func,
         params: React.PropTypes.object
     },
 
     mixins: [History],
 
+    getDefaultProps() {
+        return {
+            furtherDetailsType: FurtherDetails
+        };
+    },
+
     getInitialState() {
         return mergeOptions(
             UserStore.getState(),
@@ -226,6 +233,7 @@ let PieceContainer = React.createClass({
 
     render() {
         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 (
@@ -286,7 +294,7 @@ 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}

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.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,15 @@ let Form = React.createClass({
     renderChildren() {
         return ReactAddons.Children.map(this.props.children, (child, i) => {
             if (child) {
-                return ReactAddons.addons.cloneWithProps(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-
+                // function before overwriting it.
+                if(typeof child.ref === 'function' && this.refs[child.props.name]) {
+                    child.ref(this.refs[child.props.name]);
+                }
+
+                return React.cloneElement(child, {
                     handleChange: this.handleChangeChild,
                     ref: child.props.name,
                     key: i,

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
     },
 
+    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_create_contract.js

@@ -91,14 +91,14 @@ let CreateContractForm = React.createClass({
                 <Property
                     name='name'
                     label={getLangText('Contract name')}
-                    hidden={true}>
+                    expanded={false}>
                     <input
                         type="text"
                         value={this.state.contractName}/>
                 </Property>
                 <Property
                     name="is_public"
-                    hidden={true}>
+                    expanded={false}>
                     <input
                         type="checkbox"
                         value={this.props.isPublic} />

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();
+        // event.target.value is the submitted email of the loanee
-        if (email) {
+        this.setState({
-            // fetch the available contractagreements (pending/accepted)
+            email: event && event.target && event.target.value || ''
-            ContractAgreementListActions.fetchAvailableContractAgreementList(email, true);
+        });
-        }
+    },
+
+    handleReset() {
+        this.handleEmailOnChange();
     },
 
     getFormData() {
-        return mergeOptions(
+        return this.props.id;
-            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.getContractAgreementsOrCreatePublic(event.target.value);
-        } else {
-            ContractAgreementListActions.flushContractAgreementList();
-        }
-    },
-
-    getContractAgreementId() {
-        if (this.state.contractAgreementList && this.state.contractAgreementList.length > 0) {
-            return {'contract_agreement_id': this.state.contractAgreementList[0].id};
-        }
-        return {};
-    },
-
-    getContractCheckbox() {
-        if(this.state.contractAgreementList && this.state.contractAgreementList.length > 0) {
-            // we need to define a key on the InputCheckboxes as otherwise
-            // react is not rerendering them on a store switch and is keeping
-            // the default value of the component (which is in that case true)
-            let contractAgreement = this.state.contractAgreementList[0];
-            let contract = contractAgreement.contract;
-
-            if(contractAgreement.datetime_accepted) {
-                return (
-                    <Property
-                        name="terms"
-                        label={getLangText('Loan Contract')}
-                        hidden={false}
-                        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}}
-                    hidden={true}>
-                    <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}
-                    hidden={!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')}
-                    hidden={!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}
-                    hidden={!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')}
-                    hidden={!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}/>

js/components/ascribe_forms/form_register_piece.js

@@ -26,7 +26,6 @@ let RegisterPieceForm = React.createClass({
         isFineUploaderActive: React.PropTypes.bool,
         isFineUploaderEditable: React.PropTypes.bool,
         enableLocalHashing: React.PropTypes.bool,
-        onLoggedOut: React.PropTypes.func,
 
         // For this form to work with SlideContainer, we sometimes have to disable it
         disabled: React.PropTypes.bool,
@@ -116,7 +115,6 @@ let RegisterPieceForm = React.createClass({
                         setIsUploadReady={this.setIsUploadReady}
                         isReadyForFormSubmission={formSubmissionValidation.atLeastOneUploadedFile}
                         isFineUploaderActive={this.props.isFineUploaderActive}
-                        onLoggedOut={this.props.onLoggedOut}
                         disabled={!this.props.isFineUploaderEditable}
                         enableLocalHashing={enableLocalHashing}
                         uploadMethod={this.props.location.query.method} />

js/components/ascribe_forms/form_send_contract_agreement.js

@@ -21,7 +21,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
     },
@@ -55,7 +55,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>

js/components/ascribe_forms/input_contract_agreement_checkbox.js

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

js/components/ascribe_forms/input_fineuploader.js

@@ -38,7 +38,6 @@ const InputFineUploader = React.createClass({
         // a user is actually not logged in already to prevent him from droping files
         // before login in
         isFineUploaderActive: bool,
-        onLoggedOut: func,
 
         enableLocalHashing: bool,
         uploadMethod: string,
@@ -51,7 +50,10 @@ const InputFineUploader = React.createClass({
         fileClassToUpload: shape({
             singular: string,
             plural: string
-        })
+        }),
+
+        // Provided by `Property`
+        onChange: React.PropTypes.func
     },
 
     getDefaultProps() {
@@ -94,23 +96,26 @@ const InputFineUploader = React.createClass({
     },
 
     render() {
-        const { fileInputElement,
+        const {
-                keyRoutine,
-                createBlobRoutine,
-                validation,
-                setIsUploadReady,
-                isReadyForFormSubmission,
             areAssetsDownloadable,
-                onLoggedOut,
             enableLocalHashing,
+            createBlobRoutine,
+            disabled,
             fileClassToUpload,
-                location } = this.props;
+            fileInputElement,
-        let editable = this.props.isFineUploaderActive;
+            isFineUploaderActive,
+            isReadyForFormSubmission,
+            keyRoutine,
+            setIsUploadReady,
+            uploadMethod,
+            validation } = this.props;
+
+        let editable = isFineUploaderActive;
 
         // if disabled is actually set by property, we want to override
         // isFineUploaderActive
-        if(typeof this.props.disabled !== 'undefined') {
+        if(typeof disabled !== 'undefined') {
-            editable = !this.props.disabled;
+            editable = !disabled;
         }
 
         return (
@@ -139,10 +144,9 @@ const InputFineUploader = React.createClass({
                        'X-CSRFToken': getCookie(AppConstants.csrftoken)
                     }
                 }}
-                onInactive={this.props.onLoggedOut}
+                enableLocalHashing={enableLocalHashing}
-                enableLocalHashing={this.props.enableLocalHashing}
+                uploadMethod={uploadMethod}
-                uploadMethod={this.props.uploadMethod}
+                fileClassToUpload={fileClassToUpload} />
-                fileClassToUpload={this.props.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
     },

js/components/ascribe_forms/property.js

@@ -3,58 +3,69 @@
 import React from 'react';
 import ReactAddons from 'react/addons';
 
-import OverlayTrigger from 'react-bootstrap/lib/OverlayTrigger';
+import Panel from 'react-bootstrap/lib/Panel';
-import Tooltip from 'react-bootstrap/lib/Tooltip';
 
 import AppConstants from '../../constants/application_constants';
 
 import { mergeOptions } from '../../utils/general_utils';
 
 
-let Property = React.createClass({
+const { bool, element, string, oneOfType, func, object, arrayOf } = React.PropTypes;
-    propTypes: {
-        hidden: React.PropTypes.bool,
 
-        editable: React.PropTypes.bool,
+const Property = React.createClass({
+    propTypes: {
+        editable: bool,
 
         // If we want Form to have a different value for disabled as Property has one for
         // editable, we need to set overrideForm to true, as it will then override Form's
         // disabled value for individual Properties
-        overrideForm: React.PropTypes.bool,
+        overrideForm: bool,
 
-        tooltip: React.PropTypes.element,
+        label: string,
-        label: React.PropTypes.string,
+        value: oneOfType([
-        value: React.PropTypes.oneOfType([
+            string,
-            React.PropTypes.string,
+            element
-            React.PropTypes.element
         ]),
-        footer: React.PropTypes.element,
+        footer: element,
-        handleChange: React.PropTypes.func,
+        handleChange: func,
-        ignoreFocus: React.PropTypes.bool,
+        ignoreFocus: bool,
-        name: React.PropTypes.string.isRequired,
+        name: string.isRequired,
-        className: React.PropTypes.string,
+        className: string,
 
-        onClick: React.PropTypes.func,
+        onClick: func,
-        onChange: React.PropTypes.func,
+        onChange: func,
-        onBlur: React.PropTypes.func,
+        onBlur: func,
 
-        children: React.PropTypes.oneOfType([
+        children: oneOfType([
-            React.PropTypes.arrayOf(React.PropTypes.element),
+            arrayOf(element),
-            React.PropTypes.element
+            element
         ]),
-        style: React.PropTypes.object
+        style: object,
+        expanded: bool,
+        checkboxLabel: string,
+        autoFocus: bool
     },
 
     getDefaultProps() {
         return {
             editable: true,
-            hidden: false,
+            expanded: true,
             className: ''
         };
     },
 
     getInitialState() {
+        const { expanded, ignoreFocus, checkboxLabel } = this.props;
+
         return {
+            // We're mirroring expanded here as a state
+            // React's docs do NOT consider this an antipattern as long as it's
+            // not a "source of truth"-duplication
+            expanded,
+
+            // When a checkboxLabel is defined in the props, we want to set
+            // `ignoreFocus` to true
+            ignoreFocus: ignoreFocus || checkboxLabel,
             // Please don't confuse initialValue with react's defaultValue.
             // initialValue is set by us to ensure that a user can reset a specific
             // property (after editing) to its initial value
@@ -65,9 +76,27 @@ let Property = React.createClass({
         };
     },
 
-    componentWillReceiveProps() {
+    componentDidMount() {
+        if(this.props.autoFocus) {
+            this.handleFocus();
+        }
+    },
+
+    componentWillReceiveProps(nextProps) {
         let childInput = this.refs.input;
 
+        // 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. and 3.
+        if(nextProps.expanded !== this.props.expanded && nextProps.expanded !== this.state.expanded && !this.props.checkboxLabel) {
+            this.setState({ expanded: nextProps.expanded });
+        }
+
         // In order to set this.state.value from another component
         // the state of value should only be set if its not undefined and
         // actually references something
@@ -80,13 +109,13 @@ let Property = React.createClass({
         // from native HTML elements.
         // To enable developers to create input elements, they can expose a property called value
         // in their state that will be picked up by property.js
-        } else if(childInput.state && typeof childInput.state.value !== 'undefined') {
+        } else if(childInput && childInput.state && typeof childInput.state.value !== 'undefined') {
             this.setState({
                 value: childInput.state.value
             });
         }
 
-        if(!this.state.initialValue && childInput.props.defaultValue) {
+        if(!this.state.initialValue && childInput && childInput.props.defaultValue) {
             this.setState({
                 initialValue: childInput.props.defaultValue
             });
@@ -138,7 +167,7 @@ let Property = React.createClass({
     handleFocus() {
         // if ignoreFocus (bool) is defined, then just ignore focusing on
         // the property and input
-        if(this.props.ignoreFocus) {
+        if(this.state.ignoreFocus) {
             return;
         }
 
@@ -190,7 +219,7 @@ let Property = React.createClass({
     },
 
     getClassName() {
-        if(this.props.hidden){
+        if(!this.state.expanded && !this.props.checkboxLabel){
             return 'is-hidden';
         }
         if(!this.props.editable){
@@ -206,39 +235,91 @@ let 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) => {
-            return ReactAddons.addons.cloneWithProps(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-
+                // function before overriding it.
+                if(typeof child.ref === 'function' && this.refs.input) {
+                    child.ref(this.refs.input);
+                }
+
+                return React.cloneElement(child, {
                     style,
                     onChange: this.handleChange,
                     onFocus: this.handleFocus,
                     onBlur: this.handleBlur,
                     disabled: !this.props.editable,
                     ref: 'input',
-                name: this.props.name
+                    name: this.props.name,
+                    setExpanded: this.setExpanded
                 });
             });
+        }
+    },
+
+    getLabelAndErrors() {
+        if(this.props.label || this.state.errors) {
+            return (
+                <p>
+                    <span className="pull-left">{this.props.label}</span>
+                    <span className="pull-right">{this.state.errors}</span>
+                </p>
+            );
+        } else {
+            return null;
+        }
+    },
+
+    getCheckbox() {
+        const { checkboxLabel } = this.props;
+
+        if(checkboxLabel) {
+            return (
+                <div
+                    className="ascribe-property-collapsible-toggle"
+                    onClick={this.handleCheckboxToggle}>
+                    <input
+                        onChange={this.handleCheckboxToggle}
+                        type="checkbox"
+                        checked={this.state.expanded}
+                        ref="checkboxCollapsible"/>
+                    <span className="checkbox">{' ' + checkboxLabel}</span>
+                </div>
+            );
+        } else {
+            return null;
+        }
     },
 
     render() {
         let footer = null;
-        let tooltip = <span/>;
+        let style = Object.assign({}, this.props.style);
-        let style = this.props.style ? mergeOptions({}, this.props.style) : {};
-
-        if(this.props.tooltip){
-            tooltip = (
-                <Tooltip>
-                    {this.props.tooltip}
-                </Tooltip>);
-        }
 
         if(this.props.footer){
             footer = (
                 <div className="ascribe-property-footer">
                     {this.props.footer}
-                </div>);
+                </div>
+            );
         }
 
+        if (!this.state.expanded) {
+            style.paddingBottom = 0;
+        }
         if (!this.props.editable) {
             style.cursor = 'not-allowed';
         }
@@ -248,19 +329,17 @@ let Property = React.createClass({
                 className={'ascribe-property-wrapper ' + this.getClassName()}
                 onClick={this.handleFocus}
                 style={style}>
-                <OverlayTrigger
+                {this.getCheckbox()}
-                    delay={500}
+                <Panel
-                    placement="top"
+                    collapsible
-                    overlay={tooltip}>
+                    expanded={this.state.expanded}
+                    className="bs-custom-panel">
                     <div className={'ascribe-property ' + this.props.className}>
-                        <p>
+                        {this.getLabelAndErrors()}
-                            <span className="pull-left">{this.props.label}</span>
-                            <span className="pull-right">{this.state.errors}</span>
-                        </p>
                         {this.renderChildren(style)}
                         {footer}
                     </div>
-                </OverlayTrigger>
+                </Panel>
             </div>
         );
     }

js/components/ascribe_forms/property_collapsible.js

@@ -8,7 +8,7 @@ import Tooltip from 'react-bootstrap/lib/Tooltip';
 import Panel from 'react-bootstrap/lib/Panel';
 
 
-let PropertyCollapsile = React.createClass({
+let PropertyCollapsible = React.createClass({
     propTypes: {
         children: React.PropTypes.arrayOf(React.PropTypes.element),
         checkboxLabel: React.PropTypes.string,
@@ -93,4 +93,4 @@ let PropertyCollapsile = React.createClass({
     }
 });
 
-export default PropertyCollapsile;
+export default PropertyCollapsible;

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>

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

@@ -15,7 +15,6 @@ let FileDragAndDrop = React.createClass({
         className: React.PropTypes.string,
         onDrop: React.PropTypes.func.isRequired,
         onDragOver: React.PropTypes.func,
-        onInactive: React.PropTypes.func,
         filesToUpload: React.PropTypes.array,
         handleDeleteFile: React.PropTypes.func,
         handleCancelFile: React.PropTypes.func,
@@ -60,16 +59,9 @@ 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) {
-                this.props.onInactive();
-            }
-            return;
-        }
 
             // handle Drag and Drop
             if(event.dataTransfer && event.dataTransfer.files.length > 0) {
@@ -81,7 +73,7 @@ let FileDragAndDrop = React.createClass({
             if(typeof this.props.onDrop === 'function' && files) {
               this.props.onDrop(files);
             }
-
+        }
     },
 
     handleDeleteFile(fileId) {
@@ -113,17 +105,10 @@ let FileDragAndDrop = React.createClass({
     },
 
     handleOnClick() {
+        // do not propagate event if the drop zone's inactive,
+        // for example when multiple is set to false and the user already uploaded a piece
+        if (!this.props.dropzoneInactive) {
             let evt;
-        // when multiple is set to false and the user already uploaded a piece,
-        // do not propagate event
-        if(this.props.dropzoneInactive) {
-            // if there is a handle function for doing stuff
-            // when the dropzone is inactive, then call it
-            if(this.props.onInactive) {
-                this.props.onInactive();
-            }
-            return;
-        }
 
             try {
                 evt = new MouseEvent('click', {
@@ -138,6 +123,7 @@ let FileDragAndDrop = React.createClass({
             }
 
             this.refs.fileSelector.getDOMNode().dispatchEvent(evt);
+        }
     },
 
     render: function () {

js/components/ascribe_uploader/react_s3_fine_uploader.js

@@ -99,7 +99,6 @@ let ReactS3FineUploader = React.createClass({
         areAssetsDownloadable: React.PropTypes.bool,
         areAssetsEditable: React.PropTypes.bool,
         defaultErrorMessage: React.PropTypes.string,
-        onInactive: React.PropTypes.func,
 
         // We encountered some cases where people had difficulties to upload their
         // works to ascribe due to a slow internet connection.
@@ -891,7 +890,6 @@ let ReactS3FineUploader = React.createClass({
              multiple,
              areAssetsDownloadable,
              areAssetsEditable,
-             onInactive,
              enableLocalHashing,
              fileClassToUpload,
              fileInputElement: FileInputElement,
@@ -901,7 +899,6 @@ let ReactS3FineUploader = React.createClass({
             multiple,
             areAssetsDownloadable,
             areAssetsEditable,
-            onInactive,
             enableLocalHashing,
             uploadMethod,
             fileClassToUpload,

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,15 +170,21 @@ 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,
+            search: searchTerm
+        });
         this.history.pushState(null, this.props.location.pathname, {page: 1});
     },
 
     applyFilterBy(filterBy){
+        this.setState({
+            isFilterDirty: true
+        });
+
         // first we need to apply the filter on the piece list
-        PieceListActions.fetchPieceList(1, this.state.pageSize, this.state.search,
+        this
-                                        this.state.orderBy, this.state.orderAsc, filterBy)
+            .loadPieceList({ page: 1, filterBy })
             .then(() => {
                 // but also, we need to filter all the open edition lists
                 this.state.pieceList
@@ -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){
@@ -117,7 +107,7 @@ let RegisterPiece = React.createClass( {
                 <Col xs={12} sm={10} md={8} smOffset={1} mdOffset={2}>
                     <RegisterPieceForm
                         {...this.props}
-                        isFineUploaderActive={this.state.isFineUploaderActive}
+                        isFineUploaderActive={true}
                         handleSuccess={this.handleSuccess}
                         location={this.props.location}>
                         {this.props.children}

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

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

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

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

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

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

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

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

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

@@ -122,7 +122,7 @@ let CylandAdditionalDataForm = React.createClass({
                     <Property
                         name='artist_bio'
                         label={getLangText('Artist Biography')}
-                        hidden={disabled && !piece.extra_data.artist_bio}>
+                        expanded={!disabled || !!piece.extra_data.artist_bio}>
                         <InputTextAreaToggable
                             rows={1}
                             defaultValue={piece.extra_data.artist_bio}
@@ -131,7 +131,7 @@ let CylandAdditionalDataForm = React.createClass({
                     <Property
                         name='artist_contact_information'
                         label={getLangText('Artist Contact Information')}
-                        hidden={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}
@@ -140,7 +140,7 @@ let CylandAdditionalDataForm = React.createClass({
                     <Property
                         name='conceptual_overview'
                         label={getLangText('Conceptual Overview')}
-                        hidden={disabled && !piece.extra_data.conceptual_overview}>
+                        expanded={!disabled || !!piece.extra_data.conceptual_overview}>
                         <InputTextAreaToggable
                             rows={1}
                             defaultValue={piece.extra_data.conceptual_overview}
@@ -149,7 +149,7 @@ let CylandAdditionalDataForm = React.createClass({
                     <Property
                         name='medium'
                         label={getLangText('Medium (technical specifications)')}
-                        hidden={disabled && !piece.extra_data.medium}>
+                        expanded={!disabled || !!piece.extra_data.medium}>
                         <InputTextAreaToggable
                             rows={1}
                             defaultValue={piece.extra_data.medium}
@@ -158,7 +158,7 @@ let CylandAdditionalDataForm = React.createClass({
                     <Property
                         name='size_duration'
                         label={getLangText('Size / Duration')}
-                        hidden={disabled && !piece.extra_data.size_duration}>
+                        expanded={!disabled || !!piece.extra_data.size_duration}>
                         <InputTextAreaToggable
                             rows={1}
                             defaultValue={piece.extra_data.size_duration}
@@ -167,7 +167,7 @@ let CylandAdditionalDataForm = React.createClass({
                     <Property
                         name='display_instructions'
                         label={getLangText('Display instructions')}
-                        hidden={disabled && !piece.extra_data.display_instructions}>
+                        expanded={!disabled || !!piece.extra_data.display_instructions}>
                         <InputTextAreaToggable
                             rows={1}
                             defaultValue={piece.extra_data.display_instructions}
@@ -176,7 +176,7 @@ let CylandAdditionalDataForm = React.createClass({
                     <Property
                         name='additional_details'
                         label={getLangText('Additional details')}
-                        hidden={disabled && !piece.extra_data.additional_details}>
+                        expanded={!disabled || !!piece.extra_data.additional_details}>
                         <InputTextAreaToggable
                             rows={1}
                             defaultValue={piece.extra_data.additional_details}
@@ -185,7 +185,7 @@ let CylandAdditionalDataForm = React.createClass({
                     <FurtherDetailsFileuploader
                         label={getLangText('Additional files (e.g. still images, pdf)')}
                         uploadStarted={this.uploadStarted}
-                        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_forms/ikonotv_artist_details_form.js

@@ -104,7 +104,7 @@ let IkonotvArtistDetailsForm = React.createClass({
                     <Property
                         name='artist_website'
                         label={getLangText('Artist Website')}
-                        hidden={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.')}
-                        hidden={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')}
-                        hidden={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')}
-                        hidden={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')}
-                        hidden={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')}
-                        hidden={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')}
-                        hidden={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')}
-                        hidden={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')}
-                        hidden={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')}
-                        hidden={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';
 
@@ -47,6 +50,7 @@ let IkonotvRegisterPiece = React.createClass({
             UserStore.getState(),
             PieceListStore.getState(),
             PieceStore.getState(),
+            WhitelabelStore.getState(),
             {
                 step: 0,
                 pageExitWarning: getLangText("If you leave this form now, your work will not be loaned to Ikono TV.")
@@ -57,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.
@@ -81,17 +87,11 @@ 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
-            });
-        }
     },
 
 
@@ -157,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() {
@@ -211,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"
@@ -260,9 +250,8 @@ let IkonotvRegisterPiece = React.createClass({
                                 enableLocalHashing={false}
                                 headerMessage={getLangText('Register work')}
                                 submitMessage={getLangText('Register')}
-                                isFineUploaderActive={this.state.isFineUploaderActive}
+                                isFineUploaderActive={true}
                                 handleSuccess={this.handleRegisterSuccess}
-                                onLoggedOut={this.onLoggedOut}
                                 location={this.props.location}/>
                         </Col>
                     </Row>

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -11,13 +11,21 @@ function getWalletApiUrls(subdomain) {
             '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 {};
 }

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,79 @@ 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'/>
+            <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 +239,4 @@ function getRoutes(commonRoutes, subdomain) {
     }
 }
 
-
 export default getRoutes;

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',

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/utils/acl_utils.js

@@ -33,16 +33,17 @@ 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) {
         availableAcls = editionsCopy[0].acl;
-    }
+
         if (editionsCopy.length >= 2) {
             for (let i = 1; i < editionsCopy.length; i++) {
                 availableAcls = intersectLists(availableAcls, editionsCopy[i].acl);
             }
         }
+    }
 
     // convert acls back to key-value object
     let availableAclsObj = {};
@@ -50,6 +51,5 @@ export function getAvailableAcls(editions, filterFn) {
         availableAclsObj[availableAcls[i]] = true;
     }
 
-
     return availableAclsObj;
 }

js/utils/form_utils.js

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

js/utils/general_utils.js

@@ -1,5 +1,11 @@
 'use strict';
 
+/**
+ * Checks shallow equality
+ * Re-export of shallow from shallow-equals
+ */
+export { default as isShallowEqual } from 'shallow-equals';
+
 /**
  * Takes an object and returns a shallow copy without any keys
  * that fail the passed in filter function.

js/utils/regex_utils.js

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

js/utils/requests.js

@@ -100,8 +100,7 @@ class Requests {
         return newUrl;
     }
 
-    request(verb, url, options) {
+    request(verb, url, options = {}) {
-        options = options || {};
         let merged = Object.assign({}, this.httpOptions, options);
         let csrftoken = getCookie(AppConstants.csrftoken);
         if (csrftoken) {
@@ -129,13 +128,10 @@ class Requests {
     }
 
     _putOrPost(url, paramsAndBody, method) {
-        let paramsCopy = Object.assign({}, paramsAndBody);
         let params = omitFromObject(paramsAndBody, ['body']);
         let newUrl = this.prepareUrl(url, params);
-        let body = null;
+        let body = paramsAndBody && paramsAndBody.body ? JSON.stringify(paramsAndBody.body)
-        if (paramsCopy && paramsCopy.body) {
+                                                       : null;
-            body = JSON.stringify(paramsCopy.body);
-        }
         return this.request(method, newUrl, { body });
     }
 

package.json

@@ -85,6 +85,7 @@
     "react-star-rating": "~1.3.2",
     "react-textarea-autosize": "^2.5.2",
     "reactify": "^1.1.0",
+    "shallow-equals": "0.0.0",
     "shmui": "^0.1.0",
     "spark-md5": "~1.0.0",
     "uglifyjs": "^2.4.10",

sass/ascribe-fonts/ascribe-fonts.scss

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

sass/ascribe_accordion_list.scss

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

sass/ascribe_custom_style.scss

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

sass/ascribe_notification_page.scss

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

sass/ascribe_panel.scss

@@ -1,3 +1,8 @@
+.panel {
+    /* Here we are overriding bootstrap to show the is-focused background color */
+    background-color: transparent;
+}
+
 .ascribe-panel-wrapper {
     border: 1px solid #ddd;
     height: 5em;
@@ -26,7 +31,7 @@
         vertical-align: middle;
 
         &:first-child {
-            word-break: break-all;
+            word-break: break-word;
             font-size: .9em;
         }
     }

sass/ascribe_piece_list_toolbar.scss

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

sass/ascribe_spinner.scss

@@ -52,6 +52,13 @@ $ascribe--spinner-size-sm: 15px;
     }
 }
 
+.spinner-wrapper-white {
+    color: $ascribe-white;
+    .spinner-circle {
+        border-color: $ascribe-white;
+    }
+}
+
 .spinner-wrapper-lg {
     width: $ascribe--spinner-size-lg;
     height: $ascribe--spinner-size-lg;

sass/main.scss

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

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

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

sass/whitelabel/wallet/cyland/cyland_custom_style.scss

@@ -59,7 +59,6 @@ $cyland--button-color: $cyland--nav-fg-prim-color;
     display: none;
 }
 
-
 .client--cyland .icon-ascribe-search{
     color: $cyland--button-color;
 }
@@ -148,6 +147,24 @@ $cyland--button-color: $cyland--nav-fg-prim-color;
     }
 }
 
+// landing page
+.client--cyland {
+    .route--landing {
+        display: table;
+
+        > .container {
+            display: table-cell;
+            padding-bottom: 100px;
+            vertical-align: middle;
+        }
+
+        .cyland-landing {
+            font-weight: normal;
+            text-align: center;
+        }
+    }
+}
+
 // spinner!
 .client--cyland {
     .btn-spinner {

sass/whitelabel/wallet/index.scss

@@ -1,6 +1,7 @@
 @import 'cc/cc_custom_style';
 @import 'cyland/cyland_custom_style';
 @import 'ikonotv/ikonotv_custom_style';
+@import '23vivi/23vivi_custom_style';
 
 .ascribe-wallet-app {
     border-radius: 0;