Autofocus message field in consignment form and use custom labels

For now, we’ll let the artist specify their suggested price in the
consignment form’s message field.

js/components/ascribe_buttons/acls/acl_button.js

@@ -31,7 +31,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_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_consign.js

@@ -17,8 +17,10 @@ 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,
         handleSuccess: React.PropTypes.func
     },
 
@@ -27,10 +29,12 @@ let ConsignForm = React.createClass({
     },
 
     render() {
+        const { autoFocusProperty, email, id, handleSuccess, message, labels, url } = this.props;
+
         return (
             <Form
                 ref='form'
-                url={this.props.url}
+                url={url}
                 getFormData={this.getFormData}
                 handleSuccess={this.props.handleSuccess}
                 buttons={
@@ -51,24 +55,26 @@ 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={!this.props.email}
+                    editable={!email}
-                    overrideForm={!!this.props.email}>
+                    overrideForm={!!email}>
                     <input
                         type="email"
                         placeholder={getLangText('Email of the consignee')}
-                        defaultValue={this.props.email}
+                        defaultValue={email}
                         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>

js/components/ascribe_forms/input_textarea_toggable.js

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

js/components/ascribe_forms/list_form_request_actions.js

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

js/components/ascribe_forms/property.js

@@ -15,6 +15,7 @@ let Property = React.createClass({
     propTypes: {
         hidden: React.PropTypes.bool,
 
+        autoFocus: React.PropTypes.bool,
         editable: React.PropTypes.bool,
 
         // If we want Form to have a different value for disabled as Property has one for
@@ -68,6 +69,12 @@ let Property = React.createClass({
         };
     },
 
+    componentDidMount() {
+        if (this.props.autoFocus) {
+            this.handleFocus();
+        }
+    },
+
     componentWillReceiveProps() {
         let childInput = this.refs.input;
 

js/components/whitelabel/wallet/components/lumenus/lumenus_buttons/lumenus_submit_button.js

@@ -5,8 +5,6 @@ import classNames from 'classnames';
 
 import LumenusAdditionalDataForm from '../lumenus_forms/lumenus_additional_data_form';
 
-import ConsignButton from '../../../../../ascribe_buttons/acls/consign_button';
-
 import AclFormFactory from '../../../../../ascribe_forms/acl_form_factory';
 import ConsignForm from '../../../../../ascribe_forms/form_consign';
 
@@ -20,13 +18,13 @@ import WhitelabelStore from '../../../../../../stores/whitelabel_store';
 
 import ApiUrls from '../../../../../../constants/api_urls';
 
-import { getAclFormDataId } from '../../../../../../utils/form_utils';
+import { getAclFormMessage, getAclFormDataId } from '../../../../../../utils/form_utils';
 import { getLangText } from '../../../../../../utils/lang_utils';
 
 let LumenusSubmitButton = React.createClass({
     propTypes: {
         availableAcls: React.PropTypes.object.isRequired,
-        currentUser: React.PropTypes.object.isRequired,
+        currentUser: React.PropTypes.object,
         editions: React.PropTypes.array.isRequired,
         handleSuccess: React.PropTypes.func.isRequired,
         className: React.PropTypes.string,
@@ -93,9 +91,32 @@ let LumenusSubmitButton = React.createClass({
 
     render() {
         const { availableAcls, currentUser, className, editions, handleSuccess } = this.props;
-        const buttonTitle = getLangText('CONSIGN TO LUMENUS');
-
         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 LUMENUS')}
+            </button>
+        );
+        const consignForm = (
+            <AclFormFactory
+                action='acl_consign'
+                autoFocusProperty='message'
+                email={this.state.whitelabel.user}
+                message={message}
+                labels={{
+                    'message': getLangText('Message (also suggest a sales price if necessary)')
+                }}
+                pieceOrEditions={editions}
+                showNotification />
+        );
 
         if (solePieceId && !canSubmit) {
             return (
@@ -103,11 +124,7 @@ let LumenusSubmitButton = React.createClass({
                     aclObject={availableAcls}
                     aclName='acl_consign'>
                     <ModalWrapper
-                        trigger={
+                        trigger={triggerButton}
-                            <button className={classNames('btn', 'btn-default', 'btn-sm', className)}>
-                                {buttonTitle}
-                            </button>
-                        }
                         handleSuccess={this.handleAdditionalDataSuccess.bind(this, solePieceId)}
                         title={getLangText('Add additional information')}>
                         <LumenusAdditionalDataForm
@@ -118,25 +135,22 @@ let LumenusSubmitButton = React.createClass({
                         ref="consignModal"
                         handleSuccess={handleSuccess}
                         title={getLangText('Consign artwork')}>
-                        <AclFormFactory
+                        {consignForm}
-                            action='acl_consign'
-                            currentUser={currentUser}
-                            email={this.state.whitelabel.user}
-                            pieceOrEditions={editions}
-                            showNotification />
                     </ModalWrapper>
                 </AclProxy>
             );
         } else {
             return (
-                <ConsignButton
+                <AclProxy
-                    availableAcls={{'acl_consign': availableAcls.acl_consign && canSubmit}}
+                    aclObject={{'acl_consign': availableAcls.acl_consign && canSubmit}}
-                    buttonAcceptName={buttonTitle}
+                    aclName='acl_consign'>
-                    email={this.state.whitelabel.user}
+                    <ModalWrapper
-                    currentUser={currentUser}
+                        trigger={triggerButton}
-                    handleSuccess={handleSuccess}
+                        handleSuccess={handleSuccess}
-                    pieceOrEditions={editions}
+                        title={getLangText('Consign artwork to Lumenus')}>
-                    className={className} />
+                        {consignForm}
+                    </ModalWrapper>
+                </AclProxy>
             );
         }
     }

js/components/whitelabel/wallet/components/lumenus/lumenus_forms/lumenus_additional_data_form.js

@@ -51,10 +51,8 @@ let LumenusAdditionalDataForm = React.createClass({
     componentDidMount() {
         PieceStore.listen(this.onChange);
 
-        // If the Piece store doesn't already have the piece we want loaded, load it
+        if (this.props.pieceId) {
-        const { pieceId } = this.props;
+            PieceActions.fetchOne(this.props.pieceId);
-        if (pieceId && this.state.piece.id !== pieceId) {
-            PieceActions.fetchOne(pieceId);
         }
     },
 

js/utils/form_utils.js

@@ -72,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,');