Merge branch 'AD-1255-refactor-aclbuttons-form-creatio' into AD-1309-change-share-to-email

js/components/ascribe_buttons/acl_button.js

@@ -1,187 +0,0 @@
-'use strict';
-
-import React from 'react';
-
-import ConsignForm from '../ascribe_forms/form_consign';
-import UnConsignForm from '../ascribe_forms/form_unconsign';
-import TransferForm from '../ascribe_forms/form_transfer';
-import LoanForm from '../ascribe_forms/form_loan';
-import LoanRequestAnswerForm from '../ascribe_forms/form_loan_request_answer';
-import ShareForm from '../ascribe_forms/form_share_email';
-import ModalWrapper from '../ascribe_modal/modal_wrapper';
-import AppConstants from '../../constants/application_constants';
-
-import GlobalNotificationModel from '../../models/global_notification_model';
-import GlobalNotificationActions from '../../actions/global_notification_actions';
-
-import ApiUrls from '../../constants/api_urls';
-
-import { getAclFormMessage } from '../../utils/form_utils';
-import { getLangText } from '../../utils/lang_utils';
-
-let AclButton = React.createClass({
-    propTypes: {
-        action: React.PropTypes.oneOf(AppConstants.aclList).isRequired,
-        availableAcls: React.PropTypes.object.isRequired,
-        pieceOrEditions: React.PropTypes.oneOfType([
-            React.PropTypes.object,
-            React.PropTypes.array
-        ]).isRequired,
-        currentUser: React.PropTypes.object,
-        buttonAcceptName: React.PropTypes.string,
-        buttonAcceptClassName: React.PropTypes.string,
-        handleSuccess: React.PropTypes.func.isRequired,
-        className: React.PropTypes.string
-    },
-
-    isPiece(){
-        return this.props.pieceOrEditions.constructor !== Array;
-    },
-
-    actionProperties(){
-
-        let message = getAclFormMessage(this.props.action, this.getTitlesString(), this.props.currentUser.username);
-
-        if (this.props.action === 'acl_consign'){
-            return {
-                title: getLangText('Consign artwork'),
-                tooltip: getLangText('Have someone else sell the artwork'),
-                form: (
-                    <ConsignForm
-                        message={message}
-                        id={this.getFormDataId()}
-                        url={ApiUrls.ownership_consigns}/>
-                    ),
-                handleSuccess: this.showNotification
-            };
-        }
-        if (this.props.action === 'acl_unconsign'){
-            return {
-                title: getLangText('Unconsign artwork'),
-                tooltip: getLangText('Have the owner manage his sales again'),
-                form: (
-                    <UnConsignForm
-                        message={message}
-                        id={this.getFormDataId()}
-                        url={ApiUrls.ownership_unconsigns}/>
-                    ),
-                handleSuccess: this.showNotification
-            };
-        }else if (this.props.action === 'acl_transfer') {
-            return {
-                title: getLangText('Transfer artwork'),
-                tooltip: getLangText('Transfer the ownership of the artwork'),
-                form: (
-                    <TransferForm
-                        message={message}
-                        id={this.getFormDataId()}
-                        url={ApiUrls.ownership_transfers}/>
-                ),
-                handleSuccess: this.showNotification
-            };
-        }
-        else if (this.props.action === 'acl_loan'){
-            return {
-                title: getLangText('Loan artwork'),
-                tooltip: getLangText('Loan your artwork for a limited period of time'),
-                form: (<LoanForm
-                        message={message}
-                        id={this.getFormDataId()}
-                        url={this.isPiece() ? ApiUrls.ownership_loans_pieces : ApiUrls.ownership_loans_editions}/>
-                ),
-                handleSuccess: this.showNotification
-            };
-        }
-        else if (this.props.action === 'acl_loan_request'){
-            return {
-                title: getLangText('Loan artwork'),
-                tooltip: getLangText('Someone requested you to loan your artwork for a limited period of time'),
-                form: (<LoanRequestAnswerForm
-                        message={message}
-                        id={this.getFormDataId()}
-                        url={ApiUrls.ownership_loans_pieces_request_confirm}/>
-                ),
-                handleSuccess: this.showNotification
-            };
-        }
-        else if (this.props.action === 'acl_share'){
-            return {
-                title: getLangText('Share artwork'),
-                tooltip: getLangText('Share the artwork'),
-                form: (
-                    <ShareForm
-                        message={message}
-                        id={this.getFormDataId()}
-                        url={this.isPiece() ? ApiUrls.ownership_shares_pieces : ApiUrls.ownership_shares_editions }/>
-                    ),
-                handleSuccess: this.showNotification
-            };
-        } else {
-            throw new Error('Your specified action did not match a form.');
-        }
-    },
-
-    showNotification(response){
-        this.props.handleSuccess();
-        if(response.notification) {
-            let notification = new GlobalNotificationModel(response.notification, 'success');
-            GlobalNotificationActions.appendGlobalNotification(notification);
-        }
-    },
-
-    // plz move to share form
-    getTitlesString(){
-        if (this.isPiece()){
-            return '\"' + this.props.pieceOrEditions.title + '\"';
-        }
-        else {
-            return this.props.pieceOrEditions.map(function(edition) {
-                return '- \"' + edition.title + ', ' + getLangText('edition') + ' ' + edition.edition_number + '\"\n';
-            }).join('');
-        }
-
-    },
-
-    getFormDataId(){
-        if (this.isPiece()) {
-            return {piece_id: this.props.pieceOrEditions.id};
-        }
-        else {
-            return {bitcoin_id: this.props.pieceOrEditions.map(function(edition){
-                return edition.bitcoin_id;
-            }).join()};
-        }
-    },
-
-    // Removes the acl_ prefix and converts to upper case
-    sanitizeAction() {
-        if (this.props.buttonAcceptName) {
-            return this.props.buttonAcceptName;
-        }
-        return this.props.action.split('acl_')[1].toUpperCase();
-    },
-
-    render() {
-        if (this.props.availableAcls){
-            let shouldDisplay = this.props.availableAcls[this.props.action];
-            let aclProps = this.actionProperties();
-            let buttonClassName = this.props.buttonAcceptClassName ? this.props.buttonAcceptClassName : '';
-            return (
-                <ModalWrapper
-                    trigger={
-                        <button
-                            className={shouldDisplay ? 'btn btn-default btn-sm ' + buttonClassName : 'hidden'}>
-                            {this.sanitizeAction()}
-                        </button>
-                    }
-                    handleSuccess={aclProps.handleSuccess}
-                    title={aclProps.title}>
-                    {aclProps.form}
-                </ModalWrapper>
-            );
-        }
-        return null;
-    }
-});
-
-export default AclButton;

