Add error modal for uneditable marketplace editions that cannot be consigned due to missing fields

js/components/ascribe_modal/modal_wrapper.js

@@ -1,6 +1,7 @@
 'use strict';
 
 import React from 'react';
+import classNames from 'classnames';
 
 import Modal from 'react-bootstrap/lib/Modal';
 
@@ -16,6 +17,7 @@ let ModalWrapper = React.createClass({
             React.PropTypes.string
         ]).isRequired,
 
+        bodyClassNames: React.PropTypes.string,
         handleCancel: React.PropTypes.func,
         handleSuccess: React.PropTypes.func,
         trigger: React.PropTypes.element
@@ -70,7 +72,7 @@ let ModalWrapper = React.createClass({
     },
 
     render() {
-        const { trigger, title } = this.props;
+        const { bodyClassNames, trigger, title } = this.props;
 
         // If the trigger component exists, we add the ModalWrapper's show() to its onClick method.
         // The trigger component should, in most cases, be a button.
@@ -88,13 +90,15 @@ let ModalWrapper = React.createClass({
         return (
             <span>
                 {clonedTrigger}
-                <Modal show={this.state.showModal} onHide={this.handleCancel}>
+                <Modal
+                    onHide={this.handleCancel}
+                    show={this.state.showModal}>
                     <Modal.Header closeButton>
                         <Modal.Title>
                             {title}
                         </Modal.Title>
                     </Modal.Header>
-                    <div className="modal-body" >
+                    <div className={classNames('modal-body', bodyClassNames)}>
                         {this.renderChildren()}
                     </div>
                 </Modal>

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

@@ -7,6 +7,8 @@ import EditionActions from '../../../../../../actions/edition_actions';
 
 import MarketAdditionalDataForm from '../market_forms/market_additional_data_form';
 
+import MarketErrorConsignUnavailable from '../market_error_consign_unavailable';
+
 import AclFormFactory from '../../../../../ascribe_forms/acl_form_factory';
 import ConsignForm from '../../../../../ascribe_forms/form_consign';
 
@@ -41,7 +43,7 @@ let MarketSubmitButton = React.createClass({
                 },
                 other_data: otherData } = edition;
 
-            return artistBio && displayInstructions && technologyDetails && workDescription && otherData.length;
+            return !!(artistBio && displayInstructions && technologyDetails && workDescription && otherData.length);
         }
 
         return false;
@@ -55,11 +57,13 @@ let MarketSubmitButton = React.createClass({
         return editions.reduce((details, curEdition) => {
             return {
                 solePieceId: details.solePieceId === curEdition.parent ? details.solePieceId : null,
+                canEdit: details.canEdit && curEdition.acl.acl_edit,
                 canSubmit: details.canSubmit && this.canEditionBeSubmitted(curEdition)
             };
         }, {
-            solePieceId: editions.length > 0 ? editions[0].parent : null,
+            solePieceId: editions.length ? editions[0].parent : null,
-            canSubmit: this.canEditionBeSubmitted(editions[0])
+            canEdit: true,
+            canSubmit: true
         });
     },
 
@@ -86,7 +90,7 @@ let MarketSubmitButton = React.createClass({
             handleSuccess,
             whitelabel: { name: whitelabelName = 'Market', user: whitelabelAdminEmail } } = this.props;
 
-        const { solePieceId, canSubmit } = this.getAggregateEditionDetails();
+        const { solePieceId, canEdit, canSubmit } = this.getAggregateEditionDetails();
         const message = getAclFormMessage({
             aclName: 'acl_consign',
             entities: editions,
@@ -119,44 +123,61 @@ let MarketSubmitButton = React.createClass({
         );
 
         if (solePieceId && !canSubmit) {
-            return (
+            if (canEdit) {
-                <AclProxy
+                return (
-                    aclObject={availableAcls}
+                    <AclProxy
-                    aclName='acl_consign'>
+                        aclObject={availableAcls}
-                    <ModalWrapper
+                        aclName='acl_consign'>
-                        trigger={triggerButton}
+                        <ModalWrapper
-                        handleSuccess={this.handleAdditionalDataSuccess}
+                            handleSuccess={this.handleAdditionalDataSuccess}
-                        title={getLangText('Add additional information')}>
+                            title={getLangText('Add additional information')}
-                        <MarketAdditionalDataForm
+                            trigger={triggerButton}>
-                            extraData={extraData}
+                            <MarketAdditionalDataForm
-                            otherData={otherData}
+                                extraData={extraData}
-                            pieceId={solePieceId}
+                                otherData={otherData}
-                            submitLabel={getLangText('Continue to consignment')} />
+                                pieceId={solePieceId}
-                    </ModalWrapper>
+                                submitLabel={getLangText('Continue to consignment')} />
+                        </ModalWrapper>
 
-                    <ModalWrapper
+                        <ModalWrapper
-                        ref="consignModal"
+                            ref="consignModal"
-                        handleCancel={this.refreshEdition}
+                            handleCancel={this.refreshEdition}
-                        handleSuccess={(...params) => {
+                            handleSuccess={(...params) => {
-                            if (typeof handleSuccess === 'function') {
+                                if (typeof handleSuccess === 'function') {
-                                handleSuccess(...params);
+                                    handleSuccess(...params);
-                            }
+                                }
 
-                            this.refreshEdition();
+                                this.refreshEdition();
-                        }}
+                            }}
-                        title={getLangText('Consign artwork')}>
+                            title={getLangText('Consign artwork')}>
-                        {consignForm}
+                            {consignForm}
-                    </ModalWrapper>
+                        </ModalWrapper>
-                </AclProxy>
+                    </AclProxy>
-            );
+                );
+            } else {
+                return (
+                    <AclProxy
+                        aclObject={availableAcls}
+                        aclName='acl_consign'>
+                        <ModalWrapper
+                            bodyClassNames='modal-body-text'
+                            trigger={triggerButton}
+                            title={getLangText("Oops, we can't let you consign %s", editions.length > 1 ? 'these Editions' : 'this Edition')}>
+                            <MarketErrorConsignUnavailable
+                                editions={editions}
+                                whitelabelName={whitelabelName} />
+                        </ModalWrapper>
+                    </AclProxy>
+                )
+            }
         } else {
             return (
                 <AclProxy
                     show={availableAcls.acl_consign && canSubmit}>
                     <ModalWrapper
-                        trigger={triggerButton}
                         handleSuccess={handleSuccess}
-                        title={getLangText('Consign artwork to %s', whitelabelName)}>
+                        title={getLangText('Consign artwork to %s', whitelabelName)}
+                        trigger={triggerButton}>
                         {consignForm}
                     </ModalWrapper>
                 </AclProxy>

js/components/whitelabel/wallet/components/market/market_error_consign_unavailable.js

@@ -0,0 +1,52 @@
+'use strict';
+
+import React from 'react';
+
+import { getLangText } from '../../../../../utils/lang_utils';
+
+
+const MarketErrorConsignUnavailable = React.createClass({
+    propTypes: {
+        editions: React.PropTypes.array.isRequired,
+        whitelabelName: React.PropTypes.string.isRequired,
+
+        handleSuccess: React.PropTypes.func
+    },
+
+    contactOnIntercom() {
+        window.Intercom('showNewMessage', getLangText("Hi, I'm having problems consigning to %s", this.props.whitelabelName));
+    },
+
+    render() {
+        const { editions, handleSuccess, whitelabelName } = this.props;
+        const multipleEditions = editions.length > 1;
+
+        return (
+            <div>
+                <p>{getLangText("Well, it looks like you've caught us in a bit of a bind!")}</p>
+                <p>
+                    {getLangText('As a prerequisite, %s requires you to provide additional details before they will ' +
+                                 "consider your consignment request. However, it looks like the %s that you're trying " +
+                                 "to consign can't be edited anymore. Most likely, another Edition of the same work was " +
+                                 'previously transferred by you or another person.',
+                                 whitelabelName,
+                                 multipleEditions ? 'Editions' : 'Edition')
+                    }
+                </p>
+                <p>
+                    {getLangText("Unfortunately, this means that we're unable to let you consign %s.",
+                                 multipleEditions ? 'these Editions' : 'this Edition')}
+                    {getLangText('If this seems incorrect, or if you would still like to consign %s to %s, please ',
+                                 multipleEditions ? 'these Editions' : 'this Edition',
+                                 whitelabelName)}
+                    <strong><a style={{ cursor: 'pointer' }} onClick={this.contactOnIntercom}>{getLangText('contact us')}</a></strong>.
+                </p>
+                <button className='btn btn-default btn-wide' onClick={handleSuccess}>
+                    {getLangText('OK')}
+                </button>
+            </div>
+        );
+    }
+});
+
+export default MarketErrorConsignUnavailable;

sass/lib/modals.scss

@@ -1,8 +1,12 @@
 .modal-body {
-    padding-top:0;
+    padding-top: 0;
+
+    &.modal-body-text {
+        padding-top: 10px;
+    }
 }
 
 .modal-header {
     padding: 15px 15px 0 15px;
     border-bottom: none;
-}
+}