js/components/ascribe_buttons/acl_button_list.js

@@ -5,21 +5,25 @@ import React from 'react/addons';
 import UserActions from '../../actions/user_actions';
 import UserStore from '../../stores/user_store';
 
-import AclButton from '../ascribe_buttons/acl_button';
+import ConsignButton from './acls/consign_button';
+import LoanButton from './acls/loan_button';
+import LoanRequestButton from './acls/loan_request_button';
+import ShareButton from './acls/share_button';
+import TransferButton from './acls/transfer_button';
+import UnconsignButton from './acls/unconsign_button';
 
 import { mergeOptions } from '../../utils/general_utils';
 
-
 let AclButtonList = React.createClass({
     propTypes: {
         className: React.PropTypes.string,
-        editions: React.PropTypes.oneOfType([
+        pieceOrEditions: React.PropTypes.oneOfType([
             React.PropTypes.object,
             React.PropTypes.array
-        ]),
+        ]).isRequired,
-        availableAcls: React.PropTypes.object,
+        availableAcls: React.PropTypes.object.isRequired,
         buttonsStyle: React.PropTypes.object,
-        handleSuccess: React.PropTypes.func,
+        handleSuccess: React.PropTypes.func.isRequired,
         children: React.PropTypes.oneOfType([
             React.PropTypes.arrayOf(React.PropTypes.element),
             React.PropTypes.element
@@ -78,7 +82,7 @@ let AclButtonList = React.createClass({
         const { className,
                 buttonsStyle,
                 availableAcls,
-                editions,
+                pieceOrEditions,
                 handleSuccess } = this.props;
 
         const { currentUser } = this.state;
@@ -86,34 +90,29 @@ let AclButtonList = React.createClass({
         return (
             <div className={className}>
                 <span ref="buttonList" style={buttonsStyle}>
-                    <AclButton
+                    <ShareButton
                         availableAcls={availableAcls}
-                        action="acl_share"
+                        pieceOrEditions={pieceOrEditions}
-                        pieceOrEditions={editions}
                         currentUser={currentUser}
                         handleSuccess={handleSuccess} />
-                    <AclButton
+                    <TransferButton
                         availableAcls={availableAcls}
-                        action="acl_transfer"
+                        pieceOrEditions={pieceOrEditions}
-                        pieceOrEditions={editions}
                         currentUser={currentUser}
                         handleSuccess={handleSuccess}/>
-                    <AclButton
+                    <ConsignButton
                         availableAcls={availableAcls}
-                        action="acl_consign"
+                        pieceOrEditions={pieceOrEditions}
-                        pieceOrEditions={editions}
                         currentUser={currentUser}
                         handleSuccess={handleSuccess} />
-                    <AclButton
+                    <UnconsignButton
                         availableAcls={availableAcls}
-                        action="acl_unconsign"
+                        pieceOrEditions={pieceOrEditions}
-                        pieceOrEditions={editions}
                         currentUser={currentUser}
                         handleSuccess={handleSuccess} />
-                    <AclButton
+                    <LoanButton
                         availableAcls={availableAcls}
-                        action="acl_loan"
+                        pieceOrEditions={pieceOrEditions}
-                        pieceOrEditions={editions}
                         currentUser={currentUser}
                         handleSuccess={handleSuccess} />
                     {this.renderChildren()}

js/components/ascribe_buttons/acls/acl_button.js

@@ -0,0 +1,85 @@
+'use strict';
+
+import React from 'react';
+import classNames from 'classnames';
+
+import AclProxy from '../../acl_proxy';
+
+import AclFormFactory from '../../ascribe_forms/acl_form_factory';
+
+import ModalWrapper from '../../ascribe_modal/modal_wrapper';
+
+import AppConstants from '../../../constants/application_constants';
+
+import GlobalNotificationModel from '../../../models/global_notification_model';
+import GlobalNotificationActions from '../../../actions/global_notification_actions';
+
+import ApiUrls from '../../../constants/api_urls';
+
+import { getAclFormMessage, getAclFormDataId } from '../../../utils/form_utils';
+import { getLangText } from '../../../utils/lang_utils';
+
+export default function ({ action, displayName, title, tooltip }) {
+    if (AppConstants.aclList.indexOf(action) < 0) {
+        console.warn('Your specified aclName did not match a an acl class.');
+    }
+
+    return React.createClass({
+        displayName: displayName,
+
+        propTypes: {
+            availableAcls: React.PropTypes.object.isRequired,
+            buttonAcceptName: React.PropTypes.string,
+            buttonAcceptClassName: React.PropTypes.string,
+            currentUser: React.PropTypes.object.isRequired,
+            email: React.PropTypes.string,
+            pieceOrEditions: React.PropTypes.oneOfType([
+                React.PropTypes.object,
+                React.PropTypes.array
+            ]).isRequired,
+            handleSuccess: React.PropTypes.func.isRequired,
+            className: React.PropTypes.string
+        },
+
+        // Removes the acl_ prefix and converts to upper case
+        sanitizeAction() {
+            if (this.props.buttonAcceptName) {
+                return this.props.buttonAcceptName;
+            }
+            return action.split('acl_')[1].toUpperCase();
+        },
+
+        render() {
+            const {
+                availableAcls,
+                buttonAcceptClassName,
+                currentUser,
+                email,
+                pieceOrEditions,
+                handleSuccess } = this.props;
+
+            return (
+                <AclProxy
+                    aclName={action}
+                    aclObject={availableAcls}>
+                    <ModalWrapper
+                        trigger={
+                            <button
+                                className={classNames('btn', 'btn-default', 'btn-sm', buttonAcceptClassName)}>
+                                {this.sanitizeAction()}
+                            </button>
+                        }
+                        handleSuccess={handleSuccess}
+                        title={title}>
+                        <AclFormFactory
+                            action={action}
+                            currentUser={currentUser}
+                            email={email}
+                            pieceOrEditions={pieceOrEditions}
+                            showNotification />
+                    </ModalWrapper>
+                </AclProxy>
+            );
+        }
+    });
+}

js/components/ascribe_buttons/acls/consign_button.js

@@ -0,0 +1,14 @@
+'use strict';
+
+import React from 'react';
+
+import AclButton from './acl_button';
+
+import { getLangText } from '../../../utils/lang_utils';
+
+export default AclButton({
+    action: 'acl_consign',
+    displayName: 'ConsignButton',
+    title: getLangText('Consign artwork'),
+    tooltip: getLangText('Have someone else sell the artwork')
+});

js/components/ascribe_buttons/acls/loan_button.js

@@ -0,0 +1,14 @@
+'use strict';
+
+import React from 'react';
+
+import AclButton from './acl_button';
+
+import { getLangText } from '../../../utils/lang_utils';
+
+export default AclButton({
+    action: 'acl_loan',
+    displayName: 'LoanButton',
+    title: getLangText('Loan artwork'),
+    tooltip: getLangText('Loan your artwork for a limited period of time')
+});

js/components/ascribe_buttons/acls/loan_request_button.js

@@ -0,0 +1,14 @@
+'use strict';
+
+import React from 'react';
+
+import AclButton from './acl_button';
+
+import { getLangText } from '../../../utils/lang_utils';
+
+export default AclButton({
+    action: 'acl_loan_request',
+    displayName: 'LoanRequestButton',
+    title: getLangText('Loan artwork'),
+    tooltip: getLangText('Someone requested you to loan your artwork for a limited period of time')
+});

js/components/ascribe_buttons/acls/share_button.js

@@ -0,0 +1,14 @@
+'use strict';
+
+import React from 'react';
+
+import AclButton from './acl_button';
+
+import { getLangText } from '../../../utils/lang_utils';
+
+export default AclButton({
+    action: 'acl_share',
+    displayName: 'ShareButton',
+    title: getLangText('Share artwork'),
+    tooltip: getLangText('Share the artwork')
+});

js/components/ascribe_buttons/acls/transfer_button.js

@@ -0,0 +1,14 @@
+'use strict';
+
+import React from 'react';
+
+import AclButton from './acl_button';
+
+import { getLangText } from '../../../utils/lang_utils';
+
+export default AclButton({
+    action: 'acl_transfer',
+    displayName: 'TransferButton',
+    title: getLangText('Transfer artwork'),
+    tooltip: getLangText('Transfer the ownership of the artwork')
+});

js/components/ascribe_buttons/acls/unconsign_button.js

@@ -0,0 +1,14 @@
+'use strict';
+
+import React from 'react';
+
+import AclButton from './acl_button';
+
+import { getLangText } from '../../../utils/lang_utils';
+
+export default AclButton({
+    action: 'acl_unconsign',
+    displayName: 'UnconsignButton',
+    title: getLangText('Unconsign artwork'),
+    tooltip: getLangText('Have the owner manage his sales again')
+});

js/components/ascribe_detail/edition_action_panel.js

@@ -107,7 +107,7 @@ let EditionActionPanel = React.createClass({
                         <AclButtonList
                             className="ascribe-button-list"
                             availableAcls={edition.acl}
-                            editions={[edition]}
+                            pieceOrEditions={[edition]}
                             handleSuccess={this.handleSuccess}>
                             <AclProxy
                                 aclObject={edition.acl}

js/components/ascribe_detail/piece_container.js

@@ -201,7 +201,7 @@ let PieceContainer = React.createClass({
                         <AclButtonList
                             className="ascribe-button-list"
                             availableAcls={piece.acl}
-                            editions={piece}
+                            pieceOrEditions={piece}
                             handleSuccess={this.loadPiece}>
                                 <CreateEditionsButton
                                     label={getLangText('CREATE EDITIONS')}

js/components/ascribe_forms/acl_form_factory.js

@@ -0,0 +1,128 @@
+'use strict';
+
+import React from 'react';
+
+import ConsignForm from '../ascribe_forms/form_consign';
+import UnConsignForm from '../ascribe_forms/form_unconsign';
+import TransferForm from '../ascribe_forms/form_transfer';
+import LoanForm from '../ascribe_forms/form_loan';
+import LoanRequestAnswerForm from '../ascribe_forms/form_loan_request_answer';
+import ShareForm from '../ascribe_forms/form_share_email';
+
+import AppConstants from '../../constants/application_constants';
+import ApiUrls from '../../constants/api_urls';
+
+import GlobalNotificationModel from '../../models/global_notification_model';
+import GlobalNotificationActions from '../../actions/global_notification_actions';
+
+import { getAclFormMessage, getAclFormDataId } from '../../utils/form_utils';
+
+let AclFormFactory = React.createClass({
+    propTypes: {
+        action: React.PropTypes.oneOf(AppConstants.aclList).isRequired,
+        currentUser: React.PropTypes.object.isRequired,
+        email: React.PropTypes.string,
+        message: React.PropTypes.string,
+        pieceOrEditions: React.PropTypes.oneOfType([
+            React.PropTypes.object,
+            React.PropTypes.array
+        ]).isRequired,
+        handleSuccess: React.PropTypes.func,
+        showNotification: React.PropTypes.bool
+    },
+
+    isPiece() {
+        return this.props.pieceOrEditions.constructor !== Array;
+    },
+
+    getFormDataId() {
+        return getAclFormDataId(this.isPiece(), this.props.pieceOrEditions);
+    },
+
+    showSuccessNotification(response) {
+        if (typeof this.props.handleSuccess === 'function') {
+            this.props.handleSuccess();
+        }
+
+        if (response.notification) {
+            const notification = new GlobalNotificationModel(response.notification, 'success');
+            GlobalNotificationActions.appendGlobalNotification(notification);
+        }
+    },
+
+    render() {
+        const {
+            action,
+            pieceOrEditions,
+            currentUser,
+            email,
+            message,
+            handleSuccess,
+            showNotification } = this.props;
+
+        const formMessage = message || getAclFormMessage({
+            aclName: action,
+            entities: pieceOrEditions,
+            isPiece: this.isPiece(),
+            senderName: currentUser.username
+        });
+
+        if (action === 'acl_consign') {
+            return (
+                <ConsignForm
+                    email={email}
+                    message={formMessage}
+                    id={this.getFormDataId()}
+                    url={ApiUrls.ownership_consigns}
+                    handleSuccess={showNotification ? this.showSuccessNotification : handleSuccess} />
+            );
+        } else if (action === 'acl_unconsign') {
+            return (
+                <UnConsignForm
+                    message={formMessage}
+                    id={this.getFormDataId()}
+                    url={ApiUrls.ownership_unconsigns}
+                    handleSuccess={showNotification ? this.showSuccessNotification : handleSuccess} />
+            );
+        } else if (action === 'acl_transfer') {
+            return (
+                <TransferForm
+                    message={formMessage}
+                    id={this.getFormDataId()}
+                    url={ApiUrls.ownership_transfers}
+                    handleSuccess={showNotification ? this.showSuccessNotification : handleSuccess} />
+            );
+        } else if (action === 'acl_loan') {
+            return (
+                <LoanForm
+                    email={email}
+                    message={formMessage}
+                    id={this.getFormDataId()}
+                    url={this.isPiece() ? ApiUrls.ownership_loans_pieces
+                        : ApiUrls.ownership_loans_editions}
+                    handleSuccess={showNotification ? this.showSuccessNotification : handleSuccess} />
+            );
+        } else if (action === 'acl_loan_request') {
+            return (
+                <LoanRequestAnswerForm
+                    message={formMessage}
+                    id={this.getFormDataId()}
+                    url={ApiUrls.ownership_loans_pieces_request_confirm}
+                    handleSuccess={showNotification ? this.showSuccessNotification : handleSuccess} />
+            );
+        } else if (action === 'acl_share') {
+            return (
+                <ShareForm
+                    message={formMessage}
+                    id={this.getFormDataId()}
+                    url={this.isPiece() ? ApiUrls.ownership_shares_pieces
+                        : ApiUrls.ownership_shares_editions}
+                    handleSuccess={showNotification ? this.showSuccessNotification : handleSuccess} />
+            );
+        } else {
+            throw new Error('Your specified action did not match a form.');
+        }
+    }
+});
+
+export default AclFormFactory;

js/components/ascribe_forms/form_request_action.js

@@ -2,10 +2,13 @@
 
 import React from 'react';
 
-import AclButton from './../ascribe_buttons/acl_button';
-import ActionPanel from '../ascribe_panel/action_panel';
 import Form from './form';
 
+import LoanRequestButton from '../ascribe_buttons/acls/loan_request_button';
+import UnconsignButton from '../ascribe_buttons/acls/unconsign_button';
+
+import ActionPanel from '../ascribe_panel/action_panel';
+
 import NotificationActions from '../../actions/notification_actions';
 
 import GlobalNotificationModel from '../../models/global_notification_model';
@@ -13,9 +16,9 @@ import GlobalNotificationActions from '../../actions/global_notification_actions
 
 import ApiUrls from '../../constants/api_urls';
 
+import { getAclFormDataId } from '../../utils/form_utils';
 import { getLangText } from '../../utils/lang_utils.js';
 
-
 let RequestActionForm = React.createClass({
     propTypes: {
         pieceOrEditions: React.PropTypes.oneOfType([
@@ -55,36 +58,27 @@ let RequestActionForm = React.createClass({
     },
 
     getFormData() {
-        if (this.isPiece()) {
+        return getAclFormDataId(this.isPiece(), this.props.pieceOrEditions);
-            return {piece_id: this.props.pieceOrEditions.id};
-        }
-        else {
-            return {bitcoin_id: this.props.pieceOrEditions.map(function(edition){
-                return edition.bitcoin_id;
-            }).join()};
-        }
     },
 
     showNotification(option, action, owner) {
         return () => {
-            let message = getLangText('You have successfully') + ' ' + option + ' the ' + action + ' request ' + getLangText('from') + ' ' + owner;
+            const message = getLangText('You have successfully %s the %s request from %s', getLangText(option), getLangText(action), owner);
-
+            const notifications = new GlobalNotificationModel(message, 'success');
-            let notifications = new GlobalNotificationModel(message, 'success');
             GlobalNotificationActions.appendGlobalNotification(notifications);
 
             this.handleSuccess();
-
         };
     },
 
     handleSuccess() {
         if (this.isPiece()) {
             NotificationActions.fetchPieceListNotifications();
-        }
+        } else {
-        else {
             NotificationActions.fetchEditionListNotifications();
         }
-        if(this.props.handleSuccess) {
+
+        if (typeof this.props.handleSuccess === 'function') {
             this.props.handleSuccess();
         }
     },
@@ -100,9 +94,8 @@ let RequestActionForm = React.createClass({
     getAcceptButtonForm(urls) {
         if (this.props.notifications.action === 'unconsign') {
             return (
-                <AclButton
+                <UnconsignButton
                     availableAcls={{'acl_unconsign': true}}
-                    action="acl_unconsign"
                     buttonAcceptClassName='inline pull-right btn-sm ascribe-margin-1px'
                     pieceOrEditions={this.props.pieceOrEditions}
                     currentUser={this.props.currentUser}
@@ -110,9 +103,8 @@ let RequestActionForm = React.createClass({
                 );
         } else if (this.props.notifications.action === 'loan_request') {
             return (
-                <AclButton
+                <LoanRequestButton
                     availableAcls={{'acl_loan_request': true}}
-                    action="acl_loan_request"
                     buttonAcceptName="LOAN"
                     buttonAcceptClassName='inline pull-right btn-sm ascribe-margin-1px'
                     pieceOrEditions={this.props.pieceOrEditions}
@@ -125,7 +117,7 @@ let RequestActionForm = React.createClass({
                     url={urls.accept}
                     getFormData={this.getFormData}
                     handleSuccess={
-                        this.showNotification(getLangText('accepted'), this.props.notifications.action, this.props.notifications.by)
+                        this.showNotification('accepted', this.props.notifications.action, this.props.notifications.by)
                     }
                     isInline={true}
                     className='inline pull-right'>
@@ -140,8 +132,8 @@ let RequestActionForm = React.createClass({
     },
 
     getButtonForm() {
-        let urls = this.getUrls();
+        const urls = this.getUrls();
-        let acceptButtonForm = this.getAcceptButtonForm(urls);
+        const acceptButtonForm = this.getAcceptButtonForm(urls);
 
         return (
             <div>
@@ -150,7 +142,7 @@ let RequestActionForm = React.createClass({
                     isInline={true}
                     getFormData={this.getFormData}
                     handleSuccess={
-                        this.showNotification(getLangText('denied'), this.props.notifications.action, this.props.notifications.by)
+                        this.showNotification('denied', this.props.notifications.action, this.props.notifications.by)
                     }
                     className='inline pull-right'>
                     <button

js/components/ascribe_piece_list_bulk_modal/piece_list_bulk_modal.js

@@ -117,7 +117,7 @@ let PieceListBulkModal = React.createClass({
                             <div className="row-fluid">
                                 <AclButtonList
                                     availableAcls={availableAcls}
-                                    editions={selectedEditions}
+                                    pieceOrEditions={selectedEditions}
                                     handleSuccess={this.handleSuccess}
                                     className="text-center ascribe-button-list collapse-group">
                                     <DeleteButton

js/components/ascribe_routes/proxy_routes/auth_proxy_handler.js

@@ -31,6 +31,8 @@ export default function AuthProxyHandler({to, when}) {
 
     return (Component) => {
         return React.createClass({
+            displayName: 'AuthProxyHandler',
+
             propTypes: {
                 location: object
             },

js/components/whitelabel/wallet/components/ascribe_detail/wallet_action_panel.js

@@ -47,7 +47,7 @@ let WalletActionPanel = React.createClass({
                 <AclButtonList
                     className="text-center ascribe-button-list"
                     availableAcls={availableAcls}
-                    editions={this.props.piece}
+                    pieceOrEditions={this.props.piece}
                     handleSuccess={this.props.loadPiece}>
                     <AclProxy
                         aclObject={this.props.currentUser.acl}

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

@@ -220,7 +220,12 @@ let CylandRegisterPiece = React.createClass({
                         <Col xs={12} sm={10} md={8} smOffset={1} mdOffset={2}>
                             <LoanForm
                                 loanHeading={getLangText('Loan to Cyland archive')}
-                                message={getAclFormMessage('acl_loan', '\"' + this.state.piece.title + '\"', this.state.currentUser.username)}
+                                message={getAclFormMessage({
+                                    aclName: 'acl_loan',
+                                    entities: this.state.piece,
+                                    isPiece: true,
+                                    senderName: this.state.currentUser.username
+                                })}
                                 id={{piece_id: this.state.piece.id}}
                                 url={ApiUrls.ownership_loans_pieces}
                                 email={this.state.whitelabel.user}

js/constants/application_constants.js

@@ -11,7 +11,7 @@ let constants = {
     'serverUrl': window.SERVER_URL,
     'baseUrl': window.BASE_URL,
     'aclList': ['acl_coa', 'acl_consign', 'acl_delete', 'acl_download', 'acl_edit', 'acl_create_editions', 'acl_view_editions',
-                'acl_loan', 'acl_share', 'acl_transfer', 'acl_unconsign', 'acl_unshare', 'acl_view',
+                'acl_loan', 'acl_loan_request', 'acl_share', 'acl_transfer', 'acl_unconsign', 'acl_unshare', 'acl_view',
                 'acl_withdraw_transfer', 'acl_wallet_submit'],
 
     'version': 0.1,

js/utils/form_utils.js

@@ -2,14 +2,40 @@
 
 import { getLangText } from './lang_utils';
 
+/**
+ * Get the data ids of the given piece or editions.
+ * @param  {boolean} isPiece                   Is the given entities parameter a piece? (False: array of editions)
+ * @param  {(object|object[])} pieceOrEditions Piece or array of editions
+ * @return {(object|object[])}                 Data IDs of the pieceOrEditions for the form
+ */
+export function getAclFormDataId(isPiece, pieceOrEditions) {
+    if (isPiece) {
+        return {piece_id: pieceOrEditions.id};
+    } else {
+        return {bitcoin_id: pieceOrEditions.map(function(edition){
+            return edition.bitcoin_id;
+        }).join()};
+    }
+}
+
 /**
  * Generates a message for submitting a form
- * @param  {string} aclName    Enum name of a acl
+ * @param  {object} options                     Options object for creating the message:
- * @param  {string} entities   Already computed name of entities
+ * @param  {string} options.aclName             Enum name of an acl
- * @param  {string} senderName Name of the sender
+ * @param  {(object|object[])} options.entities Piece or array of Editions
+ * @param  {boolean} options.isPiece            Is the given entities parameter a piece? (False: array of editions)
+ * @param  {string} [options.senderName]        Name of the sender
  * @return {string}                             Completed message
  */
-export function getAclFormMessage(aclName, entities, senderName) {
+export function getAclFormMessage(options) {
+    if (!options || options.aclName === undefined || options.isPiece === undefined ||
+            !(typeof options.entities === 'object' || options.entities.constructor === Array)) {
+        throw new Error('You must specify an acl class, entities in the correct format, and entity type');
+    }
+
+    let aclName = options.aclName;
+    let entityTitles = options.isPiece ? getTitlesStringOfPiece(options.entities)
+                                       : getTitlesStringOfEditions(options.entities);
     let message = '';
 
     message += getLangText('Hi');
@@ -32,7 +58,7 @@ export function getAclFormMessage(aclName, entities, senderName) {
     }
 
     message += ':\n';
-    message += entities;
+    message += entityTitles;
 
     if(aclName === 'acl_transfer' || aclName === 'acl_loan' || aclName === 'acl_consign') {
         message += getLangText('to you');
@@ -44,10 +70,22 @@ export function getAclFormMessage(aclName, entities, senderName) {
         throw new Error('Your specified aclName did not match a an acl class.');
     }
 
+    if (options.senderName) {
         message += '\n\n';
         message += getLangText('Truly yours,');
         message += '\n';
-    message += senderName;
+        message += options.senderName;
+    }
 
     return message;
 }
+
+function getTitlesStringOfPiece(piece){
+    return '\"' + piece.title + '\"';
+}
+
+function getTitlesStringOfEditions(editions) {
+    return editions.map(function(edition) {
+        return '- \"' + edition.title + ', ' + getLangText('edition') + ' ' + edition.edition_number + '\"\n';
+    }).join('');
+}

js/utils/general_utils.js

@@ -196,14 +196,41 @@ export function escapeHTML(s) {
     return document.createElement('div').appendChild(document.createTextNode(s)).parentNode.innerHTML;
 }
 
-export function excludePropFromObject(obj, propList){
+/**
-    let clonedObj = mergeOptions({}, obj);
+ * Returns a copy of the given object's own and inherited enumerable
-    for (let item in propList){
+ * properties, omitting any keys that pass the given filter function.
-        if (clonedObj[propList[item]]){
+ */
-            delete clonedObj[propList[item]];
+function filterObjOnFn(obj, filterFn) {
+    const filteredObj = {};
+
+    for (let key in obj) {
+        const val = obj[key];
+        if (filterFn == null || !filterFn(val, key)) {
+            filteredObj[key] = val;
         }
     }
-    return clonedObj;
+
+    return filteredObj;
+}
+
+/**
+ * Similar to lodash's _.omit(), this returns a copy of the given object's
+ * own and inherited enumerable properties, omitting any keys that are
+ * in the given array or whose value pass the given filter function.
+ * @param  {object}         obj    Source object
+ * @param  {array|function} filter Array of key names to omit or function to invoke per iteration
+ * @return {object}                The new object
+*/
+export function omitFromObject(obj, filter) {
+    if (filter && filter.constructor === Array) {
+        return filterObjOnFn(obj, (_, key) => {
+            return filter.indexOf(key) >= 0;
+        });
+    } else if (filter && typeof filter === 'function') {
+        return filterObjOnFn(obj, filter);
+    } else {
+        throw new Error('The given filter is not an array or function. Exclude aborted');
+    }
 }
 
 /**

js/utils/lang_utils.js

@@ -22,15 +22,15 @@ export function getLangText(s, ...args) {
     let lang = getLang();
     try {
         if(lang in languages) {
-            return formatText(languages[lang][s], args);
+            return formatText(languages[lang][s], ...args);
         } else {
             // just use the english language
-            return formatText(languages['en-US'][s], args);
+            return formatText(languages['en-US'][s], ...args);
         }
     } catch(err) {
         //if(!(s in languages[lang])) {
         //console.warn('Language-string is not in constants file. Add: "' + s + '" to the "' + lang + '" language file. Defaulting to keyname');
-        return formatText(s, args);
+        return formatText(s, ...args);
         //} else {
         //    console.error(err);
         //}

js/utils/requests.js

@@ -6,7 +6,7 @@ import { argsToQueryParams, getCookie } from '../utils/fetch_api_utils';
 
 import AppConstants from '../constants/application_constants';
 
-import {excludePropFromObject} from '../utils/general_utils';
+import { omitFromObject } from '../utils/general_utils';
 
 class Requests {
     _merge(defaults, options) {
@@ -139,8 +139,8 @@ class Requests {
     }
 
     _putOrPost(url, paramsAndBody, method) {
-        let paramsCopy = this._merge(paramsAndBody);
+        let paramsCopy = Object.assign({}, paramsAndBody);
-        let params = excludePropFromObject(paramsAndBody, ['body']);
+        let params = omitFromObject(paramsAndBody, ['body']);
         let newUrl = this.prepareUrl(url, params);
         let body = null;
         if (paramsCopy && paramsCopy.body) {